React Tutorial For Beginners

Hey in this episode we are gonna start reaction videos a react videos what a great way to start now before we get started I just want to let you know that in this episode we're not gonna take a look at all the advanced things and crazy things we can do react I just want to let you know and can explain how everything works and how it's different from vanilla JavaScript because the mentality you need to write react code is is way different from vanilla JavaScript so prepare yourself get ready and let's see what react is about all right before we get started we actually need to download nodejs so if you don't have node installed you can go on no chance org and you can download this recommend it for most users ok you can click here on download and after you do that we can use NPM to install different kinds of packages and what we're gonna install is something called creates react app and what create react app is it's a package that kind of sets everything up for us the whole environment to start writing react code without us doing any preparations ok so just a very simple way for us to get started and I highly recommend to use this I mean I use it every time I rarely set up my react projects from scratch so we can go on google and write create react app and we're gonna open up this github page here so github.com slash Facebook slash create react app and if we scroll down here a bit we can have a very simple way we can start our react app and all we need to do is we need to write npx create react app and then we give it a name so let's open up vs code add again stop talking so much and show us what you mean alright so here I'm just gonna I'm just gonna navigate we can go to desktop I'm gonna go to open folder actually I'm just gonna go to desktop here okay and what we need to do is we need to go to the terminal up here and click on new terminal ok this is gonna open up our terminal as you can see I'm in the projects folder here and all we need to write this MPX create react app like so we add a space and then we give it a name and that's gonna create us D folder with the react project so for now I'm just gonna name this project react okay hit enter so after we install everything it's gonna say CD project reacts so what CD means is basically we can navigate to that specific folder so as you can see down here it actually created the folder with the react project for us so this is just a basic template empty template that we can start creating react projects so we can do CD Projekt react and that's gonna bring us into the folder alright that's one way or you can just open folder and that's what I'm gonna do and I'm just gonna navigate like so because I don't want you to see all these different crazy projects going on here so I'm just gonna navigate to it like so and this already looks kind of crazy so I'm gonna explain everything so don't worry okay the first thing we have here is no modules now what node modules is is all the different packages that we installed with NPM so if we take a look here we're gonna have things like babel react and react dom and all the other crazy things now if you remember in another video I did everything else we install it's gonna go in the node modules so if we want to add gzip for animations that package is gonna be installed and it's gonna lay in our node modules so all the packages so rather than linking things with the script tag and adding it like so we download all the packages locally in here and then when we compile our code and it's ready to be shipped it's gonna be included and our final project okay so usually we'd never almost never open this up we never usually touch this this is kind of just a folder that all the packages go in and there are multiple packages that we're gonna work with react then we're gonna install through NPM and they're all gonna be in here okay so don't worry about this that's all I'm trying to say public is gonna hold our index.html and some to other files here that don't really matter for now so we just have an empty index.html here for now okay that's all the public is and most of our work is gonna be in this source file so let me just skip through this a bit we also have it get ignore and what that does it basically if we're trying to push up to github it's gonna ignore these specific files that we have in here so things like node modules this can be huge if we download a lot of packages and we don't necessarily want to add this anywhere okay we don't want to add it to github we don't want to add it anywhere so that's what get ignores it just ignores all the files that we want to push up we have package that logs out JSON and package that JSON and what this does it just holds some scripts here in this case we have his start script so what it does it kind of just starts up our react project if we have a final version and we want to ship it so I have my react project done we can run build and what that's gonna do is it's gonna optimize everything for us so it's very compressed and it's ready to be put live somewhere on a server okay we have tests here which we're not gonna cover now and what that's gonna do is we can run tests to make sure that everything works the way we want and eject which just kind of shows you all the different packages that we have installed in this project but again don't really worry about this for now we're just gonna close this up and package that log that JSON basically all it means is it's gonna hold a specific version of each package that we have included in here as you can see it's kind of crazy here but what it does basically is if we have if we give this code some else and they want to install it we are sure that they have the same version as us so in case one package gets updated or something they still have our version that we use on this PC so Wow ok this is not even about react anymore but again don't I wouldn't worry about these so much and we have read me which just gives us some basic this basic waste that we can get started again we can ignore this we don't care we don't care and let's do react okay so let's open up our source here and here is where we write all of our code so the first thing we have here is an app dot CSS it just gives us some basic styling but let's open up let's see actually what we get here so we can go back to the terminal and we can run NPM start and what that's gonna do is just gonna open up a live development server so we can see our react code so it's gonna open up obviously on the other screen so I have to drag it in here and it's gonna take a bit so let's just wait let's go back here so all we have is some basic styling in here we have something called a BAS which we're gonna delete in a bit because I don't want to overwhelm you with all this code and we're gonna start from scratch we have a test file which again it doesn't really matter for this one an index dot CSS which has all some basic body styling and a code styling here so let's take a look at what we got okay so we just got this page here with a logo and some some text okay and we have an index J s here and what this does it pretty much just mounts our react app okay now this doesn't make any sense so let me just delete everything in here in here and our app is okay because this is a component so I'm gonna delete everything and then it's all gonna make sense so we go back here everything is breaking but that's fine so what we need to react the first thing is we need to create a component now AB das is a component now what a component basically is is a file that holds all the logic the HTML the logic and even styling in one file so you can imagine a component as being a self-contained piece of code so may be a model is a good example you can have a model that can be a component and what you can have in there is the HTML the JavaScript logic and is styling so how can we create this component well let's create this app component again and we're going to render it to the screen so the first thing we need to do is always when create a component we need to import react from react okay that's the first thing we need to do and how we can create a component is by writing a function so we can just create a function called app for this example like so okay it's just normal function perfect and now what it actually does differently from like vanilla JavaScript is we can return so we add return parentheses like so and I'm just going to write a div here and if that doesn't work if you hit div and it doesn't work and you hit tab we can go down here and click this and we can write react here and it's gonna recognize it as being a react file so now we can create a Biff here and I know this looks confusing as hell but don't worry I'm gonna add h1 with hello react okay so this is one component we have here I'm gonna explain what everything happens in here in just a second but don't worry and all I'm gonna do now is just export default app so what export default means is it's just gonna export this file what happens here is we create a component we export it and then our index j s as you can see here we have something called import to react again we have import react column and then in here we use this react Dom render to render this app component and then there's a comma here and it says document dot get element by ID oh wait that's just normal JavaScript get document dot get element by ID on this route all right edie now I am super confused what's happening here what's happening is that we rendered this app component that we just created in our index.html so as you can see we get this route let's take a look at our index.html in our public folder we're gonna go here index.html as you can see we don't have anything in our body here but we do have this div ID root so what basically react does is we don't have any HTML everything gets generated inside one div so our JavaScript takes all of our components and it's gonna generate from JavaScript all the HTML rather than having HTML and then a JavaScript separately and then you get element by ID you get all all you select everything separately you just have JavaScript have everything in its tiles HTML and everything and it generates it inside this div for us okay and that's what it does we import react we create this function export it and it's gonna be rendered in here so now if we take a look here it's gonna say hello react so we've successfully rendered this function on the screen all right but what's going on here because normally we would not be able to use divs inside functions well that's why we import to react here what react gives the power to us is that this does look like HTML here but it's not HTML what react does is if we return some some code here so like a divin h1 this is automatically gonna be compiled into HTML so even though this looks like HTML it's actually JavaScript because what what this happens basically behind the scenes it's something like this it's gonna create it's gonna say react that creates element and it's gonna create a div for us so something like this this is kind of what happens behind the scenes here so this kind of means this but react does that without without our worry okay we don't have to worry about these things so what we have now is we can create these functions or components I should say and then we can render them out to the screen cool so we have this div with a h1 of react okay so this is our whole component again alright so what else we can do well we can add logic to this and the place we add the logic is before when we return this HTML again it's not a HTML it's something called JSX alright it's essentially just JavaScript but if we want to add additional logic we can do it up here so let's just create a button here a a function that says hello ok so we can create a Const say hello I'm gonna just set it equal to an arrow function alright and I'm gonna console.log hello here simple as that so now down here I can just add a button that's gonna say hello okay now rather than doing it like in vanilla JavaScript where you would have to go and get a reference to this button like document the query selector and then you would get the button that says hello maybe so maybe you have a class of hello on it and then you would do hello dot the eventlistener on click you don't need to do these things anymore because what we have here now is we have the function in here and also the button so all we have to do is we're gonna look at one event listener on click that we can use and all we have to do is go here on the button and we can add an on click like so on and then a Big C on click and we can set this equal to something and as you can see as you can notice here I'm actually adding curly braces and what curly braces means is that we can add JavaScript in here so everything I write in here is gonna be JavaScript okay if we don't add this then it's just gonna be plain HTML okay so this would be HTML if we add a bracket then it's gonna curly brace then it's gonna be JavaScript so in here look I'm also going to create a Const counter it's gonna set it equal to zero and in here rather than saying hello I can add 0 that's gonna work fine as you can see it's a zero there but I can even add this JavaScript number just by adding these curly braces and saying counter hit save and as you can see I still have 0 so that's what we can do here I'm gonna change this back to hello I'm gonna delete this counter and I can add an on click here and I'm gonna set it equal to say hello so I'm gonna run this function say hello like so hit save I'm not gonna add parenthesis here because that would invoke the function as soon as it gets rendered on the screen so I just have a reference to it and now if we take a look and hit f12 we're gonna see that every time we click hello it's gonna console.log and it's gonna execute this function so look at that we have everything self-contained look how much faster and cleaner this looks super cool all right what else can we do well we can create other Campo as well so maybe I don't want this to be in my app maybe I want to have this hello components a like a specific code that does something in another file well we can do that we can go in our source here I'm going to create a new file I'm gonna say say hello dot J yes all right this is gonna be a new file now we can create another component I can create an I can say import react again we're gonna do this every time from react so we're just gonna import the react package again from our node modules alright and then we can create a function say a let's create a function hello okay so this is gonna be our Hello component and then here again we can just return he div and we're gonna have to switch this through react again a div that has a button of say hello and we can add the logic from here to here there we go it's save alright so we have this component now now we can get rid of everything from here so I'm just gonna have some empty dibs okay we're gonna go back here again so we have to say hello I'm just gonna add and I'll click again so that's equal to add the curly braces say hello perfect so now we can export this Hello component export default hello default I cannot write any more hello all right let's save go back here and now rather than doing all the logic here we can just import hello from and we can navigate to our say hello component and now look at the cool thing we can do all we have to do to render this component here is we can just write it like a HTML so we can do hello like so look at that that's that's kind of weird isn't it but it's safe and what we get is we still get that component showing up on the screen so again we can have here is the app component alright this is the app component and in here in our say hello I can add something else let's add a hate stream this is the hello component with its own logic and everything hit save and as you can see it still renders on the screen so we can kind of modularize all of our code into these separate small files and then we can just render them in here so that's super super cool all right let's take a look everything still works press hello hello hello everything works alright but this is a very unrealistic kind of component so let's get rid of it I'm gonna hit delete and let's get rid of this to you so I'm kind of kind of similar let's remove this import because we don't have that anymore I'm gonna say hello react here again hit save and what I'm gonna do is I'm gonna add create a component that kind of looks like a tweet something that we would have on Twitter so let's create a new file I'm gonna say tweet dot J s again all we have to do is say import react from react and I just create a function called tweet and I'm gonna kind of think of how my tweet is gonna look I'm gonna return parenthesis and I'm gonna have a div here oh my god let me switch to react again I'm gonna have a div here and what do I want in my tweet well I want a message maybe so I'm gonna add a let's say we have a name so someone that weeds I'm gonna add the h3 of name I'm gonna have the tweet message that's a day Pete for that this is a random tweet that wet he wrote web anyway and let's say we want to also have the number of likes to show up on the screen so for that I'm just gonna add another let's add another h3 number of likes all right let's save and now we can import this again import tweet from dot slash tweet now all we have to do again is down here I'm gonna render this component hit save and we don't doesn't work because it says attempted import does not contain a default export so we have to go back here and our tweet and say export default tweet you're gonna see that we have this name this random tweet and the number of likes showing up on the screen perfect and now we can also style this so how can we style different things well we can go down to our ab dot CSS here and we can create a tweet class for example maybe I want a a border of five of two pixels solid black to this okay it's safe and now to add an actual class to our tweet let's go back to our tweet component here we cannot use class we need to use class name and react and the reason we need to add class name is because we are in JavaScript again you always have to remember that everything we do in here is essentially JavaScript and class means a constructor function structure function in JavaScript so that's not gonna work okay so we need to make sure we do class name but something that react came up with two to let us know that this is how we can add different styles so if we take a look nothing happens because we need to import our styles as well so we can say import dot slash and we can say app dot CSS like so let's save and now as you can see we have the border on top of this now to make this a bit nicer I guess we can go back to AB dot CSS we can kind of delete all of this code here and we can get the app we can just create an app and add a height of 100 VH to this a background of light blue maybe hit save actually I'm going to change this color a bit something like that and then we can go back to our app and add a class name here of app-like so I believe I did lowercase so hit app and as you can see everything is good let's also get rid of those margins and everything I'm gonna just do it in this index dot CSS up here I'm gonna add a star sign and margin:0 padding:0 and box sizing border box to get rid of everything there we go and now I'm just gonna make this white okay so we can go back to the F dot CSS so we have our tweet here I'm gonna add a default height of like 300 pixels to it and a width of 300 pixels okay let's get that box kind of look to it perfect so let's add a background of white alright and we can actually get rid of this border I don't like the way this border looks I'm gonna add a border radius of 30 pixels alright it's something like that that doesn't look that great we can also add a display flex flex Direction column justify content center actually let's do space round and on line items Center hit save and this is what we have we have the name random tweet and the number of likes very very cool all right now how can we create multiple of these components well look at this we can just go back to our app dot j s here and if I want multiple instances of this tweet I can just copy and paste this multiple times now look at that that's gonna create as multiple components of this tweet alright but we still have name here and this is some random tweet and number of lights here everything is still static it doesn't look good all right so how can we make this a bit more interesting well for now let me just add a min height here so it extends all right that way if we have more content here it doesn't cut off that blue perfect I'm also gonna add a display flex to this just kind of put them like that that's ugly okay let's do it justify content space around alright there we go so something like that that looks a bit it still looks bad a line items in there all right I'm gonna actually get rid of this hello because it doesn't have any meaning to us anymore hit save alright so there we go we have four lovely tweets going on here okay now how can we add custom names to it well we can define a prop and what a prop is is a property that we can define on each individual component so here if I want maybe I can add a name I'm gonna set a name equal to and I can just add a name David alright there we go I can add for each individual ones just copy and paste everything so for this one I can add something different let's say I want to add John Snow Game of Thrones is coming so we have to prepare winter is coming that's a name that's alleged name I'm not even joking delete this and let's also add mosh mosh there we go hit save and you know what let's add Travis e-media there we go head saved perfect so nothing's still happening here because in our tweets da yes we still have name rendering here so if we add name in here the props what we have available in here is this name prop so in our tweet in the parameters here on the component we can add a prop a props I apologize a props parameter okay and now we can access the name by writing prompts dot name hit save and make sure if we take a look now it says props that name so it's this random text please remember if you wanna use JavaScript in this JSX in this HTML code we need to add these curly braces so now if we add props thought name hit save now you're gonna see David John snow traversing media and mosh so how cool is that now what we can also do is we can add the number of likes the number of tweets and everything else in here so maybe I want to have the tweet and again you can add any name you want here so I can say message set equal to this is a random tweet I can just copy paste this for now paste it in here in here and in here and I can just change this what does John snow say I am the true king and then tree of terror see media just hit 700k my dudes that's what he's gonna say him Maj is my new course is available there we go hit save and now again to render this we still don't have anything all we have to do is go back to tweet and rather than rendering this plain message we can just add curly braces and we can say props dot and whatever we have here so the prop name is message we can copy this and paste it in here props that message hits save let's take a look and as you can see this is random tweet I am the true king 700k my dudes and my new course is available so you can do the same thing with the likes as well if you want so that's a good practice and give it a shot there we go that is those are props and if you want you don't even need to write props dot name prompt stop message in here rather than writing props you can add curly braces and kind of Deconstructor this with name and with message so you can kind of extract the name end message so rather than writing prompts that name you can just have name and you can just have my all right this is a bit of es6 which we're gonna use a ton and our react it's safe and this should work yeah the same way so everything is still good everything is perfect we got it goin now one last important thing I want to cover in this video is something called state and a state again if you look over the internet and trying to figure out what it is it can be quite complicated and everybody's just trying to make it look like super complicated but it's not that complicated so what state basically is is some data so you can imagine it as a variable and based on that data your app kind of renders itself based on that data so maybe you have a a is logged in a boolean that can be false and true and based on that state your app changes so if and maybe is logged in is true then maybe your HTML might look differently so besides stop talking and let's start showing I'm gonna delete this tweet everything in here in this tweet and I'm gonna get back to the it later and what we can do we can create a state like so we can say Const so it's kind of like a variable and actually before we add the cons we need to go up here and we need to import one specific thing from react we're gonna add a comma and we're gonna add some curly braces and we're gonna say use state okay you stayed like so and in here now what we can do is we can say use state and in here and this parameter we can add the data that we want either that can be a boolean a false true value in number string whatever you want okay so how can we adil and what what should we add well let's say we want to create a a a text and when we click on it it's gonna change its color or something like that so let's add a false for now okay and in here we can create a Const and then what we need to do is we need to add these curly brackets and we need to set it equal to you state and the first thing that we need to do is we need to give it a name so in this case we're gonna add a is red alright we're gonna add a comma to it and the second thing that we need to do is we need to add a name that can change this value so first one is the actual name and the second thing will be kind of a function that changes that is read value so we can switch it from true to false so you're gonna see this it's very common we're gonna use something called set okay set read that's how I'm gonna call it and maybe if we have a count I'm gonna create a count - we're gonna create a count and then we're gonna add a comma we're gonna say step count all right I'm gonna say set it equal to you state and we're gonna start the count from zero all right so let's experiment with these two and here this kind of switch so let me go back let's just create let's try it with the count first because that might be simpler all right I'm gonna have a button here and I'm gonna say increment perfect and then I'm just gonna have a h1 and rather than putting zero here I'm gonna put that count from this state okay hits save let's take a look so we have increment and we have a zero there perfect so how can we increment this well we can create a function we can see Const increment we're gonna set this equal to an arrow function and the way we need to work with state is we use this set count so set count I'm gonna add this is a function and in here what I want to do is I want count plus 1 and that's it and here on the button I can add an on click set this equal to our function increment hit save and now as you can see when we click it automatically is going to re-render this number and it's going to increment for us so again based on our state our HTML is gonna change whatever you have in your state your HTML is changing so rather than adding fixed values in here we just create and we just add our state in here alright so if we're gonna eventually we're gonna get some data from an API and we would save that in a state so you would have something like this cost user and then set user or something like that and you would have this equal to used State and you would have an object here with all the different things that the user has maybe it has a name of add maybe it has an age of 25 maybe I have posts here and then it's gonna be an array of objects or just an array maybe I have a my first post my lovely summer it's not even summer yet anyway so this is what you would have and then you would render everything out here and then you would just change the state if you want to add another post or something like that and then everything is kind of automatically magically gonna render itself based on whatever you have in here okay so that's what these state is so as you can see now we have this for a king let's also add a h1 here and we're gonna try with the the other one here and I'm gonna show you how we can actually switch classes change my color like so it's save you're gonna see we have a change my color here and now rather you know what I can do is I can go into my index that's have that CSS in here and I can just create a red class for example and I can just change the color to red and add a font size of 50 pixels head Save we I go back to our ideas here and what we can do is we can set a class name on this h1 now here's the cool part we can set it equal to I'm gonna add curly braces and what I'm gonna do is I'm gonna check this is red if it's true or false and based on that we can add the class name or remove it so what we can do in here is we can add a ternary operator now we can check that is red value so we can write is red and if this is true we can add a question mark this is true then I 1p class red to be added and then you can add these the colon here else this would mean else so this is like an if-else statement else I don't want to add anything to it hit save all right so now let's take a look when we click this count button I want to change the value to red as well so we can say well we're not gonna use the set count we're gonna set the red now so we're gonna say set red to true hit save and I'll take a look let's go back here once we click increment look at that we added the class if I want this to to toggle we can add a is red and then I can just switch its value from true to false by adding an exclamation mark and that's gonna say hey the opposite of whatever the value is right now so if this is false it's gonna become true when we played it again it's gonna be the opposite of true when we click again it's going to be the opposite of false it's save and now as you can see it's gonna toggle let's take a look now we are toggling it so that's a way that we can also add and remove classes and react so as you can see it's quite different from vanilla JavaScript but it's it's way more logical and it's way more cleaner and quickly to finish this off with the basics I'm gonna show you a good example that we could use the sweet and a real world world project so while we would have is we would have an API call and we would get all the tweets in here and we would set it in this you state for now we're not gonna make an API call or we're gonna get a user we're gonna add a set user for now we're gonna set this equal to you state and here we're gonna have an object and what we're gonna have in this object is basically a name and a title or a description name and see well actually we are gonna have to have an array of objects because we want to have multiple objects so I'm gonna set in the array and here I'm gonna have a name of head and a message of hello there then we're gonna create another object name we're gonna see John again with the message of I am John Snow and let's create another one we're gonna have a name of Travis E and a message of I am awesome so you can imagine that we would get this from an API and then we would set it in this state so now here I'm gonna delete everything and in this app this is what I'm gonna do I'm gonna add curly braces I'm gonna get the user dot map I'm gonna map over this and I'm gonna get the info so all the information from this rate of users and actually a better way we could name this as users here set users and then we would have users dot map and we would get each user in here I'm just gonna run an arrow function I'm not gonna add the curly braces here so I'm gonna leave it empty here I'm gonna add a parenthesis because I want to return some HTML well JSX because we learned that this is actually JavaScript and then here what I'm gonna return is actually this tweet like so nice hit save and now we're gonna get three tweets one two entry but we didn't render anything inside here so what we can do is we can add the name and the messages from here and the prompts we can say name is gonna be equal to curly braces and we can get all the information from the state and that is user dot name okay so users and the name here perfect and we can add the message I believe it's set as message yeah we can get the message to be equal to user dot message and now everything just works magically look at that that's how we can use the state together with components to create some very very cool things so that's it that's react I didn't cover anything I know because I didn't want to overwhelm you with a lot of crazy things we still have a lot of things to cover such as fetching an eighth from an API use effect and router and state management ah there's so much more it's crazy but let me know if you want to see more leave it down in the comments and that's it from me I want to see your reaction to this video and I'll see you next time but the big balloon [Music]

Channel: Dev Ed

Views: 692,526

Keywords: react tutorial, learn react, react course, reactjs tutorial, react crash course, react js tutorial, reactjs course, react tutorial for beginners, reactjs tutorial for beginners, react.js, reactjs, react js, react, learn reactjs, javascript, es6, react framework, javascript framework, web development, javascript tutorial, dev ed

Id: dGcsHMXbSOA

Length: 43min 19sec (2599 seconds)

Published: Wed Apr 10 2019

Reddit Comments

[u/JonasErSoed]

Dev Ed is great! He made Node so much easier for me to understand

[u/LiquidAurum]

I'll be honest docs in general just don't do it for me. I'm between a beginner-intermediate level programmer. And I've read docs for different libraries and packages and they're just not human readable imo.

[u/AbodFTW]

6 seconds into the video, I already want to watch the video, though I'm not into Reaction, *React, LOL

[u/Muhammadwaleed]

Totally agreed, i took many courses but this video beats hours of other's long useless videos

[u/rook218]

Only 10 minutes in and I already love this video. He explains everything in a quick ten second blurb that sheds light on it in a way that nobody else does.

I've taken about 15 hours of node and angular tutorials and this is the first time anyone's mentioned the package-lock.json file beyond saying "it's there, don't worry about it." Took him 5 seconds to explain it and now I know what it is.

This guy is awesome!