React JS Tutorial for Beginners #1 – Build a website using React, Sass, Gulp and Node.js

react.js is a popular framework that can be used to develop single page web applications these only require you to load a single HTML file and then it will update as the user interacts with the application one of the biggest attractions to a framework like react or angular is that it's a much better user experience one of the main benefits is the fact that it kind of creates a virtual Dom and it's constantly inspecting it for changes and then making updates on the fly if you're familiar with things like the rendering tree you're going to find a lot of benefits to using this kind of approach to your web development however to put it in a more simple and understandable way if you look at current websites that are built on things like PHP or maybe even just a normal HTML website what you'll find is that as you reload or you navigate around the site to a different area or page it will reload the entire document it will make the same HTTP requests every single time and although things get cached this is still a lot of unnecessary expense for the end user with a framework like react or angular it will only update areas of the web page it won't actually reload the entire Dom now by the end of this video tutorial we will have built our first website using react j/s and you will have enough knowledge of the framework to actually start using it and it will give you a foundation for you to go forward and actually build your own web applications and apply that knowledge to do more research and understand what you're looking at and learn more and use more but absolutely this tutorial will give you a foundation we're going to build our first website fully responsive website in fact and we're going to incorporate bootstrap but before we get to that what I want to do is actually give you a bit more of a background just briefly on react itself now if you go to their official website you're going to notice that the URL is prefixed with Facebook and that is because Facebook actually created react react is probably the main competitor to angular I personally prefer react over angular because I feel it is much more stable and I just prefer prefer it now if you want to start if you want to find their website you can either input that URL directly or you can just type in as you can probably guess react je s and then click on the first one and of course that's going to take you to their official website they've got a lot of documentation they've actually got a tutorial that you can follow and it's quite in-depth and definitely worth a read but as I mentioned previously react is built off of node.js and we're going to be using NPM which stands for node package manager to install the tendencies and in launch our server so you're going to need to install this on your machine that is both for obviously Windows and Mac so please navigate to the node J our site and install that on your machine now this tutorial is not going to cover CSS or anything like that but I am going to be working with a CSS preprocessor which is sass now again this is not a tutorial about sass but I'm going to be working with it so if you are interested in using pre processes or sass this might be another thing that you'll get out of the tutorial but I fully recommend you coming over to the sass website reading up son on their documentation and these kind of things are a really beneficial to you evolving as perhaps a front-end developer or just gaining experience in in front-end development because these kind of pre processors for CSS allow us to be much more efficient and write much cleaner and readable code and of course they just help us I mean they allow us to create mix-ins and things like that which are functions in CSS that save us a lot of time because you don't have to rewrite repetitive code and as I said it's just much easier to to develop your site now another aspect of that because we're going to be using a preprocessor I'm going to have to compile that and I'm going to be using a task runner which of course my preference is gulp of course this is probably the the new boy in the block the alternative to grunt this is a really powerful tool it can be used for a lot of different things of course it's a task runner which means it just autonomous tasks but what I'll be using this for in this particular tutorial and project is just to compile the sass I'm actually gonna be using SPSS which is the bracketed version of sass but I'm going to be using this to compile that into standard CSS minify detect the changes and then output that to destination so before we can actually start writing code we need to create our application this means we have to install all of the required dependencies and install those modules before we can actually start working with react itself so to do that we need to create a folder on our desktop that is going to house all of our project files so to do that it with in terminal I'm going to say CD desktop that means I navigate to my desktop within terminal and then I'm going to say mkdir space and the name of a folder I wanted to create in this example I'm going to say it's just going to be called react tutorial you can call that the name of your application and as you can see here it's just created a folder which is empty that I'm going to be using to actually install all of my my application and then I'm going to navigate inside of that so I'm say CD I'll drag that folder in here click on return now inside that folder and I'll clear that down so as you can see I'm now I've created a folder on my desktop and in terminal I've navigated inside the hole that I created now as I said we need to install all the various dependencies and modules that we need the easiest way to do that is to actually use a package provided from react itself which employs node.js obviously note is very important because we can't use react without node but part of node is actually something called node package manager which has allows us to work with dependencies and things like that so if I come over to the react site and click on Docs then navigate to installation there are some various documentation about how you can actually install and create your first application the easiest way to do it and I recommend this when you're trying to wrap your head around the concepts and various things is to use a package that they've provided which is called create react app you only have to install this once on your machine but what this basically means is NPM stands for node package manager install so I want to install something I want to install it globally and this is the name of what I want to install so I literally just have to copy this line into terminal click on return and that will actually install that package on my machine so on my computer so I can use that to create my applications now just so you're aware one of the more month of the manual method of doing this is to use something called web pack which is where you define all of the various dependencies that you require and things like that that's a manual approach but this is actually going to do the exact same thing but it's going to do it automatically for us now I don't have to install this because I already have it installed on my machine as I said you only have to install it once so I'm actually going to copy this second line of code I'm actually only going to copy up to this point so let's just the name of the package which is create react app I'm going to come over to my terminal window as I said I am actually I've navigated inside reacted tutorial so I'm inside the folder my project folder I'm going to paste in create react app which is what I just copied put a space in and then I'm going to give it a name now this is the name of my website the name of my application so I'm going to call this and just a note you cannot use capital letters so nothing uppercase and obviously no invalid characters the name of this is just going to be my my react project and it can be literally anything you want I'm going to click on return and then that's going to go ahead and start installing all of the various dependencies and setting up my project for me automatically now this might take a few minutes but so I'm going to pause the video and I'll come back to you in a second when this is done so that's successfully completed the installation so if I just show you inside this folder it's created another folder which is my react project the name of what I the name of the project I specified if I click on that you're going to see all of the files that it's created we'll get a little bit we'll come back to that in a second the first thing I want to do is navigate inside of my project folder so I'm actually going to clear this down so I'll say clear and then I'm going to say CD and I'm going to navigate to this folder and once I'm inside that I can say NPM so node package manager start once I do that it's going to launch my light server and we're going to see the application that's been created for us automatically now off the bat this is going to be very simple and as you can see all it is is like a default page so I'm going to delete a few things here and we're going to manipulate this slightly again this is just out the box stuff that is just kind of not needed so the first thing I'm going to do is I'm going to delete this app CSS file in fact I won't delete it here I'll put it here in the folder so navigate in here I'm going to come into my source folder and I'm going to delete my logo SVG obviously I'm going to delete my app CSS I'm going to keep my app Jess I'm going to keep app test just going to delete index CSS and have an index yes file I also want to keep that if I come back to my public folder I've got a favicon here I guess I will update that I'm not going to do that for this tutorial but of course this is something you would do for a real project that you're intending to deploy but of course for this tutorial is just not required I'm going to come back now to Adam and obviously if I start to write expanding collapse it's going to see that obviously those changes have been reflected here but I'm also going to get errors now because it's pointing to files that don't exist so if I come into my app Jess it's going to delete all of this default content I'm going to only leave this sort of wrapping div inside my render method I'll come back to more on this in a second I'm going to remove this import for the logo SVG I'm going to remove the import for that default CSS file I'm going to save these changes and then I'm going to come over here to my index.html file as you can see I'm just going to show you that you have some default stuff so for example you have your viewport your meta viewport defined here we have a favicon defined here we have a page title which we're going to be tweaking this slightly but that's all defined here if I come back to so if I come back to index yes I'm going to delete import CSS and I'm going to save this file and as you can see now I'm not getting any more errors but it's just white because I've completely removed all the defaults out box kind of styling and setup that I didn't want it was unnecessary for me I'm going to come back to my app just just to show you and I'm just going to say test and save that and you're going to see when I save it I'm going to detect the change automatically I didn't do any kind of refresh or anything just detected it they reloaded and see test so it's not airing it's just white because there's absolutely nothing here at the moment we're going to start to code that up right now now as I said my approach to this tutorial is really based on how I like to learn I like to learn by practice I can read articles in magazines and blogs and I can watch tutorials but the only way I really learn is through application and using it myself so what I'm going to do is rather than stop here and explain different parts of react and they react app I'm going to immediately start working with it and explain as I go as much as possible and hopefully you can follow along and pause and go at your own pace as required so the first thing that I'm going to do is I'm actually just going to create look at the architecture here and and kind of create my own workflow now as I mentioned before I am going to be using sass which means I need to use a task runner to compile that into CSS so I can use it I also want to use bootstrap so what I want to do is over here in my web browser I'm going to come over to bootstrap which I already have and obviously I clicked on getting started and it's just going to give me a link to a CDN to get bootstrap I'm going to come back to Adam and I'm going to come back to public and index.html and I'm also going to include this on this level okay so at this point we have created our application and installed all of our dependencies but what I mentioned previously was that I didn't want to work with standard CSS I want to work with sass and to work with sass it's an industry standard we will be using a task runner I've chosen gulp to compile that sass into standard CSS that can be included and used in our project now I think it's important that I don't go into gulp or sass too much in this tutorial because I think it's going to confuse a lot of people and in fairness I think it's something that really is the basis of a complete tutorial in itself so I'm going to just briefly touch on it just so that people understand what I've done I have installed a few more dependencies which I'll show you in just a second I've gone ahead and done that I also have go installed on my computer so I can work with gulp so if you do want to follow along or if you have it installed great if not please install it but in the same way that node looks for a package.json file when you say npm install it will install all the dependencies that are included in your package JSON file go when you cool go on your project folder it will default and look for a go p-- file j/s so I've created my own custom file here if I just open it up and show you in atom what I've done here is the first thing I've done is I've called the dependencies I've required the dependencies that I just mentioned that I just installed so these are the dependencies that I have required so if you want to follow along with sass please install and require these dependencies so as you can see gulp gulp sass go clean CSS Go Go Phi go pre name and go p-- changed what I've then done is I've created two variables which basically contain an input and output an input and output path for my sass and CSS so if I just show you what I've done and replicate that over here this is my project folder now my input folder so the files is in the SRC folder is my source folder assets and then s CSS and all my s CSS files will be in this folder now if I back out of that you'll see there's a CSS folder and this is my output destination so if I look at my output destination here my output fireable that's the destination I'm pointing to now just to explain why we need a task runner such as gulp sass is not a readable in current modern-day browsers which means we can write s CSS which is a CSS preprocessor allows us to write our CSS with a sort of tree like structure it will allow us to use sort of mix-ins and functions and variables within CSS that make our code much better much cleaner readable and much more efficient workflow but as I said that needs to be compiled into standard CSS and ideally minified and that minified file of standard CSS is what's included in our in our project so this is going to be a little bit easier to explain once I actually show you us working with these files but that's just a brief overview of what I've done and then just to get back to this gulp file I've created a task within gulp obviously I've called it compiled s CSS that accepts a function and then I've basically called gulp source so what I'm doing here is I'm creating a stream of readable files so I'm using my input variable which contains my input destination so these are the F CSS files I'm then using pipe which is a method within gulp that allows us to kind of chain tasks together so if I look at what I've done here I'm first of all I'm compiling this into standard CSS I'm minifying it prefixing it with dot min only affecting changed files and then I'm outputting that to my output the nation now there's a few different ways of running this so if I want to run just this task I could literally in my terminal I could say Gulf space and then the name of my task however that's only going to run at once so what I've done is I've created a separate task which I'm calling gulp watch which basically means it's watching this input folder so it's watching my stream and when it detects a change it is going to run the function that I'm passing through here so I've created an array here but actually I can just pass through as many tasks as I want here and it will actually run that for me on a loop it will continually run that however just to make it a little bit simpler when I just want to write in gulp to run gulp on my project it defaults ok so if I literally I can either say gulp space the name of the task I want to run however what I can also do is just type in gulp because that will look for a task called default so it looks for a default task and again I'm just passing through my watch scss tasks that I created so I can literally now just type in gulp and as long as I don't have any errors in my code it's going to just be running this so it's actually looking for an SPSS file in that folder and then that's it it's going to run so let's come over to my folder so if I go to my source folder assets and the SCSS folder and let's create a new file ok and I'm going to call this my default dot s CSS click on return that's going to create my first CSS file now because I've already run gulp I need to end this process because when I create and run gulp it won't it will kind of look at all the folders in that the files in that folder if I add a file it won't know about it until I stop this and rerun it so I'm just going to again ctrl C to end those processes and just I go up again and that's going to run it again for me and now if I actually do something here so if i if i type in buddy for example and then I just say something like fun sighs I don't know ten pixels and then I save it you're going to see that it detected a change here there's a few more lines here now and I can come over to my CSS folder and it's actually created a file for me which is dome in CSS and you can see that this is a minified version so you see here this is actually got all these spaces and indentations but it's minified adhere now this is pretty much standard CSS you can write standard CSS in an SPSS file but let's incorporate some sass so maybe here I want to target anchor tags so basically links and I want this to have a color of black okay I can save that again detected changes let's look at the default min file and again it's not only minified it but it's actually working with the sass okay so I've got buddy and then again body dot sorry buddy in an anchor color black let's look at my sass file I didn't write 40a I just did body and then inside that so this is a tree like structure and this is what we're going to be working with so on this project now I actually need to include this file this minified file actually I need to include that somewhere you know because at the moment I'm working with those files but it's not included so we need to return so I need to return to my app.js file and then up here in my imports I'm going to just copy in a line which is just basically import and then I'm importing my CSS file so from my root directory going into assets CSS default min dot CSS so I can then save that and now what you'll find is I'm going to be working with um I'm going to be working with the sass file but actually it's included my minified GSS my standard CSS file I've included that which is great for deployment because it means that everything is automatically minified for me and only thing I'm going to deploy is minified CSS we have configured a project install of our dependencies and you understand how I'm using gulp and sass etc what I want to do is actually start building our webpage and using bootstrap etc so I've got two terminal windows here both are inside of my project folder so what I'm going to do is I'm just going to write cope now if you were following with the tutorial you know what I've just done and here I'm just going to say NPM start and what that's going to do is launch my testing server my light server so I can start working with react now as you know we kind of cleaned up our our seed project our default installation there is absolutely nothing in our app right now it's just blank so this is not an error this is not erroring if I type in some text here so test you can see this is going to update in real time as you can see it but we want to start actually building our webpage now the most important thing for you to understand when it comes to react or angular is that we use components and what components are basically the building blocks to our web page so all the different elements our header or footer our content pages they're all going to have and be unique components another really important part of this is that when you're actually using the render method we have to wrap all of our content all of our elements in one main div anything can go inside of that it doesn't actually have to be a div it could be any kind of HTML element but it has to wrap everything all the content has to be inside when we define our classes we can't just say cloths so normally in HTML you just define your class and a div like this but you can't do that because Klaus means something else in react so you have to say Klaus name but when this transposon compiled into you know our final but when this actually compiles it will actually just appear in HTML as a clause so let's just leave this as it is and the only other thing I want to mention that I've done is I have included a Google Fonts so I've actually included open sans so if you want to do that you can again I've just included I think regular and bold and then I've gotten obviously this URL included it in my index.html file here I've just included it the way that this is going to work is our app.js file is going to act as the one bridge between the react world and the the normal kind of client side of you know the browser but all of our components are going to be cold and pulled into our main app j/s file so what I want to do here is I want to create another folder inside of my source folder and that folder is just going to be called components and inside my components folder I'm going to create another folder and this is just going to be coke my header component and then inside here I'm going to create a file which is going to be called header that j/s the reason I like to create this folder structure for my components is because as we get more into a project and we get deeper into it you're going to have a lot of components and if you don't structure it and think about your architecture at an early stage you're going to find that it's going to become really difficult to work with so this is a really good step when you're starting out with react to be really consistent and do this basically do it in a way that to help you further down the line so again let's open up our header jazz file and the base structure of a component is exactly the same so I'm going to copy all this content in my app.js file and I'm going to copy it into my header J's file with the exception I want to remove this include for the default min CSS because guess what that is actually already included so I'm going to rename this component to my header I have to do that in both places it has to begin with a capital letter and what I then want to do is as I said before it needs to be wrapped in one main element and I'm going to use a html5 header element and I then need to come back to my app GS file and I need to import that component so to do that I'll just say import and then I will give it the name of the component so I've called it header and I want to import it from the location within my project folder so from the base that would be in my components folder and then I created a header component folder and then inside there is just my header that J's file but I don't need to include the file extension it knows that it's a J's file automatically now the reason I can't see that is because I've not printed that out on the page so to do that I just call my header and because it updates in real time this is already there but I can't see it because it doesn't have any text or anything inside of it so if I just say test my header and save that you're going to see that because it's updating in real time it's actually working it's actually here so the first thing that I want to do is actually build some structure to my header so I'm going to create a div inside here now I don't have an image for a logo so at the moment I'm just going to use text but I'm going to call it I'm going to wrap it in a div called logo and it's going to call it my logo can't that text in when I do that what I can actually do is for now that's all I'm going to do I'm going to create another nav element this is going to contain an unordered list and then of course inside here I'm going to have list items and for now I'm going to temporarily add an anchor tag so this H ref add a I'm going to add a hash tag for the link with the float for now and here I'm just gonna say home and this these list items I'm just going to duplicate that a couple times I'm going to add home probably products and contacts and if I save that it's going to update in my browser real time so you can see I just have some links and a logo so this is my header what I want to do now is I want to create another component for my footer so again I'm just going to copy this the content of this file close it and then in my components folder I'm going to create a folder called my footer component and inside that folder I'm going to have a new file called Twitter dot J s and in footage as I'm just going to copy all that content I'm going to remove the content of that's inside my render method replace it with a html5 footer element and I'm going to rename the component so here in here needs to be footer and then in my up jazz file I'm going to have to import that again so I'm just going to say import footer from it is in components footer component and footer jazz and then here I want to print that out so footer name of my component save it and that's pulling through let's check it's pulling through because down here I'm just going to put in my footer text I'm not actually going to put anything in my slicer I'm going to style it later on but I don't have any content that goes into my footer for this tutorial but just to show you that it's working and pulling through I'm going to leave that text in there just temporarily for now but I can close it in fact I'll copy this contents again and I want to create a component for my home page content so inside of my components folder I'm going to create another new folder this is going to be called pages and inside my pages folder I'm just going to create a new file so not a folder file and it's just gonna be called home page KS okay and I'm going to paste it cut this component structure here and I'm going to actually give a div with a class name and the class name will just equal I don't know like rap or something like that and we just want some content so this is my home page content here and call the component my home page so what I can do again my app GS file I'll just go import home page from components pages and I'm Paige I think it's okay so I home page and that's it so here in between the header and footer I'm just going to print that out so this would be my home page and obviously see you can see that now pulling through now I don't honestly want to give this class I'm here I want to use the defaults bootstrap cloth which is container fluid so what I'll actually do here probably is add that class here and what I would also then do is probably start to style up everything so I now basically have my default kind of structure for the page that I want I've got a header a nav with a logo a Content area and my footer so it doesn't look like much now but when we start to add CSS it's going to so at this point what we've done is we've created a basic layout for a web page we have a header section a footer section and a content section that all contains various content what we want to do now is basically create a style and design for this so that we can really start to manipulate it further later on in the tutorial so to do that I'm going to come back to my default s CSS file that I created and as you can see I also have created a partial file which I've called config dot s CSS and this just contains some variables for colors I've defined some things on my body and also have created two mix-ins one for transitions and ones translate why the y-axis and I'm going to be referencing these in my default CSS file so I've obviously imported it so that it can be used so the first thing I want to target is my header ok and what I want to do here is I just want to set this to display:block I want a width of 100% and I want to set the background color to black so I'll probably set the color by default so white I think I set so yeah I said I created this horrible here for that so as you can see that's immediately taken effect because this updates in real time and also if I just come back here now and I inspect elements I can see what I can start to reference here so what I want to do first of all in the header is I want to then target my logo so again I'm going to target my logo and because of the tree structure of SCSS I don't have to say like a would normally in standard CSS header logo it knows that I'm targeting the logo inside the header because I'm actually doing this inside these these brackets here so what I actually want to do with this is I want to set the position of this to absolute I want to say that from the top I want to be 50% and from the left I want probably 15 pixels I think just to have a good margin and also I want to therefore hold this mixin to translate Y so what I will actually do here is I will say include and then the name of the mixin which is translate y and then the amount which is percentage of Mao's negative 50% and I just noticed I have an extra @ symbol so what has that actually done at the moment it's disappeared because the header it needs to be relative and therefore now you can see it perfectly in the center and what I want to do obviously is then I want to target nav so I'll target the nav and I want to do a few things with it but the main thing probably is I want to position this absolute but 15 pixels from the right so you can see over here now this is collapsed because everything is absolute so actually on my header I want to set a default height of about 100 and I think maybe 20 pixels maybe that's a bit too much maybe just 190 pixels looks looks about right I think and that's it's looking more like what I'm I have in mind okay so the next thing I want to do is I want to just style up my navigation so again up here I'm just going to target the nav I'm going to target the nav ul and then I want to target the nav ul Li I just want to set the margin on this to zero and the padding to zero as well and then in here I'm going to target the Li and I think I'm going to set the list style type to none I'm going to set this to display:inline-block and see what that does save it I am going to set the margin right to 10 pixels which will space it out I'm going to come back to my header component so head ojs and on the final list item I'm going to add a class name of lost and on the first list item at a class name of first so in my CSS I'm going to target the list items with that class and I can do that by saying and and then dot plus margin I'm just going to set this to zero and that'll just make sure my margins are correct on both sides and then inside of this as well I want to target the anchor tags and I want to set the font size here to probably maybe 19 pixels with a line height of normal because it's always going to be on one line or hopefully anyway I want to default color of this to be white and that looks about right to be honest the one thing I probably said in my config file here is probably on anchor tags I want to make sure that the text the text decoration is none and I guess I probably want to include this transition mix in here on this as well to be honest which I'm going to set 2.4 seconds and ease in out and also I will set the cursor to pointer and all of this would actually probably be defined in um probably be defined in bootstrap but yeah I think it's important that we style that here and I probably want to come back and grab this class and I just want to target a few things I want to target this and I want to add a line height by default 24 pixels and also actually on the hover of this anchor tag so on a hover as a success I can actually just do and hover which would be correct I'd want to add that transition to this as well but I want to change the color by default this will go to red and that red is defined here so again if I come back here now what you'll see is this is now going to inherit or should inherit it might be bootstrap the only issue I have with with bootstrap really is that it does it does inherit a lot of styling that sometimes can conflict with your own CSS doesn't look like those the issue here but this doesn't seem to be and I think I've just realized what the problem was so sometimes it can actually pay to check the terminal for errors I've just realized that I had tried to save a bit of time copying this I didn't change mixin to include which was the error so if I actually saved this out that will then work and if I just make it change here so for example I think I wouldn't have to specify this anymore if I save that this is now still not shown as changes so what the issue there was in actual fact was that the mix-ins were basically defined at the bottom they should be defined at the top because otherwise I'm referencing them here and they're not created yet so that was what that problem was I think that's now going to work as you can see so that is looking pretty slick now that's what I wanted I think it needs a bit more of a margin than just 10 pixels I'm going to set that to 15 or maybe 20 even it's looking a bit better now I think so that looks great but what we do need is we need some styling we need we need some content so I'm actually gonna come over here to Google I'm just going to type in dummy content it's going to find a generator something like this should be fine let's copy that let's come back to our page so the home page and what I want to do here is I want to set up an h1 and we're going to call this our home page content and then here let's create something like a P tag and that is just going to contain that dummy text that we just copied in okay let's come back over here and you're going to see that we've got this styling in and this h1 has probably been styled from bootstrap there you go I'm quite happy with our progress to this point we've managed to build our first web page using react we've used different components to pull in a header a Content area in navigation I have decided to remove the footer simply because for the purposes of this tutorial I don't have any content to input into it and it seems a little bit unnecessary and I'm sure with the guidance of this tutorial you're more than capable enough of actually going ahead and implementing that yourself the next step of this tutorial is actually going to be incorporating a router how can we actually incorporate a router and and link to different pages so for example at the moment if I click on products nothing will happen what I want to happen is I want to navigate away to another page with different content the way a router works and this is the same for both angular and react is it detects changes in the URL and then it will display content depending on that so the first thing that we have to do is actually install another dependency which is the react router dumb so I'm going to come over to my terminal window I'm going to end the current processes and clear I'm going to enter MPM I for install and I'm just going to install my react a router Dom now I've already done that so all you're going to need to do is click on return and allow that to run and install however I am now going to say NPM starts so you relaunch my light server and once that's done we'll be able to actually implement the router itself so to do that what we need to do is actually import it first of all so at the top of my app JS file I'm going to say import and I want to import several things so I want to import browser router as browser I want to import route and I want to import a link and I want to import that from the react router dump something else that I've done is I've actually gone ahead and created a project JS file inside my pages folder so all that is is basically a duplication of home page chairs and it's basically just got a different h1 heading tag so it's just products instead of home page you can put any content you want in here but the important thing to understand is that the way this will work is you're going to have a different component for every different page that you have or create so what we need to do here is in a wrap J's file we need to actually import that component so I'm going to import products from components pages and products now what you're going to notice down here is that we need to make some changes to how this works so the first thing is I'm currently just printing out homepage now if I was to just come here and print out products I am going to get both components loading on the page but obviously I only want this to appear if the user is on said page so how can I do that well what I do is I will delete these two so at the moment that's completely gone and I'm actually going to wrap my this this parent div so immediately after at the opening return I am going to create my router and I'm going to close it just before it closes and then where I want this route to display I'm going to create a route it needs to be based on an exact match so I'm just going to say exact the path in the URL for this to display it is just going to be four slash so basically this is a home page and the component which will display needs to be a lowercase C and then we'll close that off but this needs to be home page and then we're going to duplicate this for products so when it's forward slash products we're going to we're going to display products which is the name of the component so manually now if I come up to my URL and I input products you're going to see I now get products but I don't want to have to manually do that of course every time so what I need to do is come into my header so so what we need to do is we need to come over to our header J's file and we need to import link first of all so I'm going to copy this import and I'm just going to remove these first two because we don't need that the reason that I'm importing link is because we then react within react we don't use anchor tags because obviously we don't want to navigate to another page this is a single page application so we have a custom element which is a link so just to show you I'm going to create a new line here and I'm going to create a link okay I'm going to just close that off here and I'm going to copy products so over here you're still going to see the same thing but here is going to say two equals and it's going to go to products okay so we have this side-by-side because over here in the code I have link and then I have this anchor tag I didn't remove it but I just want to show you if I inspect element this is two anchor tags okay so it's slightly different when we're working with the code we're going to put in a link we're not putting in an anchor tag but when it compiles it will actually compile to a normal anchor tag with a normal hedge ref which is why I temporarily put in an anchor tag because when I styled it with CSS I wanted it to be you know I wanted to style it so I can now remove that and obviously here you know I can just replace this this is going to be contact for now it'll let's just say con and we don't have a component for that yet and obviously here this will just go nowhere and we'll go home so if I save that that's going to compile and if I actually close this now real quick what I can do is I can come over here and I can click on products and you can see how that this is actually updating for me congratulations you've just created your first single page application using react now if you follow it along with this tutorial you should be able to navigate between pages and you should fully understand the basic concepts of react understand you how to use components and how to pull in content using react before I end this tutorial I just like to encourage you to visit our official website site easy calm and there will be a link in the description we offer a range of different products and services but what we offer is a platform that you can use to build a social network ecommerce and/or content management website all of the features and information can be found on our website including a demo of the product that we offer I would also just like to encourage you to visit I would also just like to encourage you to visit simple TOCOM again there'll be a link in the description where we post where we post our tutorials you can find more information about our tutorials on our official Facebook page which we encourage you to like to receive updates when new content is released and being created occasionally we'll even release polls to vote on content that you want and of course our official YouTube channel where we post our videos and I just like to highlight a particular video which is that of our angular tutorial which is a very similar tutorial to this one obviously angular is the main competitor to react and of course they're very similar framework so of course a lot of the concepts things like routing components are all the same so if you are looking to get into the industry and and and get a job within front-end web development then learning angular learning react I couldn't recommend anymore and actually this kind of knowledge is extremely important but just in general if you're interested please check out the tutorial I will actually post a link to this specific one in the description of this video thank you once again and I look forward to the next tutorial in this series some of the things that we're going to be looking at during this series are things like the state props how we can implement a back-end maybe using PHP may be using dotnet and of course some of the other tutorials that we have upcoming things like gulp task runners like current gulp pre-processors like less sass if you have any tutorial requests please direct message us and a member of our team we'll get back to you thank you very much for your time and have a great day

Channel: SimpleTut

Views: 251,487

Keywords: react js, reactjs, react, react framework, react render, javascript react, react flux, react component, react js framework, reactor js, react u, react jsx, facebook react js, reactjs components, react app, react js components, react programming, reactjs native, reactjs facebook, react web development, react js getting started, react ui framework, react js documentation, react js library, react render html, react js ajax

Id: nusgoj74a3Y

Length: 58min 31sec (3511 seconds)

Published: Sun Apr 30 2017