The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

React Router: Development Environment Setup

React Router: Development Environment Setup

4:43
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.
Watch this lesson now
Avatar
egghead.io

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.

Avatar
Chris

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!

Avatar
Dennis

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

Avatar
Yujing

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

"babel": {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ]
  },
Avatar

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.

Avatar
Joseph

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.

In reply to
Avatar
Joseph

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']
        }
      }
    ]
  }
In reply to Yujing
Avatar

which editor tools are teacher used

Avatar
Jin

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

Avatar
Ezio Auditore da Firenze

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
In reply to Jin
Avatar
Rahul

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?