Skip to content
A starter project for React.js app
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
dist
src
.gitignore
LICENSE
README.md
package.json

README.md

starter-node-react

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

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
You can’t perform that action at this time.