REACT JS TUTORIAL #1 - Reactjs Javascript Introduction & Workspace Setup

Key Takeaways

I am really excited about this series on react I've been wanting to do it for a year I've been coding react 40 hours a week working on react apps for at least a year now and I'm loving the tool loving the Frameworks you build with react and it it just changes the way that you think there's several Concepts that react introduces that drastically changes the way you approach building web apps and building stable web apps uh so I really like it I I think you'll love it as well like I said changes the way you think uh for the better so let's get into it only prerequisites for watching this is you need to know a little bit of webpack which I just did a webpack video so you can get up to speed and you'll want to know es6 I have a few videos on es6 as well you don't have to master es6 you just have to kind of generally know what the concepts are so go watch those videos if you haven't seen them and then let's get into react so all my code will be in a GitHub repo for this whole series we're going to start off in the basic react folder and I did a little bit to add on to where we piced we left off with the webpack video I've installed some Babel stuff Babel is is a great tool for transpiling our react code which is jsx and then it'll also transpile our es6 code at the same time and then this will go all the way back to at least IE8 support my company supports IE8 so I can tell you that all the code we're doing here does work in IE8 uh so that's great um and we got those installed and here's what the webpack config looks like the biggest change is you see I've added a loader here so anything that's a JS file gets run through the babble loader with the exception of node modules and Bower components should we have those um and then they'll basically transpile react jsx transpile es6 code and we're also going to do some bleeding edge features that might not be fully Incorporated yet into es 2015 just in case you want to use those we probably won't get into those in this video we're going to convert some react HTML attributes we're going to add class properties D6 which is a great feature we're also going to be able to use decorators so there we go that's um that's our transpiling and now we just have to run webpack to build our code you can see we're basically taking client JS up here and we're transpiling it down to be client MJS which is all of our code which is right there so here's our index HTML we simply have an app div div ID app that's it our entire app is going to render into there and then our client MJS is of course we're loading that so let's go and run npm install get all that going that's good oh yeah I already ran npm install and we should just be able to run webpack there we go at trans pilot we could also run webpack watch and that I'll watch our code for changes and as we save it'll continue to rechange so I'll take the client Js and you can see that it will well there were no changes there so it didn't re it didn't retr pile let me add an S you can see there we go retrans piled everything so we're going let's go and look at this client JS now and start breaking down the extreme basics of react app we're going to import react we're going to import react Dom which is our rendering engine now react is great in that you don't have to render it to HTML you can render to a whole bunch of stuff you can render to a a string uh you can render it to the Dom which is our active web page is what we're using here and the actual rendering engine is separate from the react syntax which is very cool concept uh that makes it the code you write extremely versatile even towards Native apps and things like that so the first thing we're going to do is we're going to create a layout component or layout class we're extending the react component uh the core of react is everything is a component if you were look at an index HTML everything is an element in HTML it's a body element with a div element and that's kind of the concept behind react components everything is a component instead of an element so in this case we have a layout component and at the very basic you need a render method for a component so the render method is hey what are we spitting out and here's the jsx part of it which will freak you out at first is anything wrapped in paren can convert HTML to JavaScript created elements so in JavaScript you can do document create elements you know now I just made a div and then I can do you know ver div equals and I can go div. HTML equals some content so this is basically going to transpile down to stuff like that but that's a real pain to type so jsx allows you to type something that's much more familiar you can get great syntax highlighting on it if you install a jsx plugin to whatever text editor you're using atom or Sublime and it'll transpile it down so at first it feels very awkward because you're kind of thinking aren't I blending HTML with JavaScript and then you finally realize no JavaScript creates HTML elements all the time this is just an easy way to do it day in day out it makes it easy for the developer and then if you ever want render a component you use it as if it were an HTML tag so just like this I'm telling now here's my component for my whole layout I'm going to go get the app element which is this guy right here my ID of app and I'm going to render my layout into app and that's my react app okay weback is running and then let's go ahead open up my file here my HTML file and there you go it works so I can again go it's working transpiled it it's working okay great so let's wrap up our workspace and our workflow here um obviously we'll want to get some kind of live reload happening and webpack Dev server is kind of the standard way of doing that so let's go ahead and go uh npm install webpack Deb server and let's go ahead and get maybe an npm runev command going so weback Dev server is running and let's go so now we could actually run let me install this globally as well which I won't be using but I'll do it for now let's get webpack Dev server installed globally so I have the webpack dev server command actually I need to give it a Content base so since I don't want to serve this folder that I'm in right now I want to serve the source folder so I'm just going to go contentbase is source so that way it's going to serve index.html will be the root of that so now I can actually go to Local Host 880 and there we go I have Local Host 8080 working let me go ahead and get a split screen going on now but I don't have live reload up yet you can do two things by default you can go the iframe mode which is just webpack Dev server and that's index.html and you'll see this loader bar up there it'll automatically load your app into a brand new iframe every time so let's go to working it's going to recompile reload so that's kind of smooth if that works for you straight out of the back that's great another thing you can do is you can add the inline flag and hot flag hot will uh help it do inline a little bit better so if you had inline and hot then you're not going to have that top and it's just going to automatically do it in line which is basically live reload so we're going to go go ahead and take that command we're going to just go ahead and make that's kind of a mouthful to type every time so let's go and add that to our package Json on let's go to our scripts let's make a Dev so there we go npm run Dev now we'll run this command for us excellent npm run Dev gets our full webpack Dev server running and we're up and rolling only other thing I'm going to change is I don't want to have all my developers have to do an npm install Global of webpack Dev server so so I'm actually going to reference web the node modules bin you can see that it installs a command of webpack devs or it installs a an executable webpack Dev server as well so I can actually execute this command with Slash so I'm going to go slash node modules bin webpack Dev server and that's taken care of by my package now so now I can actually uninstall G webpack Dev server going to uninstall that one and now npm runev will still work because I'm referencing the one that's in my repository so that's a little bit of a cleaner way at first with nodejs we always had everybody install a global for everything and now I just think it's much cleaner to install it with your package install it locally to your app that way the the exact version you need for your app is is installed in your app folder and then you run it with a node script npm runev or npm start uh is kind of the standard choices that you would pick so there we go that's running that's our setup for react let's actually in the next video get into all these components and how to work with them