React Fundamentals: Development Environment Setup
In this lesson we'll setup a simple build process for converting our ES6 React components into ES5 using Babel and Webpack.
Transcript
Hey guys, in this video we are going to set up our development environment for working with React in ES6. So the first thing we're going to do is run npm init, we'll just enter through all these guys, clear that out. Of course we're going to need to install React as well as ReactDOM, going to go ahead and save that to our dependencies.
When we've got that installed we're going to go ahead and install a few Babel preloaders, so we've got babel-loader, babel-core, babel-preset, ES2015, another babel-preset for React. We'll go ahead and install that, and of course this is assuming that you already have Babel installed, Webpack installed, as well as Webpack dev server. OK, now that those are installed, I'm going to go ahead and set up a handful of files here.
We're going to have an index.html, we're going to have an App.js, and I'll note that that is a capital A because that's going to be our first React component. We're going to have a main.js that's going to be the entry into our application, and we're going to have a Webpack.config.js. Now again this assuming how have installed Babel, Webpack, and Webpack dev server. If you haven't, there's the commands to do so, and you can just throw on the pack -g to install those globally.
Now the first thing we're going to do is set up our Webpack config. This is the file that's going to compile all of our JavaScript and our JSX down to JavaScript, and it's also going to launch our development server. So the way this works is we're going to export our object, this is our configuration object. We're going to have an entry point that's going to be our main.js, we're going to have this output object. We're going to give that a path to output too, so that's just going to be our root path.
Then we're going to have a file name, and this is our bundled file so we are going to call this, "index.js." We're going to set up a couple arguments for our dev server. It's going to be inline true, that's going to allow it to just kind of reload on the fly. We're going to go ahead and set up a port to use, going to make that 3333. You can make that whatever you like, and here to get our loaders in place, we're going to have a module object, and we're going to have a loaders array.
We're only going to have one loader, and we're going to test for .js at the end of a file. We're going to exclude node.module so we don't go processing all of those, then our loader is going to be babel, and to get our presets in there we're going to use this query object with a key of presets which is an array of our preloaders, so ES2015 and React. So we'll save that, going to jump over to our index.html, set this up. We'll just call this setup.
We are going to have a div with an ID of app that's always going to be our target during this series, and we're going to load up our index.js which will be the bundled file that we get from Webpack. So we're going to jump over to our App.js and create our first component, so we're going to import React from React.
We're going to set up a simple class called App, we're going to return just a div that says, "Hello," then we're going to export that by default so then in our main, we're going to import React. We're also going to import ReactDOM, then we're simply going to react.DOMrender our app component to documents.getElementByID and that will be our app div, and then of course we're going to need to import our app from app.
So save that, and the last thing we need to do is jump over here to our package JSON and we're going to set up a script called, "start," and that's simply going to run Webpack dev server, so I'll save that and we'll jump back over to our terminal and we're going to go ahead and run npm start. When you see it says that our content is at localhost:3333, so I'll jump over there, localhost:3333, load that up, and we've got our "Hello."
Let me zoom that in a bit. Now if we jump over to our component and make this say "Hi," and save it, we get that reloaded there in the browser. Cool, so we are ready to start learning about React.
On this page of the site you can watch the video online React Fundamentals: Development Environment Setup with a duration of hours minute second in good quality, which was uploaded by the user Mastering React 20 February 2016, share the link with friends and acquaintances, this video has already been watched 12,084 times on youtube and it was liked by 60 viewers. Enjoy your viewing!
