React Router: Development Environment Setup
In this lesson we'll install our dependencies and setup a simple build process for converting our ES6 into ES5 using Babel and Webpack for the rest of the react-router lessons.
[00:00] Hey, guys. In this video, we are going to set up our development environment for working with React Router. We're going to go ahead and npm-init to create our package json. We'll just enter through all this, clear this out. We're going to install React, ReactDOM, and React Router. We'll go ahead and save those.
[00:25] For our build process, we're going to go ahead and install Webpack, webpack-dev-server, babel-core, babel-loader, and then we're going to have a couple presets -- preset-es2015 and babel-preset-react. We're going to save those to our dev dependencies. Cool.
[00:58] Now that those are installed, we're going to go ahead and touch a .babelrc file and a webpack.config.js file. We're also going to make a directory here called source, and inside of that, we're going to touch index.html, app.js, and main.js. Most of our work will be in app.js, and main.js will just consume app.js. We'll go ahead and create those and jump over here to our project.
[01:32] In app.js, we're going to create a React component. We're going to import React from React, and we're going to go ahead and create a stateless function here. We'll return an h1 that says "hello world." Then we'll go ahead and export that by default.
[01:53] Then over here in our main.js, we're going to import React, we're going to import ReactDOM, and, of course, we're going to import our app component from app. We're going to ReactDOM render our app component to document.getElementByID. We're going to call that "app."
[02:20] Here, in our index, we're going to create a quick HTML, say React Router, and we're going to create our app div or target for our main component. Then we're going to have a script, and its source is going to be bundle.js, and that's going to be the compiled JavaScript that we're going to create from Webpack.
[02:45] We're going to jump over to our babelrc, and we're going to create a very simple object here with a key of presets, which is going to be an array. In there, we're just going to have each of our presets, so es2015 and React.
[03:01] We'll save that and we'll go ahead and set up our Webpack config. I've got a snippet for this as to not bore you, but our entry point is going to be our source/main.js. For our output, our path is going to be source. We're going to run everything out of there. Then our final name is going to be bundle.js, which is expected by our index HTML.
[03:32] Our content base for our dev server, this is basically where we want to run everything out of, so we're going to run everything out of that source directory. Then here in our loaders, we're going to set up our test for Babel. That's simply going to be .js at the end of any file. We're going to exclude node modules, and our loader will be Babel. That will pick up on the babelrc file that we created earlier.
[03:59] The last thing we're going to do is create a start script in our package json. We're just going to say webpack-dev-server. One thing to note here is we are going to be working with React Router 2.0There are some differences between 1.0and 2.0I'll try to point those out along the way.
[04:20] Now we should be able to go ahead and just run npm-start. It says we're at local host 3333. There's our "Hello world," and if we jump back over here to our app and say, "hi world," that guy will refresh. Cool. We are ready to start working with React Router.