Getting Started with React [single page application/ web development for beginners]

hey everyone today i'm going to be showing you how to create a web application um getting it started using the react library a front end framework uh with that there are a few other pieces that we need to add and if you're just beginning your journey learning web development as i have as a learner there's plenty that you're going to need to know one of those things being what is an application and and and what does the construction of an application entail and i'm going to give you just the gist of what i understand by it and how an application is really just a series of uh views with certain properties being passed between them which in turn shows a viewer or you know in web dev language client different things through the web browser so how do we create an application well these days one of the ways people are doing it are by way of what are called single page applications so here are two that i've made this is one called remy gets a smartphone and a single page application will take an initial download from the server and only shift out certain views that you see as a as a user depending on input like if for example i click a link about then we'll have the middle section of this application change it's view so the rendering of what we're seeing on the screen is really dependent upon the input we're giving it and a key part of a single page application is basically having a middle section which shifts and then a header and a footer which stay consistent so we have a header here with what's called the nav bar with the drop down menu and then this picture of a cat and then we have a footer here which stays consistent too notice how when i shift between tabs the top and bottom stay the same but the middle content shifts i have another single page application that i've built out in a similar way with the header and the footer staying consistent i have some other little features in here this one is way more built out than the one i showed earlier but the concept is the same with the middle content shifting out in relation to the input we're giving um the application in the in this sense here clicking on links so you can see how we have the switching out of a middle component so how do we begin doing this well there are quite a few steps if you're going from scratch but if you want to get a quick start what one way you can do it is by using what is called a scaffolding for what react and in this case we're going to be using something called create react app and how do we begin so step one create a folder on your desktop i'm going to go ahead and i'm going to rename this one just the demo folder in this case you can call yours whatever you want or i'll just call it demo actually just for for ease from here you're going to move into your terminal now before i begin uh this next step um this tutorial relies on you having also set up your computer for some application development and and that setup specifically it involves installing a package manager and what that means is that you're able to import in code that people have already pre-written to build out your application and these pre-written chunks are really essential because they can speed up the development process and we need a way to pull that information quickly through the terminal here and i'm holding it i'm using a mac by the way for those of you who are curious and it's not obvious to you but once you have done this you'll be able to ask for certain modules to be installed into your project and declare a new project just outright so the way to do that is going to be npx well first of all we're going to go to the folder that i've created so i'm going to go cd desktop ls to see what kind of folders i have on the desktop if you if you really want to see that i'm going to go to the demo folder which i just created earlier so cd demo ls nothing presently in the folder now ls for those of you who are new to working with the terminal is list services we have currently nothing in this folder and i'm going to open it up for you just to take a look there now from here what we're going to do is we're going to do npx create react app and then we're going to give it a name so i'm going to call this demo this will be the name of my application but by default it's also going to be the name of the folder so once you type that in you're going to see that create react app goes ahead and downloads all these modules from the web using a node package manager and that in turn will be installed within this folder here when it's done now looks like it's almost finished up and there it is you can see that we have a demo folder if we open up the demo folder you'll see that there are actually still things that are being loaded up but you know we have folders appearing um which will be used the components will be used to to build out an application just like what i showed you earlier with these two apps both of which were scaffolded out with create react app so we're just going to give it a moment in the meantime what i'm going to do though is i'm going to go ahead and i'm going to open up a new window and the reason for doing this will become apparent a little bit later but i'm going to go ahead and move to the same directory that i'm installing packages in right now so i'm going to go again cd desktop and then i'm going to go to cd demo and at this point it really is important that i hold up a little bit and i wait for the react app to install so i'm going to pause it here and wait for it to be done all right so now that my react create react app has finished loading and it looks like all the files have been downloaded to begin building out my application you'll see that the terminal prompts me with how i can type in yarn start to go ahead and view the deployment of the application as is now what is yarn yarn is a package manager as i mentioned earlier there are two that you'll come across often node package manager and yarn both of which will have to be installed and both of which i'll put the links to in the description to this video so you can go ahead and set that up but let's go ahead in one of the terminal windows that i um open let's go ahead and type in yarn start and see what happens oh of course so important here is if you ls right now you'll notice that there is a demo folder so we're going to have to actually cd into that so cd demo and we ls and you'll see that there are all the files that are listed in the folder right here now we'll go ahead and type in yarn start and you'll go ahead and see how the terminal loads up the scripts we'll have a browser window pop up and very soon from our local server on at this address 3000 we're going to see our react application as it was scaffolded out by create react app now as it's loading i just want to talk to you all a little bit just about just web development and this is somewhat of a new thing for me too and some of you listening may be doing this for learning a skill for a job some of you may just want to deploy something online kind of like i did and want to get started with the pieces to development quickly so you can start creating and and launch something and put it live which is extremely exciting so what i want to highlight before i just really delve deep into this is you can do a lot with very little and uh the pieces that i'm going to show you are really just the bare fundamentals that you'll need to implement a static website where you can switch between what are called views and and and i will just now jump into it so here we have our react application we have this spinning logo um we have you know some text and we have a learn react header so let's go ahead and let's take a look at the code now so i'm going to shift this browser window away and we're going to leave this terminal window open and running so that way as we work with our code and we type in new commands it'll render automatically within this web browser and we'll be able to see those changes by flipping back and forth so i'm going to go ahead now in this other terminal window again notice how i've cd into the directory i'm going to list the services here and i have to go into the demo folder ls again and now i'm going to type in code dot now code dot will open up visual studio code which is the development environment of choice for me um there are many others that you can choose from and the code dot is something that you'll want to set up with your own computer the other alternative is just to go up old school and open up visual code and then file open and open it but um it's a little bit of a long-winded way so i've done it through the terminal to go directly to this folder that i've been working on and have that immediately installed within visual code and let's go ahead and look at some of the files so we have a file structure already built out for us with create react app so if i go to app.js you'll see that there's some stuff here that looks very familiar take that away um you'll see that we have um app.js code and save to reload and learn react so just that text alone let's go ahead and compare it to the view we're seeing in the browser you know save and rotate to reload and learn react so that gives us a pretty good hint that the information from that file is being directly rendered to this view here and that gives us a good starting point for where to kick off our development work so first thing we're going to want to do is is we're going to go ahead and we're going to delete some of this stuff actually we're going to take away all this middle section here including the header and we're going to leave the div right there now instead of just leaving it blank i'm going to go ahead and type in hello world and then i'm going to save it notice now when i go back to my application it immediately renders hello world there now an important part of this all if you're kicking off again your journey learning react is you're going to need to learn some html and css to be able to work effectively with react and you're definitely going to have to up your javascript skills i'm again only showing you the very basics and there is so much um but to get you started in in the interest of maybe sparking some success early um let's stick to our plan with just sort of assuming that you have some of these fundamentals in place already and if you don't why not just follow along and try it out too so i have hello world in there right now now again when we go back to our single page applications we have a top section and a bottom section down here which stay consistent and we have a middle view which shifts depending on user input that was something early on in this tutorial that i had spoken about we're going to try to simulate that with just some basic text right now so to begin we're going to go ahead and implement a file structure for our application a very basic one within the src source folder we're going to go ahead and we're going to create a components folder all right there you go in the components folder what i'm going to do is i'm going to create a series of files now the first one that i'll do is create a main component so i'm going to go ahead and call this main component okay and in the main component what i'm going to do is i'm going to start describing what i want that component to look like and it's going to be very similar to hello world in this case but let's start building it out so we're going to do import react from react and then we're going to do a function main and in here we're going to return a value which will be a div and in it it's going to say hello world and we also need to make sure that we export what we're describing in this file to be used elsewhere in our program so we're going to do export default main okay so from here let's go ahead now and jump back into uh the app file going back and forth between the two but i'm going to app.js i'm going to delete away some of the stuff that we don't need now but we want to go ahead and import in this main component so we're going to go ahead and say import main from dot components and main component now we can now use this within the app.js file and we can go ahead and just call that component we just built the main component like so main notice how automatically within my development environment code you know basically my ide it automatically goes ahead and puts a closing tag main here but we can have self-closing tags too like so by just putting in a slash bracket so we only need one main right there so if i go ahead and i save this now and i go back and look at my react app again we again have hello world slightly rendered slightly differently um you know we can get into talking about styling in fact i encourage you to look at html and css styling for the development of your applications because you're not just going to want your stuff placed willy-nilly all over the the browser screen but it's put it in the top left in this case so the why i wanted to show you this though is we created a component in a separate file and we've imported it in and we have rendered it in a very similar way within a file so we have our main component and the main component is now where we are going to declare the meat of our application what we will call a single page application where the header and the footer will stay consistent and the middle chunk will change so in order to do that we need to build out a header and a footer component and then some kind of views that we want to change in here in components go ahead and create a header component dot js i'm also going to go ahead now right away and create a footer component dot js working first with the header i'm going to import react from react and then i'm going to go ahead and declare this header component as a function we will call this a functional component as you learn more react you'll also have to know about class-based components the reason being sometimes you'll want to include certain properties within your component that you can't with a functional component unless you use certain add-ons but that's getting ahead of ourselves so we're going to go ahead and declare this header component so function header and we're going to return a value and this will be a div again since we're just really trying to keep this simple excuse the auto rendering with my sloppy typing and we're going to say header component and we need to make sure we export this so export default header all right so we're going to save that and we're going to use this as a template also for creating our footer i'm going to paste it into the footer file i'm going to go ahead and change what we call this function footer i'm going to call this footer component and default export footer so in much the same way we imported in the main component um into app.js we're now going to go ahead and import in those two files into um you know the main the main component here and let me backtrack a bit in much the same way that we imported in the main component into the app.js file we are going to do the same for main component so we're going to do import a header from dot header component and import footer from footer component so at this point now we can go ahead and use these within the main file so let's go ahead and try that out so header and i'm going to make this a self-closing tag right away i'm going to go ahead and put footer and i'm going to make this a self-closing tag right away i'm going to go ahead and save this so right away uh we do have an error our id has picked up something in red but let's go ahead and take a look at it and see what it says so fail to compile parsing error adjacent jsx elements must be wrapped in an enclosing tag did you want a jsx fragment well yes because there is a rule with react that you need to have an enclosing parent tag over over your elements and in many cases that can be a div or it could be a react fragment so i'm going to go react dot fragment close it out and i need to wrap what i typed earlier with that with the react fragment tag so notice how i place it within it and then i'm going to save it again and now when i go back to my application you'll see we have header component hello world and footer component expected based on the way we typed out the code and how it's sandwiched hello world is sandwiched between header and footer but what we're really shooting for is what is between header and footer shifting as we click links but i think that we can represent that in even in an even simpler way so going back to the applications that i showed you earlier let's look at this one remy gets a smartphone let's take a look at the url up here if i go ahead and i go to the home component notice how home shifts also the content shifts as i go into artwork notice how the content in the middle shifts notice how the url shifts we need a way to indicate what view is being shown and have that be within the url in the browser that will be the way that we can control the flow of our single page application and for that we need to install some add-ons to the create react app to do it and to do that we're going to be installing something called react router dom so let's begin uh that journey so in order to do it first we're going to have to think about what we want to switch it between uh let's see we have about in home on mine so let's go ahead and think about with this application we're building out right now how we want to have an about component and then we also want to have a home component you could have as many components as you want a formality a convention if you will is to give it a capital letter at the beginning if you're going to be talking about a component but um let's keep it let's keep it on on track so with the home component i'm going to go ahead and do import react from react and i'm going to declare it as a functional component so i'm going to do function home in here i'm going to return a div again just in the interest of keeping this as simple as i possibly can and this is going to say home all right and we're going to go default export export home okay oh export default home am i bad okay so now that we have that in place let's go ahead and use this also as the template for creating stuff in the about us component so i'm going to go ahead and paste in a copy of the code i had created earlier going back again copy it and i'm going to go to about paste it and i'm going to name this about i'm going to go ahead and change what's in the div to about and then i'm going to export the name of this component which is about in this case so now that this is all done let's go to the main component and import these in we're going to need to work with them so import about from dot dot slash going out of the file we're currently in and looking within the directory for about component and then import home from dot home component and now what i'll do just to show you guys uh that this is working and it is good to test out your work as you go not do everything full blast like hammer out a bunch of code and then load it up and and hope that everything works maybe you're just a sav on and it does work but i think it's good to go in baby steps because chances are sometimes there are errors and you know we all make mistakes so let's go ahead and render these two components just on top of each other so about slash okay and then i'm going to do home slash so we have this mishmash of components on top of each other we're going to save it and we're going to go back to our browser and we're going to look at that application and you'll see we have header component about home and footer component so we're now going to shift this so we're only going to have about our home in between header or footer and we need to install an additional add-on to create react app and that add-on is react root dom so how are we going to do it we're going to use the terminal we're going to go to this terminal window here and making sure that we're in our file directory demo in this case i'm going to do yarn add react router dom boom all right so you'll see that the package manager goes ahead and pulls those from the web into our project you may get a few warnings you're going to want to read those and then sort through those that you know you're in your own time to optimize your application and make sure everything is functioning well before you deploy live but there we go it's fully loaded now let's go ahead and take a look at what that means now so in my um kovies stuff here on the left i'm going to look at the package.json which shows me what kinds of dependencies are needed to run my application you'll see that we now have react router dom here which we just installed create reap app installs all this stuff now if you were to go from scratch you would need to go ahead and by hand hand pick cherry pick these things and put them in a file directory and structure to launch your application so create react app is a scaffolding to create an application quickly and to kind of remove you from the groundwork which you know is important to know about but sometimes you just want to get your project moving quickly and for many of us you know our motivation may be to deploy something creative and getting bogged down in file structure may be just a hindrance aside from what we want to do so it really makes things easier so we have react router dom installed and now i'm going to show you some of the files so all these files will be in the node modules and i'm going to go ahead and scroll down to react router dom scrolling down all the way down to the bottom so react root or dom and here we are reactor dom so as i open it up i'm going to show you some of the modules in here we have hash router we have link js we have some other things like match path these are all files that we have pulled into our project by way of the package manager that will allow us to create what are called routes to display the different views so why i wanted to show you this is because we are going to be pulling these some of these files specifically into some of our code to do things so going back to the main component in the main component we're going to go ahead and we are going to import now switch route redirect and with router all files that exist within that directory i showed you earlier now notice how we're putting these within curly brackets now the reason is is because within react root or dom there are multiple modules you can pull from there isn't a default okay there isn't just one so we have to describe and be specific that about what we want so we have to pull it in within these curly brackets so from here now we're going to start doing some pretty interesting stuff so i'm going to go ahead and take well i'll leave it there for the moment we're going to first use root so we're going to go ahead and create a few roots okay and i'm going to make this a clef self closing tag and we're going to say in here there is going to be a parameter we're going to say path and here we get to declare what path we want this to be called in our url we're going to say we want it to be slash home as a string and what component do we want that path to lead to um again the attribute is called component we want it to go to our home component okay notice how i put it in squiggly brackets the reason being is we want that to be the implementation of javascript there rather than the react specific language called jsx which we are actually formatting here but again i don't want to bog you down too much with details let's get to the meat of just creating so then we're going to go ahead and create another root i'm going to be path we're going to call this one about and component and we're going to call this one about well now call it i mean we've got to call it all right so we have two roots set up now what do we want to do we want to be able to switch between those two roots so we have imported in switch so we're going to go ahead and use the switch and i'm going to put these in between it okay at this point we can go ahead and we can take away this uh header well the about and home that we had earlier and let's just reformat this to kind of be on task with our objective here which is to have the header and footer stay the same but the stuff in the middle switch up and for the url address to address and reflect in text that switch so we have that there and now what we need to do is in here we need to do a with router so it's exporting the main component with router attached to it and we're going to save it up and we will have an error now but let's go ahead and take a look should be saving up there is and there you go so now it's telling us that we're missing something and from experience i already know what we're missing but i just wanted to show you that there is more to this that we need to add for the router to work so if i now go into app.js what i'll need to do is from here because this is a apparent in the hierarchy of components we need to put something that wraps over everything else in our app and what we'll need for that is we're going to have to import browser router from uh we're going to react reader dom react router dom all right nice notice how we wrapped in squigglies because we have to be specific there's many modules in the react router dom we want that one all right there is no default now in here we're going to wrap the main component with this so browser router close it and i'm going to put the main component within it and i'm going to save it up and we have header and footer but nothing in between so why well let me show you something if i go into the url now and i type in home you'll notice that home appears right let's go ahead and change this end url here about and it changes to about that's really cool but as an application loads we may want it to go to a default location and we're going to go ahead and set that up right now so back in the main component now we're going to go ahead and under our routes we're going to do a default redirect to playbiz2 slash home so whenever someone goes to just that default location make this a self-closing tag there's no no harm in having both tags but it really just keeps your code a little cleaner to have just one part of that with the self-closing and save it a user going to our application is going to need to be redirected to a location a lot of times i mean perhaps you can come up with some other clever ways of controlling that flow but i've shown you how it automatically redirects now to home so if we go 3000 like that it'll redirect me to home so that's pretty cool we have the beginnings of our single page application but let's get a little more complex with this and let's say on each of those components i want to start thinking about linking things because from my examples that i showed you earlier um there are links you know like to do things you're going to need to link to different parts of your application from views or or pages and we want to know how to do that for example i click on a picture and it links me to another sub view um the way i did this is a little more complex than i'm showing you right now but the basics are ingrained in the method that i'm showing with that middle section switching out and the url reflecting some different information here in relation to what you're seeing so let's go ahead and implement some stuff like that just to demonstrate that concept so within the components that we have um home and about let's first go to home and what we are going to do is we are going to import link from react router dom and under here we're just going to go ahead and we're going to use the link component again i'm going to have this as a self-closing tag and we want to link this to for example about okay and make sure that you do the two as describing the path effectively um now we will need to wrap this in js uh in a parent tag so i'm going to go ahead and use a react fragment react fragment capital f put this stuff in between it all right and in a very similar way i'll just go ahead and use this in a very similar way in about i want to have a link to home and and i want to be able to click it now what i'm realizing now with the self-closing tag is i actually want some text to actually say hey you know click this stuff to go somewhere because as is you know there isn't going to be anything you know really explicitly telling the user to click on it so i'll take away the self-closing tag and i'm going to go ahead and create another link but close out here like that and i'm going to say click here for home now i do have an error there like so all right so there you go and i end i'm going to go ahead and wrap this in a react fragment and i'm going to go ahead and place this within it i'm going to save it up and because i just realized that a little bit late i do need to do that over here too you know i need the user to see some text about what's happening so i'll have to create um just the typical tag close out like this with a description of where this will go click here for about awesome i'm going to save this up so right now this file too also needs link to be imported because i will get an error if i don't import and say what the link component is so i'm going to go ahead and import link from react root or dom and i'm going to save it up so now when i go to my application and look at it you'll see that i have links and i click it it goes to home you'll notice the middle content changes i clicked about it goes to about the link redirects me to the view i want to see and that is what i wanted to show you is how create react app can get you started with creating a single application page application quickly and how by using the add-on react router dom you can include links which ultimately will allow you to deploy a static website quickly and there are many ways you can build an application and and perhaps react won't be your tool but i do hope that you found some value in in just seeing if it was for your first time or perhaps seeing it again and hearing it from someone with a different way of articulating it what a single page application is and and how we can basically shift between the views so good luck making your applications i wish you all the best and i really hope that you create a lot of interesting work and find a lot of success with your development work

Channel: Kit Fuderich

Views: 4,412

Rating: 4.9252338 out of 5

Keywords: React, React Router, Single Page Applications, How To, Node JS, Yarn, Create React App, App development, javascript, css, html, programming

Id: p9r6DF8SJQs

Length: 36min 44sec (2204 seconds)

Published: Fri Jul 24 2020