Learn REACT JS in just 30 MINUTES (2021)

what is up guys this is nas and today we will be learning react.js from the beginnings from the fundamentals all right now before we get started i want to say go ahead and help us out and with the youtube algorithm smash that like like button as many times as you possibly can right and it does not hurt anybody it only makes us happier and it makes you happy because you get to smash that like button okay subscribe of course for more videos like this because of course we work hard to put this out for you but other than that let's go ahead and get this party started react js 101 let's get straight into it so what are we going to learn today we're going to learn a few different things part one what is react js okay talking about how it doesn't work what is it made of and how do we use it we're going to talk about how we use react.js to build fast applic applications with components which is probably the most important part of react.js which is components you'll learn here in a second okay we'll talk about why react.js why it's become such a popular framework library right and why you should learn it of course we will talk about how to build html using something called jsx which is very particular to react gs also we'll talk about how to save data so one of the most important things of course is saving data in your application using something called state again a new topic you might know and we will even build your first yes your first react js project let's get into it real quickly all right so let's go let's get started so what is react.js that is the question pretty simple answer it is a javascript library for building user interfaces using declarative code now what i mean by declarative code let's take a look at what i what i'm talking about here check this out so declarative code declarative code is pretty simple where for example where each line right here each line of code declares what each element of the app is right so what i mean by that for example you can see here there's a header component a card items and card total what this says is that this this header declares what the element is about so this means of course it's a header right if i say card items that means it's card items right if the component name is card total for example right to me it makes sense that's the card total which is probably going to be something around here if i'm going to look at the header that's probably going to be the header component here and this is what it means to have declarative code and react.js is about declaring declarative code to create you beautiful user interfaces just like this as you can see all right all right moving on so okay benefits of learning right gs really simple low learning curve reusable components and performance learn this library should not be that hard of course it takes some time but if you put in the work that's all that matters right usable components of course because right this is what allows us to build humongous applications like facebook for example right let's go like i'm going with useful components which is probably the one the most important parts of reactor yes right it describes what does it do it describes a section of the ui and how it should appear and function it's honestly just as simple as that right so for example we'll talk more a little about components later on but a one reasonable component for example let's say this you see how this right here is like the similar compo similar html as this it just has different data well this my friend is a reusable component you can see here in our case the component here will be like for example header right a card items component right here and a card total component right here and we'll learn just how to build them so who uses react.js well facebook for one uses of course they just fully rebuilt the whole application using react.js all right also tesla the whole tesla application which is really cool this whole test application on your mobile device is fully built with something called react native all right netflix even door whole app is using using back gs and there's so many more apps that are currently being built with react right for yes we have number one in terms of popularity you can see google trends react is very much going up right here angular is right here and the view is kind of there as well but react has very much superseded a lot of different frameworks right in terms of work and so many so many more things beautiful all right moving on stack over story right here right here shows us that react is the second framework the most popular framework out there for developers jquery is right here but you know average jquery has been there for a long time awesome moving on let's go ahead currently with react.js guys there's 54 000 jobs on just indeed right here check this out 54. you can see right here in the screenshot it actually says 54 000 jobs which is insane and it's going to keep increasing as this framework gets more popular all right so how do you build fast application using components again this is the pillar the foundation of how react was made right that's a good question so with components what are components well as we talked about really briefly they're reusable ui elements just kind of how you have a header element or some kind of a section on a piece of you know uh some kind of a section on your website that's a reusable element okay right just kind of like this right this an element could be a usable element okay so just basically all it is is it's javascript functions that accept inputs what do i mean by that give me one second i'll explain that right describes how section of the ui should appear and function is how it describes how a section of the ui should appear and function what do i mean by that let's take a look at it well if you think for example let's say we have this awesome right amazon card this is an amazon card page okay amazon cart page right if you think about this what do you see could be a component right kind of think of a component is like a section of a website well if you think about this this could potentially be a section of a website this right here right right this right here could be potentially a section of a website right here even this could potentially be a section of a website right here or even this for example right or this any block that you see can be a component so if we for example keep going right look at this well first we have the header okay then we might have for example the card items that could be a component itself and then that could be the card total and every single section here in every single section here every single component here is almost thick of it as it's they have it it has its own brain and has its own state right has its own brain its own state and has its own view that's the interesting part about it it has its own view right so that's when we said this is why right it's individual individual ui elements right individual ui elements that's what react.js is used for so for example another component you can use is for example a card item component right here right which can be used you can see here i have this one card item but then i'm using multiple places so that's the really cool part about react is you can simply just have one component and they can be reused in multiple places now in our case let's take a look at how it's actually being coded up so if we have this amazon card right here okay well let's think about this we could have for example a header a card items and a card total right and this maps to what well this maps to a few different things right it maps to header maps to of course this header component card items maps to what to this component and the card total maps to this component right and they're simply there it's only html blocks okay now what might happen is you have you can have components within components so for example this card items component right which is this one right here right it might have for example individual card item component which is this one right here right now of course here don't don't worry about all this stuff this is very confusing it's a loop it's looping through an array and all that's going on is basically it's showing the different components so these components in terms of html are the same it's just that we are passing in different data for example this image right here is different and the title here is different as well right that's what that's what's being different with that now let's do a test run here so check this out let's draw the components for a facebook web app okay so let's take a look at this if we have here okay a facebook web app what could be a component well if we know well one thing we know for example is that this could be a component the header could be in component this is the current facebook web app this could be a component right here right it's again anything you see as a block this could be a component right here as well right what else could be a component well this could be a component right right this could also be a component this could be a component this could be a component right this could and this could be component everything you see that's like a block can basically be it's a component and that's what we said react.js is all about basically what ui elements right right that's what react.js is about all right let's go ahead and move on really quickly what else do we have well so let's go ahead and actually build your first component check check this out all right here's our first component we have well it's pretty simple it's basically we have our components a function right and it's important some react right here and we have a div class name app and we are simply saying an h1 with a hello there it's as simple as that so if we go ahead and take a look at this right what's going to happen here is our react.js application in stack but which is something i highly recommend you check it out stackput's a very easy way for us to create a react just application it's very simple right this is an this is the whole component right here it's called the app component and whatever i change in here let's say for example hello there nazari my name right that's going to directly translate to what we see on the right hand side right it's as simple as that now how does this work well you can see that react what happens is it reacts to something called the react.reactdom.render what that does is we have this render function right and their vendor function takes in the app component which comes in from here right we're importing app from app which is of course right here okay and where we're putting that app html while we're putting that where we are putting that inside the document that given by the root where is it coming from check this out if i go to public in this html look at this div id root so it actually looks at the html and says hey where do i put my html well the my whole rec component well i will put it inside dave id with and so every single html every single react app will have an id root in there just so you know cool so that that is basically our first app application let's go ahead and move on now to build our applications what you've seen is something really interesting right you've seen html but guess what it's actually not html it's actually something called jsx okay jsx so we use jsx to create components it's as simple as that right with that you can see what is jsx well it is basically just javascript xml that's the word for it and you might be confused away here for a second right but it allows us to write html in react.js this right here is jsx it's as simple as that right and it makes it easier for us to write html in react.js because at the end of the day all of this is being written in javascript in a js file not in a html file but in a dot js file right that is the big difference and so we have to use something called jsx to allow us to write that that's why we have here class name and not class is equal to something right that's the big difference so let's take a look what is jsx and then why do we need to use it well check this out right jsx is very very helpful it allows us number one to use javascript calculations that's part one but you can also use variables right and you can also use for example like loops so as an example here we have let's say we have an element see this is an element well this right here my friend is jsx okay this h1 even though it looks like html it's actually jsx and here i can fully do see do expressions called expressions expressions that's the really cool part about 10 plus 10 will actually be will give me 20. right so only in the output this will be 20. now another thing is variable so for example here you know how we have constant element is equal to h1 my name is first name check this out this first name right is actually going to be put in here so if my first name is equal to nas okay it will show nas here right that's the really cool part all right okay let's go ahead and move on next up if we take a look at our for example this specific portion what do we have well we have for example a loop you can see here we can actually loop over a list of elements in directly in jsx and actually return some value so allows us to very easily display you know list elements or values in our application all right so why jsx well look at this right without jsx pretty simple it looks pretty hideous right we have to use something called const e c create element we have to do this and it just becomes very messy with jsx on the other hand look at this it's so beautiful it just feels like it's normal html button right button right and so forth on click this happens and so forth and you can put your text in here right that's a really cool part about it awesome moving on so now you might be thinking okay so we have the html but how do you style this right in jsx in react.js telling you it's pretty simple you can either do inline styling or css using an external css style sheet and there's another one called styled components so you should you can take a look at that as well components right here components all right cool so in inline styling it's pretty simple so for as an example here i can directly in my html specify the color here right specify the color and or for example i can create another javascript object for the style and i can just simply apply it to my element right and we can actually do this in our application so we take a look at our app right here in our app.js hello there let's add a style to this one we'll go ahead for this h1 we'll say for this h1 we'll say style is equal to give a for example uh color red boom you see now this whole html has the color red it's as simple as that right or we can also do for example const stop my style my style is equal to right and here i can specify color red right so i can make it into a variable and then i will put i will go ahead and give it my own right here my home my own my style as a parameter look at that it's so cool and now it's still the style of red right how cool is that is i just simply created a variable i put that variable into a style and now it's fully applied like what all right move on on another aspect you can do for example is you can put it into an external css style sheet so here for example i can do create an app.css or an app.js and i can actually import app.css right after css will be imported right here and this will allow me to fully use my all my css files in react.js beautiful all right now there's a question you might be asking yourself okay well nas how do i pass in data for example in react.js well we pass a data something using something called props right props it's basically like parameters for functions right it's basically parameters for our components so if we think of them for example let's go ahead and take a look at this right what are props well uh props are it's a pretty pretty simple thing well it's arguments right here passed into react components think of them as functions you know when you have a function right and you pass in you know let's say some name prop well that's this is a prop except you can pass that into an actual component for example here we have an element car right this is a component and we're passing in a prod prop called brand and we're passing the value called forward and so when we go ahead and have a a a component here we can actually use props the brand to get us this forward value it's as simple as that right and the the past and components via html attributes and these right here are called html attributes all right next big question is how do we go ahead and save data using react gs or react hooks right we've passed in data right between one component to another component but how do we have some kind of a data storage device i would say storage device right that will allow us to fully you know save some data as we go ahead for example log into our application as you for example go to your profile page and you know how it says how says hey your name is nazar your name is joe or whatever it might be right how does that data appear in every ids application well also this is something called using react hooks and react hooks in our case is where functions that let you hook into react state and lifecycle features hold on i know you're probably very confused right now but that is okay all right don't pay attention so much to this one i want you to pay attention much more to this one right here okay right it's used to expand effectiveness functionality of your app so what we can do is we can actually store data of our component right so for example you see how here this is a component called example many states this component contains the data of age fruit and to dose well we can actually store this data using something called use state and we can say hey our age is currently 42 our fruit is currently banana and our to-do is currently text learn hooks right and these right here are simply functions that will be used to to change this data right these are functions that we use to change this data okay cool so in that case what is state right we just talked about stage for a second right well state basically just represents parts of an app that can change right that can change and if you think about what are parts of an app that can change well if you look at for example on an application okay let's say this is facebook right in a news feed right let's say you have the news feed here right then you see here right let's say this is a picture well one thing you can change is for example the number of likes so let's say there's 20 number of likes right the number 20 can change for sure and so what we'll do is we will actually save this number 20 in something called a state right in a state we'll use for example we'll do we'll do for example use we'll do for example use state and we'll say 20 right 20 and whenever somebody let's say a you go ahead and click on this the number like the like button we will go ahead and do for example let's say set um set likes and we will implement it to 21 for example right it's as simple as that right and each component in our case each component can have its own state think of it as that is its own database right and the state changes components re-renders so this is why when you go ahead and click on something right when a user right here clicks on this element right this number changes how does it know that happens well pretty simple because it goes ahead and checks basically as the state changes okay i need to now re-render the application or and show a new view to the user so becomes it goes from 20 to 21 right that's just one example all right let's go ahead and move on all right what do we have how react.js tracks changes now that is a question kind of how we talked about right in react.js as we go ahead and we build an application let's talk about this okay let's think about this here for a second okay i'm going to go ahead and put this for you let's go ahead and build this out for you okay we have here right again like i said we have the news feed right we had the likes right here okay and promote remember what we had what we had we had 20 20 and you clicked on the like button right you click the like button well what will happen in react.js is react.js will go ahead and again the state let's say this is our state right state and our state has currently the value of for example the likes let's say in here we have likes likes right oh that's all that's all it is likes okay and we have we have likes which is account and we have a function called set likes which react gives us right set likes to go ahead and modify the likes when you click on this just how we talked about just recently when you click on this right we do set likes to uh 21 right to 21 to increment account okay what's going to happen is react gia has something called virtual dom i know this is a horrible drawing of the virtual dom but it's a virtual dom right virtual virtual dom right and a virtual dom is simply just basically a clone clone of the current application it's simply just a clone whenever the state changes this state right here changes maybe that's a like maybe that's a user maybe you did something else on the web page it is going to go ahead and actually change it first on the virtual dom and if it sees that it made some kind of a difference let's say on the the news feed okay then the react.js will know okay so the the number changed in terms of a view then that means i need to go to just this number right here and change it because otherwise without this virtual dom then every time you change this state it will render the whole application and that is not good that means it's going to render all these different components and that makes applications slow and just not easy to use at all so this is why react became so smart and they're used to call virtual dom to make sure to track those changes and to modify your view as you're going to click for example on facebook click the like button or you click the like button on instagram so in that case that's all pretty much what you learn is react gs now let's go ahead and take a look really quickly on how now now let's go ahead and take a look really really quickly how to build a small application for example with count so we did state let's go ahead and as we learned to state right which is to to go ahead and save uh data around your component let's create a state called count count right here and a set count function right which will be returning okay we we usually call use state use state and let's say the count is currently zero right we're going to import here something called use state use state right again we're using a database of react.js and what's going to happen is here we will go ahead and actually output the current count right so the current count my count is currently count zero okay then what we'll go ahead and do is we will actually create a button let's create a button that will increment the account so i will go ahead and do button again this is using jsx right i'll create a button and even though this looks like html it's still not right it's still not fully html okay uh add count okay you can see right here and what's going to happen is on click of this on click of this button i will go ahead and simply simply do set set count and i will say count plus equal to one plus one so what we'll go we will do is this set count is a function that gets returned from this ust functionality okay and i will do set count count plus one and now if i go ahead and click on this look at that one two three four five six seven eight nine and ten and however many of the times i go we see it refreshes the page so basically as i said let me kind of remove this right as i go ahead right as i go ahead and click this button click this button right right as i click this button this will change the count to count plus 1 so if it was 10 it'll be 11 and because this now changes to 11 it will re-render this whole element right and so that's why this becomes for example 20 in our case when i say render it almost like almost like a refresh but it will refresh only this element specific element right here so that my friends is pretty much react.js it's a very very powerful framework a very powerful library that you absolutely need to learn because the job market out there is pretty intense for this specific library and if you're interested in learning more about react.js and building more applications just like this i highly recommend our best course on the planet profile javascript that will go ahead and teach you applications like this it will teach you how to build applications like for example a google maps project like for example a twitter clone project it will teach you react.js the basics of react.js it will teach you how to go ahead and actually become a foster developer right so if you're interested in that specific situation if you're interested in becoming a developer go ahead and click the link below join profile javascript and we'll see you in there smash that like button subscribe for more videos like this and we will see you in the next video adios you

Channel: Clever Programmer

Views: 37,180

Keywords: cleverprogrammer, programming, developer, javascript, web development, coding, programmer, software developer, software development, react js, tutorial, react, js, rea, javascript tutorial for beginners, javascript tutorial

Id: vIRBSI-elUM

Length: 28min 27sec (1707 seconds)

Published: Tue Mar 02 2021