React Router: Development Environment Setup

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!

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?

:)