redtmp / starter-node-react

A starter project for React.js app

starter-node-react

A starter project for react-app, if you don't familiar with React with Webpack, the following links is highly recommended.

• Roadmap for learning React
• React and Webpack Cookbook - chn version

Dependencies

please use the latest version of following tools:

1. ECMAScript 6
2. React 0.14
3. React-router 1.0
4. Webpack 1.12
5. Babel 6.0
6. Koa 1.0
7. Node.js 4.1

Documentation

Server-side codes with ES6

• babel-node is selected in the server-side, which is an executable for running code via Babel that otherwise works like the node executable.

• babel-preset-es2015-node5 is selected, so that Babel can transpile ES6. The preset configures Babel so that only ES6 constructs are transpiled that missing from Node.js 5。

Client side codes with ES6 (React with ES6)

Tools:

• webpack as a client-side module build and module loader
• npm as the package manager
• Babel as a transpiler from ES6 to ES5

Dependencies:

• babel-loader enables webpack to transpile JavaScript via Babel.
• babel-preset-es2015 is a Babel preset for compiling ES6 to plain ES6.
• webpack-dev-server adds a hot-reloading development web server to webpack.

Running

Install dependencies

npm install

Build

If your app is ready, and you want to check the results, you can execute

npm run build

then the bundle.js is serving at http://localhost:300/bundle.js via your koa server, or you can use hot mode if you want to build repeatedly to check the code changes:

npm run dev

then the bundle.js is serving at http://localhost:8080/assets/bundle.js via webpack-dev-server

remember!!! you should modify the path of file bundle.js in home.html manually!

Start

npm start

Browse

Open your browser, and visit http://localhost:3000 to check the result

Reference documentations

1. Babel 6.0 released
2. Setting up Babel 6
3. Babel-loader documentation
4. webpack dev server
5. React-router 1.0 doc