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.
Hi Joe, I see that you have autocomplete with file suggestions when importing, which sublime extension enables that?
https://packagecontrol.io/packages/AutoFileName
It might be better to just put babel configs in the package.json file like
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
},
I'm still learning npm, webpack, etc. so I'm probably missing something obvious, however I'm having a hard time reconciling the videos (Dev Env Setup and Router, Route & Link) with the source code on github. The video setup doesn't mention any css files for formatting though the tutorial seems to be referencing shared.css. The index.html file in Router, Route & Link references these scripts, but I don't see where the tutorial explains them:
<script src="/build/shared.js"></script>
<script src="/build/router-route-link.js"></script>
I tried cloning straight from github (then npm install and npm start per README.me) and notice the server.js file also references the /build/ directory and maybe some sort of routing for the various lessons -- but again, the lesson videos don't seem to provide any direction on how to interface with the code that isn't directly covered in the lesson (at least the first two videos).
I was able to setup dev env and get Router, Route & Links working (sans formatting) -- but am I missing some documentation or basic setup instructions to better interface the github source code in support of the lessons? Thanks for your help.
Webpack in the repo is set up a bit differently than the lessons in order to account for navigating to multiple lessons as root routes.
Something like:
<script src="/build/shared.js"></script>
<script src="/build/router-route-link.js"></script>
Is the equivalent of the single bundle.js from the lessons.
The only css used in the repo is as follows:
nav a {
display: block;
}
This simply lays out the anchor tags in block mode, but does not impact the functionality of any lesson in this series.
I've taken to using the .babelrc file for babel configuration, but to each his own. This could also be done in the webpack.config.js using:
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
which editor tools are teacher used
hi Joe, what;s the package name for that webpack config starter in package control? can't seem to find it by search webpack
I'm getting this error:
Module build failed: Error: Final loader didn't return a Buffer or String
at DependenciesBlock.onModuleBuild (D:\Studies\react-router\node_modules\webpack-core\lib\NormalModuleMixin.js:299:42)
at nextLoader (D:\Studies\react-router\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
at DependenciesBlock.onLoadPitchDone (D:\Studies\react-router\node_modules\webpack-core\lib\NormalModuleMixin.js:262:4)
at DependenciesBlock.loadPitch (D:\Studies\react-router\node_modules\webpack-core\lib\NormalModuleMixin.js:182:27)
at DependenciesBlock.doBuild (D:\Studies\react-router\node_modules\webpack-core\lib\NormalModuleMixin.js:241:4)
at DependenciesBlock.build (D:\Studies\react-router\node_modules\webpack\lib\NormalModule.js:84:14)
at Compilation.buildModule (D:\Studies\react-router\node_modules\webpack\lib\Compilation.js:126:9)
at D:\Studies\react-router\node_modules\webpack\lib\Compilation.js:309:10
at D:\Studies\react-router\node_modules\webpack\lib\NormalModuleFactory.js:58:13
at NormalModuleFactory.applyPluginsAsyncWaterfall (D:\Studies\react-router\node_modules\tapable\lib\Tapable.js:75:69)
@ multi main
Hi Joe,
Thanks for the tutorial. In the tutorial, you have used react-router 2.0.0, but when I am installing it in my local, the latest version is 3.0.0. Is there any major difference in between these two versions?
Also, I would recommend to update tutorial with latest modules, if major updates are there, add new feature specific tutorials in the list.
hello, i get error:
ERROR in multi (webpack)-dev-server/client?http://localhost:3333 ./src/main.js Module not found: Error: Can't resolve 'babel' in 'D:\web\javascript\core-tutori al\react\react-webpack-modern' BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'babel-loader' instead of 'babel', see https://webpack.js.org/guides/migrating/#automatic-loader-m odule-name-extension-removed @ multi (webpack)-dev-server/client?http://localhost:3333 ./src/main.js
Any plans to update this tutorial to support latest react router.
Can someone from egghead please let us know if and when this course can be updated to use the latest version of React Router? Or maybe even a new course, because a lot has changed from v2 to v4.
Ok, I just want to add here a comment for some unlucky (or stupid) guy like me who started a project from a folder like: react-router!!! Stupid, do not do this!
Then in my package.json the name property as you can imagine was react-router, so (sigh...) I got an error when installing react-router saying to me (stupid me):
Refusing to install react-router as a dependency of itself
And it had every right in the world... Disappointing huh?
:)
Hi Joe,
Thanks for doing this! It's a great tutorial, nice and clear.
Any chance you could show how to do route testing?
Thanks!