React Router: Development Environment Setup

Joe Maddalone
InstructorJoe Maddalone

Share this video with your friends

Send Tweet

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.

Chris
Chris
~ 5 years ago

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!

Dennis
Dennis
~ 5 years ago

Hi Joe, I see that you have autocomplete with file suggestions when importing, which sublime extension enables that?

Joe Maddalone
Joe Maddaloneinstructor
~ 5 years ago

https://packagecontrol.io/packages/AutoFileName

Yujing Zheng
Yujing Zheng
~ 5 years ago

It might be better to just put babel configs in the package.json file like

  "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ]
  },
~ 5 years ago

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.

Joe Maddalone
Joe Maddaloneinstructor
~ 5 years ago

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.

Joe Maddalone
Joe Maddaloneinstructor
~ 5 years ago

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']
        }
      }
    ]
  }
~ 5 years ago

which editor tools are teacher used

Jin
Jin
~ 5 years ago

hi Joe, what;s the package name for that webpack config starter in package control? can't seem to find it by search webpack

Ezio Auditore da Firenze
Ezio Auditore da Firenze
~ 5 years ago

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
Rahul Shelke
Rahul Shelke
~ 5 years ago

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.

IT ONIO
IT ONIO
~ 4 years ago

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

prabhuignoto
prabhuignoto
~ 4 years ago

Any plans to update this tutorial to support latest react router.

Ettiene Grobler
Ettiene Grobler
~ 4 years ago

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.

Georgios Karametas
Georgios Karametas
~ 4 years ago

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?

:)