ReactJS Tutorial for Beginners using React Functional Components | Learn React JS | React JS Basics

hello guys welcome back this is amir and in this video tutorial you will learn the basics of react.js like how to create a djs project how to create different components and how the components communicate with each other and how the components uh are made to act like uh your website pages and so on so let's get started so for the ref.js development i use visual studio code as a code editor and i have opened the terminal of your studio code as well and i am at the empty react.js tutorial folder so to create a js project the command is npx create react app and then you will name it like my app and this one will take around one to two minutes so i will pause the video here and once it's done i will come back okay so command is completed now so it has created a ref.js project for us my app and it has also installed all of the dependencies as the node modules and i created a few other folders and files and in the public folder the main file is the index.html that will be the only in html file for our website and in this index.html there is the one div with id of root that will be the only div the element in the under.html file in which all of our components we will create and react yes we'll insert will be inserted in this div so we will see how that will work and this is the great ignore to ignore the files for the repositories and the particular json it contains all of the dependencies uh required for the our project like react rectum scripts and it also contains the scripts to start the local server to build it and test it and here is the readme it shows how to start the local server and test it what are the commands and few other documentation in the source folder and the entry point will be index.js and in the industry.js we have a package react dom that is also from the direct and it has a functional render that accepts two parameters first parameter is what to render and second parameter is where to render and for this one uh where we want to render it we will get the element with id root so that is the div we declared in index.html and what to render uh we can write it we could write anything here like any string any javascript any component so suppose we want to render the hello world as a string so for that we will write a string saying suppose hello world and just save it and to run let's open the terminal we will cd to my app and then npm start so it will actually start the local server so here you go it has printed the hello board and i started the local server so let me shrink this one and check this one too so that we can see the code as well as our website and here we have us to print the hello world so let's try to add explanation mark and save it and when it's reload it shows the updated string and we can pass anything here that is from javascript so suppose we create a variable we can say that message is equal to suppose and h1 tag and we say is hello world from h1 tag and here instead of the string we will pass the message and save it refresh here you go hello world from h1 type so if you inspect it and see the elements sorry here you go so there there is a div of id root and in that it will be the h1 what we have declared here right and saying hello word from h1 tag and we can add any type of component we will create you know fjs and we will pass it here and it will render so to create the components there are two type uh we can get components based on classes and based on functional components so the class based components are a little old those are not used too much nowadays so let's create a functional component so for that we will create a function name suppose uh message and in the function we will return something let's return the same h1 tag copy from got from here and put it here let's add some donation and remove this one and here instead of the message uh we will add this message component so to add a message component i will the syntaxes is we will start from the angle bracket and write the name of the component and then the closed angle bracket this is sort of the xml version in the indirect case it is called the gsx so javascript and xml how much save it and refresh it here so still it is saying hello world from h1 tag so let's remove this save it refresh as you go and if you [Music] open that the html it shows it is again an h1 same hello world in the default root so this was here in the industrial html okay so let's uh create a few other components uh let's add one another suppose p tag and say react js tutorial right save it so it gives us as an error that is because we can return only a single element so for that we will uh what we will do we will wrap it in empty fragment and right now what we are doing is we are returning a single empty uh fragment and in that there is uh there could be multiple elements save it refresh there you go the hello world refresh it and hello our webcast tutorial so in the body the div then h1 and then the p type so what we we are returning here it will be appended in the root div okay so let me close it here this one okay so also we can instead of writing this p tag here we can create a separate component and like function uh let's call it tutorial message and we will return the p tag from here and instead of the p tag we will write it is the tutorial this one refresh it there you go and also if this message this component want to communicate through this one suppose uh instead of the react.js tutorial uh what we want to do is we want to pass a parameter here and that parameter should be displayed here so suppose we will pass a message here and it it should be displayed here here instead of a hard code message so for for that we will had the props so the concept of props is similar to uh what we have uh in the text in the html we have the attributes like id attribute the mess the class attribute so similar concept in the jsx so we will pass it a message and the message will be and here it will get all the params or we can call it props that is a more uh good way because these are actually the props and in the props it will contains all of the props we can pass more than one props here so it will contain a list object that will contain all of the props passed into to that component so like it is it will if we call prop.message it will refer to this one and if we call it suppose uh another message suppose we call it thanks right and this will show the props dot message and actually to uh render anything which is uh a javascript we will append that into a curly braces so if for if if we want to render the simple strings that will be a simple string and if you want to render the variable it will mean the curly braces so we have a curly braces here curly braces here so proper message and then suppose we will render the props dot another message and just save it refresh here you go so it has passed repgis tutorial and then another message as a props and we are rendering the props here and we can also restructure it right away here so instead of getting props dot props dot so we can do is write the curly braces here and we will say message and another message here and it will actually get all the props and destructure them into the message another message the same variable name we have used here so instead of props dot it will be the simple message another message save it refresh same let's change it to thanks for watching save it there you go so now we have created a component tutorial message and we have used it here and we can use it multiple times as well so suppose uh we have tutorial message and here suppose we say the message is hi and another message is suppose there and it will just so hello world then it will show hi there and then yesterday thanks for watching let's save it refresh so here you go okay so so that is the way uh we can compose different components into another component so we have a total message here and we have composed this into a message and and message is composed here and this is the way we can create multiple components in the application and ultimately they will compose compose and compose and make the whole application right so [Music] like they have provided the boilerplate app component so let's instead of the message let's print that app component just save it and just refresh here you go that is the component that they have provided here so the app they have imported app component from dot app file so this is the app file and it contains uh this is a component uh like we have created here the message it does not it contains uh it accepts the parameters but right now it does not accept any parameter right now and what it does is it returns a single element div and then under that it returns a header then there is an image this one and then some text here and then the a tag here this one so the hierarchy of elements so that is a single page website so let's proceed further and add few pages so like a home page and then about page and account and something like that so for that we will be adding some third party libraries so also we will learn how to integrate the third party libraries and for that we will first install the np packages for that so for that we will be installing and npm package or react router tom so it actually give us a way to switch between uh different routes and to render whatever whatever we want to render for a particular route so let's try to get rid of this one the point of work it code okay so let's import the ship router from reporter tom that is a browser router and then there's road and we will be using the switch as well okay so here we will be adding uh all of our roads uh of of of our application so let's get rid of this one as well so let's start from the browser router the first uh as you see we can only return the one one element or one component so we have returned one component here and under that we will be declaring our other components so let's try to add a switch component and under the switch so let's try to configure our route so the first route is uh suppose with the path of so the path is a prop that it accepts so suppose that is about and and here we can return something or we can even say here that it is about so it will render about so if we return here some component it will render that component and that was about and let's add few more routes so we see it users and suppose we call it that's when there is no uh path it is on the root path so let's render the home and then users then about and let's save it just refresh it here you see that we are on the route and it is rendering the home and if we say here about so it is ending about and if it is users understanding the users and as i said earlier that instead of the streams we can render here the components as well so suppose let's add a component here uh in the in the source folder uh let's add suppose about.js and the border yes it will be a function we can call it about and uh what we are returning here is the similar way uh we uh added a few components in in the index yes so we will be supposed to returning each one welcome to react chess tutorial and save it and in the app instead of this about we will be returning this about component so let's let's import sorry we have we have uh to export this as well so export default about so that we can use it outside of this file and about from the path of about okay so about welcome to reactions tutorial what we rendered here right so in a similar manner you can write anything here any component anything and it will ultimately uh will be rendered here in the application so you can consider it as a switch and case uh javascript so so what it does is it will uh match the case if it is at about it will render this one and if it is at this part it will render this and if it it this positive it will end this till now whatever we have developed is just a static content so let's proceed further and add some dynamic content okay so for that let's add a user component and add suppose a button in the user's component and to add a list of users so let's proceed and add a user component users.js and it will be a function called users and let's export default users and in here we will just return our let's return h1 as saying users list for now and here below that we will be printing the list of users okay so in the app let's import users from dot slash users and instead of this user stream let's print out users save it and let's go to the user here you see user list so here let's declare a variable called users list and let's add two users in the list so suppose user1 and user two and user three and here as i told earlier that for rendering the javascript we will add that in the curly braces so for that let's loop over the user list and it will give us let's call it user and we will be returning his let's run h5 and again we are printing the user in curly braces okay so save it here you go user one two three whatever we have here okay so let's add a button here and on click off and button we will add users in this list so add user and on click function so first we will frequent defaults and here we will be pushing a new user here so let's push it a user and his id is math.random something right save it so here you go we have our user button but on click of add user it is doing nothing so let's see what is happening open the console and let's print here uh whether it is calling or not button click save it and you see button click is printing so that means our code is executing and let's add some console here as well rendering so you see it is rendered once and on click of add but user it is just printing this one it is not re-rendering the whole component so because it is not read entering that means user list so it is not getting the latest user list so that is why it is not running it uh the latest user list after uh we have we have pushed a new user so to read under the components so there comes a state so com state of the component so what it does is whenever there is a change in the state it will re-render the component so for that let's use state so it actually takes a parameter of initial state and then it returns an array of two values first value is the current value of the state and the second is the function which we can call to update this state okay so let's call it uh users list and then set users list initial value we can call it any shared users list okay we can use a list so and instead of the push we will be calling this method to update the state so that will be set uses list and that will be whatever we have already in the user list and then appending this one and remove this one all right so save it used it is not defined so let's import it that is actually provided by this is used is actually a hook that is provided by the react you state sorry and from react okay so so we have user one two three uh the initial values then the add user user is added and after user edit it is read entering as well so user added rendering user edit rendering let me close this one so you see user is added again getting heading so this way uh if if we use the state and on every change of the state it will it will re-render that component all right so that is the way uh we can make dynamic changes to the components and suppose uh in the state we can pass we can get get the initial value from even the props as well and uh even we can change the state here we change the state based on the click of the button and we can change the state based on maybe an api call so there are a lot of options or possibilities available and to improve the user interface i have added a series of videos on a well-known ui library and design integration in the red case along with other tutorials regarding references please check that in the channel and i will add a few links in the description below as well all right so that's it uh for the basics of rxjs if you have any questions please let me know in the comments below and see you in the next video thank you for watching

Channel: CodeWithAamir

Views: 184

Rating: 5 out of 5

Keywords: react js, create-react-app, react hooks, react use state, react router, react basics, react beginner guide, react tutorial, react 2021, reactjs tutorial for beginners, functional components, react functional components, react js tutorial, learn react, react course, react tutorial for beginners, react js tutorial for beginners, react tutorials, react usestate, react router dom, install npm package, npm start, reactjs basics, react basic concepts, simple react website

Id: FP34Gs4_cMs

Length: 31min 4sec (1864 seconds)

Published: Thu Apr 22 2021