React Fundamentals - Full Course for Beginners

hi my name is that and I will be your instructor for this reaction fundamentals course in this series we will be creating a simple gocbar single page application which will allow us to search and investigate through popular TV series we will cover such topics as gsx components in containers state props conditional rendering react router and much much more what you'll need is some knowledge of JavaScript HTML and CSS the course will contain some es6 and es7 syntax but don't worry I'll explain everything along the way I will not be assuming that you know anything about react so which and every line of code will be explained with great detail in this course you will not only learn how to write react code but you'll also find out how to maintain and organize your code base to keep your code as clean and readable as possible so pick up your IDE and try to code this out from scratch along with me in this Reax fundamentals course we will be using an official yak boilerplate created by Facebook's team you also need to install no GS on your local machine I already have it so I'll skip the installation part but you can download it on no GS dot org let's go back to the github page and first of all what you need to do is you need to npm install create react app with the global flag and this will take a few seconds now that we have it installed you can go back to your create react app github page scroll down a little bit and here you can see the quick overview I don't need to use this npx so I'll just copy create react app paste it in and the first argument is the folder name I can actually show you if I remove the folder name if I press ENTER it will say that I need to specify the project directory for example create react app my rack tab and I'll do just that and I'll name my app TV series app so this will probably take a while I'm in order to you now that our app has successfully been created I'll change directories queue the TV series app and I'll type in MPM start press ENTER and this should spin up the development server if you're speeding it up for the first time it'll probably take a while and congratulations on setting up your react environment what you're seeing right now is the boilerplate that creat react app provides us let's open up the code editor and see what's inside I will be using atom but any other IDE will work just fine you go for your app lives inside the SRC folder so we will be spending the majority of our time here the main file is syntax yes so let's open that up and here we can find find five imports let's talk about each and every one of them the first one is the react library itself without it you wouldn't be able to create react elements the second import is react Dom which initially was part of react library but was split into its own eventually it works as glue between react elements and the Dom and usually you will just use it to render your app as we're doing here the third import is an index dot CSS file so nothing too interesting going on here just a simple CSS file fourth import is the app component which we're currently rendering you can open that up don't worry if you don't understand what's going on here eventually you will after a couple of lessons and the last import is a serviceworker which will let the app load faster on subsequent visits in production we won't be looking into it as it's out of the scope of this course but I will provide a link below and you can read about it if you like so let's talk about react Dom render method it can take up to three arguments the first one is the react element that we want to render the second one is the Dom container in which we want to render our react element and the third one is an optional argument you can provide a callback function to it we won't be doing that but there you can store whatever logic you want and if you're wondering where this root element lives it's under the public folder index dot HTML file I've already changed the title to tv-series app you can do that if you like and here you can find the root element I mean the development with the ID of root so let's close index.html and let's try to create our own react element and render it to the Dom so I'll create a variable with a name of quitting and I'll assign create element to it and also this method takes up three arguments the first one is the tag that we want to use I will be using an h1 tag oops the second argument is the props that you want to provide to your element don't worry if you don't know what props mean you will find out in later lessons but for now I'll only provide an empty object and I will work just fine and the third argument is the string that we want to use inside our h1 tags and I'll just say hello world take the greeting variable pass it into the render method save index loggias and now we're seeing our newly created react element with hello world greeting attached inside ab dodge es we're seeing a different kind of syntax this bit of code also creates a react element but it's using a syntax extension to JavaScript which is called gsx as you can probably tell this looks a lot cleaner and readable so let's refactor our newly created react element to use gsx syntax wise is really similar to plain JavaScript so just open up h1 tags and type in hello world save it and the result on our page hasn't changed one bit under the hood create react app is transpiling JSX element to react elements with the help of transpiler called Babel if you're interested how the transpiling works I will provide a link below and you can read more about it if you like gsx also fully supports JavaScript so you can embed expressions inside of it let's create a simple function which will just return the current date inside of it create a data object and let's just return the current date okay so we can refer to this function inside our greeting variable GSX uses a special kind of syntax which let the gsx parser know that it needs to interpret JavaScript expressions instead of a string and let's just type in current date and use this special syntax which is just the curly braces and let's refer to the function here save it and our page is now rendering the current date awesome also if you're interested this is just known as an arrow function so essentially it's identical to this kind of syntax again the end result hasn't changed at all through graduations on using JSX the first time we already have an example component created for us by create react app let's render it back inside index dodgy as file we can delete the code that we've written in the previous lessons we will be using it anymore and let's refer to the app component inside our render method now if you're wondering why we're using different kind of syntax which looks more similar just to regular HTML that's because we are rendering a fully functional react component instead of just a simple variable with some gsx assigned to save index dot J's file go back to your page check if everything is working correctly and it is so let's open up back the GS file and we can see that we have a class created with the name of app which is extending class component provided for us by react and inside this class we have just one render method which is returning the JSX that will render inside our page so nothing too much difficult is happening here and we can easily make the changes to fit our needs first of all let's delete the image and we can also remove the import here save it go back to our page and the image was successfully removed but we have a big gap under the title so open up app dot CSS and find app header class and change the height instead of 150 pixels change it to 60 pixels save it this looks much better okay let's change our title to TV series list and instead of this intro text we will be creating our own first component so let's create a variable with the name of intro and assign the arrow function to it which for now we'll just only return this copied GSX here so be sure to add one argument with the name of props which is sure for properties and the upcoming lesson you will understand what that is and change the text to our first functional component and referred here see if AB dodgy yes and we have created our first functional component so both intro and app are identical from Reax point of view although app has additional features since it's extending the component class provided by react we will discuss those additional features in the upcoming lessons functional components are called functional because there are literally just JavaScript functions which return a react element in our case we're just returning simple GSX it's really important to have your own custom component capitalized since that's the syntax convention that GSX uses lowercase names will refer to building components so it will be just considered as simple HTML tags and capitalized names will refer to your custom components now that we have written our own ya component we can make AB GS a bit cleaner and create a separate file for the intro component under the SRC folder create a folder with the name of components inside the components folder create a folder with the name of intro and inside the intro folder create a file with the name of index GS let's copy our intro component from a blog yes pass it back here and remember to import react library since we're creating react elements inside this file all that we need to do is export the intro component and we're good to go by the way if you are wondering why we're using a sort of different syntax here this is just known as a shorthand syntax for arrow functions so what goes after the parenthesis is returned from this arrow function and also one good thing to know is that if you're passing only one argument into your arrow function you can delete the additional parentheses here save it go back to AB dodges and let's import intro from components intro save Apogee yes and nothing has changed on our page but what happens if we want to use a different message inside intro component ideally we want to reuse this component but right now it will always return just the same message that's where properties get in think of them just as function arguments to your components so inside index IGS we have one argument passing in into the intro component and here we can use those custom properties with the help of the props object so props is just a simple JavaScript object with all of your custom properties combined inside that Abdi yes let's create a custom property to our intro component with the name of message and here we will add a string which will say here you can find and find all of your most loved series say vApp dodgy yes and inside the intro component let's delete this string and just access the message property inside our props object save and as you can see we are rendering our intro component with custom property by the way you can pass anything you'd like so not only a string works you can pass in a boolean a number array or even functions it's time to start adding additional functionality to our app component components that extend react component class have additional features and one of them is state what is state think of it just as plain JavaScript object to which your component reacts and renders whatever is needed let's create our state object and add a property to it with the name of series and for now this will only be just an empty alright we can access the series array inside the render function by simply getting it from our state object just to be sure that everything is working fine let's print out the length of syriza right to our page this state dot series length save app dodges and the length of our series array is rendering to the page which is zero and that is correct so just to keep our project a bit more organized we already have components folder created so let's add another folder to it with the name of app and move everything that is connected to the app component to this folder so app dot CSS AB dot G s and AB dot test IDs since we moved it to a different folder we need to change the directory for our app component so just like that also we need to change the name of our app component since we already have a folder name for it so just to make it easier I'll just rename it to index GS that way we can import it just like our intro component and we don't need to specify the additional JavaScript file okay so everything is done inside our app folder so what's left is just to change the import inside index digest so since we move this two components folder let's add components save index yes and we have the same page rendering once again we are class components have accessed the so called lifecycle hooks Michigan want your code when a particular component mounts and mounts receive new props and many other situations let's take a look into a method called component dead mount it'll be immediately involved after the component has been rendered what do we do inside this method is completely up to us but for now let's create an additional rate with New York series which will hold only two elements for now and the first one will be nice a Vikings the second one will be Game of Thrones let's use a set timeout function which will take two arguments the first one is just a function and the second one is the light after which your function will be invoked inside the function let's use sets state method which will take an object as its first argument so what sets state does it tells react that this component and its children need to be rendered with the updated state so let's take the series property of our state object and assign to it our newly created series right save index IGS go back to your page and the length of the series changed after two seconds let's go back to index the GS and I want to show you a trick so inside your object if you're using the same names of your property you can actually delete this bit of code and this will just take the series property and assign our newly created series array to it so save index da GS go back to your page refresh it and the link of the series should be two after two seconds you in order to send a request to the server first of all when you install a library which will let us do it there were a lot of options out there what I personally love to use fesh we can install fetch with no package manager I'll just copy this bit of code and pass it into the common line press ENTER ok after installing fetch let's open up our app again by typing in NPM start ok so we have our app running back again so let's go to the code editor and open up index dot J's file inside our app component and let's import fetch let's just sign up the request to the API whenever our app component renders obviously we want to do that inside component Adnan method let's get rid of this bit of code and type in fetch which will take a URL as its first argument we will be using a service call to be Mae's API which will let us obtain different kind of information for various TV series while here I'm just searching for TV series with the name of Vikings and fetch returns a promise so obviously we need to resolve it and in order to do that we'll need to chain in that method which takes up a function as its first argument and inside this function we will have access to the response object so for now let's just console.log the response object and go back to our page open the console and here we can see that we're getting back the response object what we need to do right now is parse the result and get the JSON from this object it's really easy to do so what we need to type in this response JSON and this will just return the JSON from the response object obviously so what's great about promises is that we can chain that methods and what we are returning from this line will get back here so we'll get back the JSON and let's for me now also just console login okay save it and we're getting back ten items and let's take a look into few of them so the show ID the URL and the name of the series and we have a lot more going on inside the show object so what we can do inside this method is that we can actually set the state of our app so let's use this sad state and let's add in our series to the series property of our state saving the XDS go back to the page and we're getting back the length of series all right then okay that's exactly what we wanted and just to be sure let's refresh it one more time and yes we're getting back the response from the API right now we launch an API request every time our app component renders but if you think about it this is the app component really need to know about the TV series array or one on how the call will be launched the answer is definitely not we want to keep our app as modular and as simple as possible that means creating separate components when it's logical to do so in react there is a common pattern use known as presentational components and container components the idea is very simple inside your presentational components you will be concentrating on how things look you wouldn't specify how the data is loaded or manipulated and inside containers you would have all of your functionality that means how things would work how data is fetched and manipulated most of the time containers will be stateful that means they will use state to serve data to our presentational components okay so let's create a containers folder under the SRC folder inside the containers folder let's also add another folder with the name of series and inside the series folder let's add an index ES File import react component from react create a class with the name of series which extends component let's render for now only add F let's type in series container export default series okay inside our app component let's import series from dinner series and let's render it under our the length of a write message save indexes go back to the page and we're rendering the series container okay so what we need to do right now is we actually need to copy this code and let's space it into the series component and we also need to get this message let's also paste it inside our div here let's save the series file then the component file and let's go back to our page once again and nothing has changed so we're seeing exactly the same result as we had at the start of the lesson but now we have divided the logic between separate components in the next lesson we will introduce a serious list presentational component which will list our series inside an unordered list now that we have our series we return from the API call it's time for us to create the series list component which will run through the TV series so other the components folder create a series list folder inside that folder let's add index.js file import import react from react for now let's just create a functional component which will return just the dev side that they have let's type in series list component let's expects port default it and that way we can import it inside our series container ok now that we have that let's render it under the message of our series story length and I'll add in the list property to the component we'll get this list properly inside our props so I'll just pass in this state series here save index dodge yes go back to the page see if everything is rendering accordingly and it is so let's go back to the series list component and we can delete this message let's add an unordered list inside that list now that we have our less property let's type and props list and we'll use a map function inside that function let's get the series and less return a list item and inside that left side and what we want to do is show the name of our series to save that go back to your page and we're getting every single show name from our series all right good so we want of course to look a little bit better we don't want these dots around flowing it out here so what we can do is add class name and let's type in series list inside the series list folder we can create a index that CSS file and let's type in series list and less style type none now that we have that we of course also need to import it here so import index dot CSS save that we're not seeing the dots floating around on the left side also I don't like the padding on the left so I'll just remove that as well now this looks centered awesome one thing that's left you talk about yes we're actually getting this warning from yak so it says that each child in the way or iterator should have a unique key prop so what we need to do is on our list item we need to add a property with the name of key and let's type and series shell ID just to make it a little bit cleaner okay save that open up the console and we're not seeing the warning anymore so what we did is we add a key to our last item so keys help react identify which items have changed or have been added or removed so the best way to pick a key is to use a string that uniquely identifies a list item a monic siblings most often you will have an ID for that to use your data as key but when you don't have a stable ID for your render items you may want to use an index as a key just as the last resort just know that it's not recommended and you should always try to use an ID that's unique for your list item it is possible to create additional components inside a component which will not be available outside of it this makes your code a little bit more readable and little bit more semantic and it's just a good practice to use so let's create a new variable with the name of series last item will of course pass props to it and let's return whatever we have inside our series list unordered list item and right here we can return series list item let's pass series to it by the way we can also destructor eyes our props variable inside our series list item so we can just open up parentheses and type in series this will just take all of the properties whichever you want from your props object so I'll save index GS go back to our page and let's really nothing has changed so for now it may seem redundant that we're creating just a new component for a list item but later on in upcoming lessons we will be adding a little bit more information to it and then it'll be just a lot cleaner and simpler to understand in a previous lesson we were the factoring series last component what they forgot to do is add the key property to the newly created component let's go back to our code editor and copy the key property from the list item and paste it into the series list item component 7th access and the error is gone let's open up containers series index GS and right now we're only fetching series with the name of Vikings but of course we want to make this process a little bit more dynamic under the length of series or a message I'll open up a div and inside of it I'll create an input with the type of text and I'll also assign an unchanged handler to it so what this handler does is that whenever our input value changes it will fire an event to whatever method we assign to it I'll create a method inside the component with the name of on series input change we will be getting an event object from the unchanged handler and I'll cancel that log the event object and I'll also cancel a log the value of our input let's take our series input change and assign it to our input save index as yes and let's type in something so I'll type in game of thrones and I'm getting the value of our input and I'm also getting the event object what we can do with that is we can actually copy the code from component in mouth and let's face it end here they all series input change essentially what we want to do is make this part dynamic we can do that with the help of string interpolation inside JavaScript it's used with a very interesting symbol called grave accent it looks like this and I agree the naming is a little bit weird we need to wrap our URL inside these symbols and let's stake out the Vikings the hard-coded serious name and what you want to do later is type in a dollar sign open up curly braces and let's copy the value of our input and paste it to the fat URL save index that yes we're not getting anything from our series away and that is because we move the component amount method so if I type anything into the input let's say I'll type in the same Vikings we're getting the same length of our array and we're getting the series dynamically it's time to add some conditional rendering to the page we only want a lawyer spinning up under the input whenever I type in something and we also want a friendly message which will say that no TV series have been found if the API does not give back any results with the given value of the input let's open up series container and you need to add few more properties to the state the first one will be series name I'll just assign an empty string to it and it will just help keep track of whatever we have inside the input because currently we're not doing that and I'll also and it's fetching property and I'll set it to false and this will help us know whenever we're fetching something from the API let's get all of these properties inside the render method I'll just get those from this state and the first thing that I want to do is I want to set the value of our input to the series name so right now it will only be an empty string I'll also make it look a bit better let's save in the X yes go back to the page and now whenever I type something into the input it will show the results but it shouldn't show anything inside the input and that is because I'm not actually setting the value and we need to do that inside the on series input change method let's step in this set state and I'll set the state of series name to the target value and I'll also make the fetching true and of course after the actual fetching is done let's set is fetching - Falls now that we have all of our state management done we can actually go to the page and check if everything is working fine and let's go back to the render method and we can now actually at the conditional rendering to the render method first of all let's remove the length of syriza right message we don't need that anymore and just under the second if open up curly braces and here I want to check if the series length is zero then we will know that no series have been returned from the API and if the series name string of also trim it is equal to an empty string now we know that nothing has been typed in and the series all right is equal to zero so we don't have anything to show to the user so then we can type please enter series name into the input and let's open the second curly braces and whenever the series length is also equal to zero but we actually typed something in into the input then we know that nothing has been fetched from the API and we can tell that no TV series have been found with this name let's save index that yes go back to the page now let's double check to see if everything is working correctly so we're seeing the message right now and if I type something into it the message is gone and stipe some gibberish and we're getting that no TV series have been found with this name good okay so last thing that I want to do is I want to check whether we're fetching something from the API so let's open up the curly braces again and I'll type in if it's fetching it's true then for now let's just show loading message and if fetching is false I'll just show the series list again save and exit yes go back to the page and we should get the loading message whenever we type something into it and yeah we're actually getting it it's just fairly hard to see because the response from the API is fairly quick in the previous lesson we left a little bug whenever I type something into you the input even though I'm still waiting for response from the API I'm already getting the message that no TV series have been found and that is because we didn't specify that we actually shouldn't be fetching whenever we want to show this message and the same goes for the message above save index IGS and we're not getting that mob anymore the last thing that I want to show you is how to add an image with react so I'll create a folder with the name of loader inside of it I'll just add index GS important react create the loader component export it and I already have a loader gift inside my assets folder you can use whatever loader icon you'd like it doesn't really matter so what you need to do is you need to get the source of the loader and I'll just name it loader SRC from assets lower gif so essentially you are just importing the source and what I want to do here is create an image and I'll add in the SRC like this and we also want to provide an alternative property because react will give up warnings if you don't do that I'll just type in loader icon save your newly created go back to the serious container let's import it from loader whenever we're loading we're not showing that old message anymore we want to show the loader component saving the excess go back to the page and we're actually seeing the loader popping up inside our page I also want to do it make it a little bit smaller because right now it's really big and I want to show you how you might want to do that on an element level maybe you don't want to create a new style sheet for that yeah it gives you an ability to add styles to an element and you want to provide an object to it I'll say a width will be 75 pixels and I'll save the lower component go back to my page and the loader icon is looking a lot better we a crowd or is the sound of growling library for react I've opened up the NPM page for react router and here we have a short explanation how we need to install this library into our app so it's saying that if we're writing an application that will run in the browser you should install instead we are our Dom so let's do that open up your comment line and let's type in NPM install course we want to save it react rather down now that we have a crowd or Dom installed on our application open up indexes IDs and import browser rather from react valeriy DOM and we need to wrap around our app component inside this component and this will keep track of your UI in sync with the URL save index - yes and let's open our containers series index and what I want to do next is copy the entry code I'll just the latest from our app component and paste it into the series component just above the endpoint of course don't forget to import intro from intro save series container close it and we don't need the intro anymore here as well see that we're seeing the same result but we just made our app component a little bit cleaner and move the info component into the series container okay the next step is to create an additional component we'll call it main and here we'll have all of our routes so I need to import react from react I also need to import the switch component and also the route component from react rather down then I'll create the main component passive props and I'll return the switch and inside that switch for now I'll have only one route exact path and the component will be series let's export main component and of course they also need to import the series container from wow series container ok save index legend yes and inside our app component let's delete the series container so we won't be actually rendering it inside the app component but it will render the main component from main okay and I'll copy and paste it here save the app component go back to the page and nothing has changed but right now we're actually using reactor algorithm to render our series container and in the next lesson we'll add an additional page and then you'll see how we can render different pages with yeah crowd rhythm once show multiple pages on our application but right now we only have one container so I need to create another one I'll call it single series this container will shell a series with a little bit more information that what we have on our series container and for that I'll need react and this will be a class components I'll need component class single series and extends component render turn death and I'll just type in single series inside the paragraph and export defaulted great go back to you the main component and import single series from containers single series and we want to add an additional route the path will be series and an ID this idea will represent the idea of the series that we want to show and of course it will be dynamic we will be getting it from the series container and I also need to add in the component to the route and there will be single series save index that yes let's try and go to our newly created container so I need to write series so let's say one two three we're getting back the single series message that we just created it would be nice of course to get this ID and we can try and look inside the props see that open up the console and what I'm looking for is the match property and inside the match property we have another object and this fell params and here we have the ID that we want to show so I can actually just type in the show ID will be this props and if I recall correctly match params ID match Rams ID save that we don't need this anymore and we're getting back the ID from our URL whenever I type something in into you our input getting back the results that I want but I want the results to be linkable and I just show up as a simple shrink and for that we need to open up series last component we need to import link from react rather Dom and we need to add the link into the series list item and as the name implies this component that works just as a simple link and I want to link it to series series show ID I'm just making the link dynamic and it will always show the correct ID and link to the correct show with the idea Tash of the show so save that go back to the page and I'll type in same series Vikings and click on that and I'm getting the single serious result with the ID that I want with the help of that ID I can go back to the single series container and we will be fetching the series from the API with the ID and since we will be fetching something I want to have the loader and I want to create state for the single series add one property to it it will be show and I want to fetch the show from the API I'll just copy the fetch from single or sorry from the series container and I want to fetch it to different URL of course because I will be getting only a single TV show and this is the dynamic part so this is the ID that I want to use from route I can get it back from the props I'll create an additional variable ID and all the structure eyes the match params object get the ID back and paste it into the URL of course I also want to change the sad state method because I don't have series or fetching properties anymore I want to have it set state to show to be JSON and now whatever our component mounts we will be getting back the shell to our container so the first thing I want to do inside the render method I want to get the shell from the state and whenever the show is equal to null I want to be showing the loader and whenever the show is not null for now I'll just show a message that show has been loaded add it into paragraph tags and I'll also constantly log the show for now just to see what it has it says that the show has been loaded and I'm actually getting back the object from the API I'll reload it one more time so they can see the lawyer popping up yeah it's they're just not showing for a more lengthy amount of time okay so now that we have the show object we can start and showing the information that we want into the page so I will be showing the show name then I also want to show the premiere and that will be inside shell premièred then I want to show the rating I'll be showing the rating average then episodes and that is a little bit more difficult one it's living inside the embedded property so hard to copy show embedded episodes lengths so I'm just showing the length of their right and that will be the count of the episodes and lastly I want to show the image alternative will be show and the source for that will be show image and I think that I want to get the medium sized one medium save that go back to the page and we're getting back the info that we want and just to be sure that it works okay let's go back to the main page and type in Game of Thrones which is also an awesome series so click that and we're getting back the results that we want we can close the console and if we are thinking that you can create an additional component for this HTML you're probably right but I won't be doing that and I encourage you to try it yourself this is the last lesson and I hope that you really like the series and I'm waiting for your feedback and please tell me if something was wrong and if you love the series just leave a good rating thanks and good luck working with react

Channel: freeCodeCamp.org

Views: 88,906

Rating: 4.9324236 out of 5

Keywords: react, react tutorial, react course, react course 2018, javascript, react tutorial for beginners, react framework, react js tutorial, react.js, reactjs tutorial, reactjs, react js tutorial for beginners, jsx, react components, react js, reactjs tutorial for beginners, react js introduction, react.js tutorial, react js beginner, reactjs course

Id: 6Ied4aZxUzc

Length: 63min 47sec (3827 seconds)

Published: Thu May 24 2018