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.

Avatar
IT

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

Avatar
prabhuignoto

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

Avatar
Christiaan Westerbeek

I'm new to React and I just finished the course React Fundamentals and the follow-up course by Andrew. Now I want to continue learning React Router. This course builds on a major version difference. That means breaking changes. And probably not breaking marginally considering the React ecosystem of software. I'm therefore reluctant to start this course. Is there an up-to-date course on React Router to be expected?

In reply to egghead.io
Avatar
Ettiene Grobler

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.

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