React JS Crash Course

hey guys welcome to another YouTube mini course in this video we're going to look at the ins and outs of react j/s alright and react is actually one of my favorite technologies that I've worked with lately and if you haven't used it I definitely suggest really looking into it because it can change the way that you think of user interfaces and work with user interfaces I'm working on a 10 project react course now as soon as that's available I'll put the link in the description I also have an intro to react and a react and flux course project course so you can check out as well alright now we are going to jump in and look at some code but I do want to just go over real quick I'm just basically what react is and some of its advantages alright so it's an open source JavaScript library for building dynamic user interfaces and it doesn't have anything to do with the backend of your application working with a database and so on it's it's basically the V in MVC a and Model View controller it's maintained by Facebook Instagram and the community of individual developers so some advantages of react it allows you to design simple declarative views for each state in your application if you don't know what I mean by state if we think of an email client when you view your inbox that's considered a state if you were to click compose and then your editor opens up that's another state so react takes those states and allows you to create and manage views and components for them alright so everything in a view is encapsulated in a component and those components can have their own properties and state as well if you want to get into more complicated application wide state you could look into flux or redux which is an application architecture but that's a little more complicated than what I want to get into today alright so we'll be dealing strictly with react Jas react uses what's called a virtual Dom or virtual document object model I'll talk more about that in a minute but basically it allows you to work with and render only certain parts of the Dom that you need another great advantage of react is it's completely independent of the rest of your app as I said so you can use it with pretty much any other framework or any other technology that you'd like it also can render on the client or the server you can use it with nodejs and NPM as well as just including it as in a script tag and using it right near HTML files so as I said react uses a virtual Dom and it basically abstracts away the Dom and creates its own version which is simplified and only includes the things that you need all right it also helps us identify which parts have changed so when you when you update your component somehow and you want to basically re render it instead of having to refresh the entire application react can take a look at what's changed and look at the original Dom and then just re render that part that needs to update all right so it determines how to upload the browser's Dom more efficiently and it's also much more lightweight and that makes it work a lot faster all right so let's take a look at an extremely simple application or extremely simple component called hello message and you can see that basically we have a class called hello message that extends react component and inside here we have a method or a function called render which is the only function that's actually required in a component there's you know many more and you can create custom functions but render is required and you can see we're returning what looks like an HTML element this is actually JSX ok Java scripts intact extension which I'll talk about in a second basically what we're doing is saying hello and then we have this this dot property or a dot props name all right so this is a component property now down here we're using the react Dom to render it you can see we're using this hello message which is the name of the component and we're passing in a property called name with the value of Jane all right so right here would display whatever we pass in here which is Jane and then this parameter is where we want to insert the component in our HTML so typically you'd have a div with the ID of a pour route or something like that and you would insert insert it right in there all right so JSX stands for JavaScript syntax extension and it's a preprocessor step that adds xml to JavaScript it looks much like XML or HTML there are a few differences and they'll go into that later on but basically it defines a familiar syntax for defining tree structures with attributes and it's not required but is definitely recommended and maich thing makes things much easier and later on I can show you an example of JSX and also the JavaScript that generates it and you can see how much easier it is to just use JSX so what you'll learn in this mini-course how to create a react application how to create components manage state and properties handle events work with forms and input work with JSX we'll take a look at some of the lifecycle methods and also how to fetch data from an API and bring it into our component all right so enough of the slides let's jump in and create a react application all right so we're going to jump in and start to write some code with react j/s now as far as the application will build it's a very simple project management app but I don't really want you to focus on the functionality of the application because my goal in this video is to show you the different parts of react and to teach you the fundamentals then you can move on to create your own applications and ideas all right so if I go to the react website and click on get started it takes us to a simple hello world example we want to click on this installation link right here alright and there's a couple different ways many different ways you can use react you could even just include the two scripts here react j/s and react Dom right in your index.html file and work with react but we want to be a bit more efficient and clean so I used to use something like web pack or gulp along with the react plugins but recently they created this tool this create react app command-line tool that will allow you to generate a react application in just one command all right so this is this is definitely what I would suggest to use it compiles everything it compiles all the JSX you don't have to worry about anything really alright so we're going to go ahead and install that and it needs to be installed globally you do have to have no js' installed so go if you don't have that go to node.js org download it install it and that will give you node along with NPM alright so once node is installed we're going to open up a command line and you want to run npm install make sure you add the - g4 global and then create - react - app alright i already have it installed so i'm not going to run it but just go ahead and run that and then go to wherever you want to create your project I'm in my C Drive in my projects folder and then we just want to run create - react app and then the name your project okay so I'm going to call this project manager alright it does take a minute or two so I will I'm going to pause this and I'll be back when it's done alright so that took about two minutes or so now we want to CD into project manager and then all we have to do to run our application is do NPM start alright and and if we look over here actually I don't know if it shows us but to build it for production we can just run I think it's NPM run build and that will just compile everything so that you can just take it and upload it to your server or whatever alright so we ran the application and this is what we get ok nice little landing page I don't want to keep any of this stuff for instance the logo and the styling so I'm going to open up my folder in my text editor and i'm using atom which i would recommend for react development i find it really really helpful the code highlighting is really nice and I noticed that with sublime text it doesn't pick up the JSX very well as far as code highlighting but atom works really well with it and there's probably a plugin you can use for sublime but I just prefer to use atom alright so I'm going to just add my project folder here which is in C Drive projects and project manager ok so this is what it gave us alright so we have our package JSON file you can see that we're using react right now it's version fifteen point three point two along with react Dom and then our scripts start we'll just start the application as we just did build as I said that that's used to compile everything test eject I've never actually used that so now let's take a look in the public folder we have an index.html file I'm just going to get rid of all these comments to make it look a little easier to read and basically all we need to know is that we have a div with the ID of route and that's where everything is going to be output alright you can go ahead and change the title if you want say project manager and we could save that and now you can see the titles updated alright now in the source folder this is where all of our react stuff goes if we look at index J s or importing react react Dom we have a main app component that we're importing and then this index CSS file which we don't need I'm going to get rid of that and then down here we're doing our react on render putting in the main app component and then we're saying we want to insert it in the in the element that has the ID of root which we just saw right here okay so that's where it's outputting so we can save that we shouldn't need to touch index JSON or index HTML now app J s is basically the the gateway to to our main app component so we're importing react the logo and stuff I'm going to get rid of this I will keep the app dot CSS import right here and then we have our class with a render function which is returning this here now it's very important to know that when you return in your render it has to everything has to be within one element I couldn't have another div right here and return that all right obviously we can have as many elements as we want inside the main div but you can only have one div at the very at the very top level all right now I'm going to get rid of everything here except for this this div alright and let's just for now we'll just say my app okay we'll save that and then let's get rid of this logo SVG you don't need that and then app CSS I'm just going to clear all that out and save it so now we just have just my app all right I'm going to open up the chrome tools console as well because we'll be working with that quite a bit so now we have a blank react application essentially now for this main app component I usually use it as kind of a placeholder for all of our other components we can import them and we can place them right here in the render so we're going to have a folder inside the source folder called components okay and we're going to create a new file in there and we're going to call that project CAS okay so this will be our projects component and it'll be responsible for listing all of our projects alright now I'm going to copy everything we have in app J s because we need that same basic format we don't need the CSS we only need to include that in the main app component then we're going to change the class to projects make sure we export that down here so that we can use it in other files this div will change the class to projects and let's just say my projects for now alright so we'll save that and then we'll go back into app guess and let's import projects from and that's going to be in the components folder slash projects ok we don't need the J s at the end and then down here we can simply input projects okay just like we would an XML or HTML okay we'll save that and now you can see that we're getting my projects so everything we put in the projects component is going to be output here now we can pass in properties here if we want so for instance if we say test and set that to let's say hello world and then in projects we should be able to just go like that I'll put that variable and test is not defined that's because it has to be this dot props dot test ok and then we get hello world all right just to show you that we can do that now the idea that I want to do here is all of our projects are going to be held in state all right that's where our data needs to be held I'm usually we would fetch it from some kind of API or database and then put it in our state but we're just going to put the the right in our state so what we want to do is we want to create a constructor so right above the render we want a constructor all right and this is where we want to define our initial state state keys so if we say this starts state equals and we want to set projects and then projects is going to be an array of objects all right so each one will have a title so let's say business website and also a category we'll just a web design all right so there's one project let's copy that and it'll do three so business website then we'll do social app and that category will be let's say mobile development and then let's do ecommerce shopping cart and then that category will be web development all right now we want to take this state and we want to pass it into projects as a property all right so basically you want everything at the top of your application in-state and then pass it down to other components through properties all right the data should be immutable it should go from the top down so let's pass it in as projects and we should be able to say this dot state dot projects all right so now if we go we're going to get an error here and it says this is not allowed before super the reason for that is when we do when we put a constructor and we need to call super like that save it and that goes away all right now in projects if we go in the render but not in the return and we do a consult log and we say this dot props now when I reload you'll see we get our properties and we have this projects with an array with all of our projects so we can now access that from the project's component now when you have an array of objects like this you usually want to create a separate component for each individual item and then you want to basically map through those projects and output that component so we're going to go ahead and in components we'll create a new file called project item Jas all right we're going to copy everything we have in projects paste it in there and we'll change this to project item and down here make sure you explore project item all right now for this I don't want to return a div I actually want it to be an li okay each one will be wrapped in an Li and we'll give it a class of project and by the way if you're wondering why this is class name is because in JSX there you can't use classes and attribute all right class or for if you're using a form with labels you can't use for you have to use HTML 4 alright so just try and remember that so in here actually you know what we'll leave that as is for now and then let's go back to projects and what we want to do is let's see we want to try to think of how I want to do this let's go above the render and let's just create a variable called project items and then we want to test to see if there are any projects so do an if statement here we'll say if this dot props dot projects then we want to take that project items variable and we want to set that to this dot props dot projects dot map ok since it's an array we want to map through it so in here we're going to use an arrow function you could use a callback but I want to keep this basically in es2015 so in here what we want to do is first of all let's do a console log and make sure that we're actually getting each project ok so let's see unexpected token expected parentheses oh I put this in the wrong place this needs to be within render so we're going to put that right here all right so now down here you can see it's logging each one so this is working or getting each individual project now we want to let's comment this out and we want to return and in here we're going to put our project item component all right and then we want to pass in each project as a property okay so we're assigning the each project item to this variable right here so down here we should be able to just put in project items and we'll save that okay so we also need to import the project item component that we created so say import project item from dot slash project item okay now we're getting this error that says each child in an array should have a unique key property so this isn't an error it's a warning but it is a good idea to add a key to our project item right here usually if you have an ID you would use that but we'll just a project title okay now nothing's being out put up here because if we go into project item we haven't put anything here yet so let's put prom we should be getting project as a property that we passed in okay right here we're passing it in as a property so let's say this dot props dot project dot title and then we'll also put the category so this dot props dot project dot category all right we'll save that and now you can see we're outputting all of our projects along with the category all right let's wrap this in a strong tag all right and put a colon here okay so it doesn't look great but it is working we're a pat we're basically setting our state in our main app component okay we have a state called projects we're passing it into projects as a property and then inside projects were mapping through that array and we're outputting a project item component which has each project where we output the title and the category alright so hopefully you can see how this is coming together now one thing I want to mention is an app j/s in our constructor we set the state this usually isn't where you want to set the actual data you do want to define the state and the keys but not the actual data for that you want to use a lifecycle method and you probably want to use component will mount okay so say component will mount and that should actually be lowercased so this is a lifecycle method it fires off when every time the component is re-rendered so up here let's grab these and cut them out we do want to keep the projects but just as an empty array in this in the constructor down here we want to say this dot set state passing an object and we'll say projects which is an array and then we'll paste the data in like that all right so let's go ahead and save that and now you'll see it still functions but this is just a better way to do it than to have it in the constructor like that all right and when you if you do a for instance an ajax call if you're fetching data from from an outside api you want to do that in this life cycle method as well either this or component did mount and if you go to the documentation for react you'll see all the lifecycle methods and at which time they render or they fire off so now we want to do is want to add a form so that we can add to our state so we can add a project so let's create another component and we'll call it add project dot J s and let's copy what we have in projects ok we'll paste that and we can get rid of that I'm going to change the name to add project get rid of that change this down here to add project all right now let's see what do we want to render here let's keep the div I'm going to get rid of the class name and we'll put an h3 here say add project all right so let's just make sure we can insert this into our main components so we're going to go to app J s and import it just like we did with projects all right and then down here we'll put it right above we'll just replace this my app save that and now we're outputting that add project component so we want this to be a form okay so we'll put a form tag and let's put in here a div okay this will have a label of title and an input type will be 'text and we're going to give this an attribute called ref and that's going to help us get the the value when we submit the form now you have to have this slash here you can't use html5 syntax or you'll get an error okay in the ref let's just put title all right so let's also put a br here and again you have to have your slash so let's copy that paste that in and then this is going to be the category but I want this to be a select okay so we'll say select this will also have a ref of category all right now what I want to do is I want the categories to to be a property of the component all right now we can set default properties if we go above render and we're going to say static default props and we want to set that to an object and let's set categories to an array and we'll say web design web development and mobile development okay and then what we want to do is we want to map through these and then output the options so we're going to go above the return and render and say let category options we'll set that to this dot props dot categories because we can now access that and then we want to call dot map all right and then in here will stay category we'll use an arrow function and then we want to return option we're going to give it a key category and a value of category and then we also want to open the category here all right so now we should be able to just use this category options right down here alright let's try that and there we go so now we're outputting all the categories it's coming from the properties up here now to submit the form what we're going to do is in the form tag we're going to add a handler called on submit alright we have on submit is on click there's a whole bunch of them so we want to put some curly braces and let's say this dot handle submit all right so this handle submit we can create right up here ok and just to show you let's do console.log and we'll just say submitted now I don't think it's going to work yet oh we didn't even put a submit button so no it's not going to work type submit' value submit alright so if we go when we try to submit this you'll see that it's not console logging down here because it's actually submitting the form what we want to do is pass in an event parameter here and then just like in JavaScript or some other libraries we can use a dot prevent default and that will prevent the form from actually submitting so now if we do it you can see down here we get our console log now what we want to do is we want to store the the data that we submit into state so we're going to add a constructor up at the top all right and in the constructor we have to call our super function and then we're going to say this dot state and we're going to have new project which is going to be an object so we don't want to fill it here what we want to do is set it when this is submitted all right now to to grab the values of the form we can use that that refs attribute all right so let's let some say console dot log this dot refs dot title dot value okay so now if I type something in here and submit whoop that didn't work let's see what I do wrong ref title oh it's it doesn't know what this is we actually have to bind it through the handle submit down here or just say dot bind and then pass in this so now we submit you can see that it's console logging whatever I put in the title now we don't want them to be able to submit a blank title so we can actually do a little bit of validation here we'll say if this ref title value is equal to nothing then we want to alert and we'll say title is required all right and then we'll have an else and then we do what we want to do so if we save that and we try to submit we get an alert okay now if everything works out or if there's a title we want to set the state we want to put the the data into this value so we'll save this dot set state and we want to pass in here new project and set that to an object and let's see we're going to set title to this dot refs dot title dot value and then category to this dot Refs category dot value so that'll set the state for us now when we use this set state it can take a second parameter which will go right here we'll put a comma and that's going to be a callback function all right and then here let's do a console log and will log the state so let's save that and let's just say test web design submit and then it gives us the state which has a new project with that data all right now I should I should have mentioned earlier that the state in this component is different from the state in the main app component okay each component has its own state but what we want to do is take the data we submit and pass it up into the main app component and save it in the mains in that state so what we can do is we can send it up through a property okay through a function inside the properties so what we'll do is comment that out we'll say this dot props dot add project okay and then we'll pass along the new project now since we did that we should be able to access this from the the main component so we'll go down to where we have projects right I'm sorry the add project and we're going to put a property what do we call it add project so we want to use that right here so add project equals and then we want to function to handle it so this thought handle add project all right and we should just bind this as well all right and then we'll create that right here handle add project that'll take in the project and let's just do a console dot log just to make sure that that works all right so let's see what's this new project is not defined let's see oh I passed a new project this is actually in the state so we want to say this starts state dot new project so now if we put something in here and submit this dot props add project is not a function let's see this dot props dot add project oh this should be uppercase P there we go alright so now we're submitting it we're passing it up to this component and console logging it now in here what we want to do is we want to add it to the state of the main component alright so we can just let's see with react state your state is immutable meaning that you don't want to change it you want to basically update it so we want to get everything that's in it push to it push the new project to it and then set it again so to do that we'll say let projects we'll set that to this start state dot projects so we're grabbing what's already there and then let's take that and push on to it the new project and then we'll reset it so we'll say this dot set state and then we'll say projects projects all right so let's save that and now let's say test web development submit and there it is oh it says category that's not right okay so let's see what went wrong there if we go to add project all right here value category that needs to be wrapped in curly braces you guys probably saw that already all right so submit and there we go we say test to will choose mobile development submit so now we can add projects now this isn't going to get persisted anywhere if I reload as I said in the beginning react is for user interfaces it's not it's not going to persist the data and now we could set it to push to a some kind of API or maybe the local storage or something that but we want to just focus on the user interface part of it and that's what's great about react is that your back-end is completely separate so we could have this go to local storage and then we could easily replace it with let's say MongoDB or something like that all right I'm going to put a heading above this so it's not so scrunched together so in projects we put an h3 will just say latest projects all right I'll put a line break below this input as well oops I'm going to put that right here okay so it doesn't look too great but that's fine we're not focusing on that so now what I want to do is I want to show you how we can delete these now initially we don't have if we look at our state our projects we don't have an ID and it's a good idea to have an ID a unique ID and there's actually a module we can use called UUID so let's see not sure where they the documentation is for it but we're going to go ahead and install that and it just generates a unique ID for us it's a really simple module so we're going to go ahead and just stop this with ctrl C and do NPM install - - save UUID okay and then we'll just restart NPM start and we're going to come over here and bring that in so import UUID from UUID and then we'll just go down here we'll assign an ID to uu ID dot V 4 which is a function so each time we use this it'll generate a new ID so we want one for here and here as well okay and then when we add a project we also want to do the same thing we want to add an ID so we'll import all right we'll use that right here where we set the state for the new project ID dot d4 just like that and that'll generate a unique ID for us all right and just to make sure that we're actually getting an ID let's go to our project item and we'll replace this title with ID and you can see that it's outputting unique IDs okay I'll put that back now I want to be able to delete these so let's go in project item where we are now we're going to put a link at the end here okay now the link isn't actually going to go anywhere we want to put an event I'm sorry an event handler called on click and we'll set that to let's see what I want to set that to this dot delete project all right we're going to do dot bind this as well and then we're going to create that right here handle whoops not handle what was it delete delete project and let's just do console.log test just to make sure that it actually works so let's open up our console if we click that we get tests now we want to do this the same idea we want to click on it in this component but we want to pass it up to the main component and then do the final delete there now since we're in project item were actually two components deep so we need to pass it up to projects and then pass it up to the main app component all right now to do that we're going to set a property this dot props dot and we'll call it on delete and then we just want to pass in the ID all right now to pass along the ID through this function we're going to go after this right here put a comma and then we're going to save this dot props project dot ID all right and then we should be able to access it through here and then we'll pass it along all right so let's save that and then we're going to go to projects J s and go to where we have project item which is right here and let's see we want to add on delete here as well say this dot delete project buying this and we also want to create the function up here delete project okay takes in ID and then again we want to do this dot prop dot on delete pass in the ID all right so now we're passing it up to the main component so down where we have projects we want to pass in on delete okay we'll set that to this dot handle delete project and we'll do dot bind and then pass in this and then just like we did with handle add project we're going to add handle delete project all right that's going to take in the ID and then the idea is just like with add project we want to get it from the state and then we want to remove the project we want and then reset the state now you could do this in different ways we could use a for loop or something like that but we're going to use find index so let's say let index and we'll set that to projects dot find index and pass in here X so X dot ID and basically what this is doing it's going to look through all the projects it's going to find all the IDs and match them to the current ID that's being passed in alright if it matches and it's going to get put in the index then what we want to do is want to say dot splice where that index is and we want to delete one from that and then we just want to reset the state just like we did up here all right so let's save that and now we should be able to click the X on one of these and deletes it okay so we can now add projects and we can delete them so we're pretty much there as far as all the basics one other thing I want to show you is prop types which is kind of like kind of a validation for for our properties so for instance let's see we don't have any in the main app component but if we go into projects into our projects component we have what do we have projects itself as a property and then we have the function on delete which is a property so if we want to add kind of a validation for those you can go down under the class and then say projects dot prop types and let's say projects and that's an array so we want to make sure that it gets formatted as an array so if we say react dot prop types dot array and then we have on delete which is a function so we can say react dot prop types dot func now if we save that nothing happens because it's correct but if we were to let's say projects if we want format that as a string if it's supposed to be a string now we're going to get an error saying that projects of type array expected to be a string okay so it doesn't actually stop it from working but it does give you this warning telling you that that property is the wrong type all right so it's good practice to do this okay now let's copy this and let's do that for project item as well project item we again have on delete and then we have the project which is a property so let's go down here and we'll change this to project item dot prop types and we have project which is an object okay so we want to do that and then on delete which of course is a function save that there's no errors because everything is correct now we'll do the same for add project so for add project we have let's see we have categories which is a property and that's an array so we're going to keep that and then we have add project which is where is it right here this dot props dot add project which is a function okay so that should do it and there we go now I also want to show you how we can bring in other data from from an outside API so I'm going to close all these except for app J s and basically what I want to do is a dev API called Jason placeholder and let's see I want to get some - dues so you can see here if we click on that it gives us an API where we can get JSON formatted - dues with an ID a title and so on and we can make a get request to that - dues so in our application we want to make the request in a lifecycle function called component did mount so we're going to add that here okay we should actually put this in both component did mount and component will mount so what I'm going to do is create function called get to Do's and let's see we're going to want to run that in both of these so let's go here and say this dot get to dues and we also want to run that here and then for where we put this projects in state I also want to create a function for that separately called get projects and then all we're going to do is grab this cut it out and put it in here and then we'll call it here just make things a little neater alright so everything should still work okay now in get to dues this is where we want to make our request now we can use many many different modules to make HTTP requests I'm just going to use jQuery all right so let's go ahead and install jQuery through NPM and you can use Axios is a good one super-agent is another one but I just want to keep it simple so let's go ahead and import jQuery up here we'll say import money sign from jQuery and then back down and get to dues or is it right here we're going to say jQuery dot H axe and we want to pass in here URL now the URL is going to be from the jason place holder which will be this so we'll copy that paste that in the data type is going to be Jason let's say I'm going to stay cash false and then we have our success okay so if everything goes ok this will run and that takes in the data that's returned and then we also have we need to bind this just like we do with the other ones the other functions we're going to say bind this and then we'll put a comma and then we're going to have our error in case there's an error all right and then for that that's going to take in power actually it's going to take in a couple things it's going to take in eight and xhr status and error and then all we want to do here is console dot log the error alright now if everything goes ok we want to take the data that's returned and put it into our state so up in the state here let's add - duze which will be an empty array and then down here we can say this dot set state and we'll say - duze and we'll set that to the data all right and then let's put a callback and then we can check the state so console dot log this dot state so since we have get to do is running in these life cycle methods it should run right when the app loads so let's go back there and open up the console and if we look at the object we have our projects of course and then we have 200 - duze okay that these are coming in from that API so it's as easy as that to bring in data from an outside source and put it into our state and then we can use that in the rest of our application and just I guess we can do that real quick let's create another component called to do zjs and we'll also create one called to do item J s and we're going to do kind of the same thing we did with the projects so I'm going to copy what we have in projects and paste that in to do zjs okay we're going to change a lot of these two to do this will be to do is I'm not going to do the delete and adds though I just want to list them so we'll get rid of that let's change this and I know I'm moving kind of fast but I just want to I don't want this to take too long now we're going to pass into dues as properties just as we did here and then we'll say to do items this dot props dot to dues dot map okay then here we're going to return the to-do item component we don't need the on delete and I believe the twos have a title let's check it out yeah they have a title and an ID so this can be to do dot title to do oops okay down here change that will just say to-do list all right and then for the prop types we don't need the on delete and then let's make sure we export to dues all right so let's save that and then in to-do item we're going to copy what we have in project item paste that in okay we don't need to delete then here let's call it to do change that we don't need a category so let's get rid of that it's just going to be the to do we don't need the link to delete change that all right so we'll save that and let's see now in the main app component we're going to import both of those are actually we're just going to import to dues all right and then we'll add that down here let's put an HR save that and I'll probably get an error no error but we're not outputting anything and that's because we didn't pass anything into to do so we want to pass along the two dues that we have in state so we'll say this dot state dot two dues save it and there they are so those are all coming in from that API so you can see it's easy to pull in data and just bring it into our state and then publish it down to components through properties and we made a get request but of course we could also make post requests and we could submit data to a pis into external databases and so on alright so this is getting kind of long so we're going to go ahead and stop here we covered pretty much all the fundamentals of react I do hope you guys learned something and enjoyed this I will get this code up on github and I would also suggest checking out the ten project react course which I'll have ready in a week or so and then also I have a more simple intro to react course as well as a reactant flux course alright so thanks for watching and I'll see you next time

Channel: Traversy Media

Views: 830,762

Keywords: React, ReactJS, React.js, React Tutorial

Id: A71aqufiNtQ

Length: 60min 39sec (3639 seconds)

Published: Sat Nov 12 2016