React

January 15, 2016

{% include JB/setup %}

Webpack and React

Node

• Init

npm init -y

React

• Install React

npm install --save react react-dom

Babel

• Install Babel

Method 1:

npm install --save-dev babel-cli babel-preset-es2015 babel-preset-react

Method 2:

npm install -g babel-cli babel-preset-es2015 babel-preset-react

• Presets

Method 1: Add .babelrc

{
    "presets": ["es2015", "react"]
}

Method 2: Use via package.json

{
  ...
  "babel": {
    "presets": ["es2015", "react"]
  }
  ...
}

Plugins

• Run Babel to precompile jsx

For directory run this. By default JSX files with a .js extension are transformed.

./node_modules/babel-cli/bin/babel.js --presets es2015,react --watch src/ --out-dir lib/

For single file run this.

./node_modules/babel-cli/bin/babel.js example.js --presets es2015,react --out-dir lib/

Tooling Integration

webpack

• Install webpack

npm install webpack webpack-dev-server -g

• Install loader

npm install --save-dev babel-loader babel-core css-loader style-loader

• Edit config

vi webpack.config.js

module.exports = {
  // add resolve.extensions. '' is needed to allow imports
  // without an extension. Note the .'s before extensions!!!
  // the matching will fail without!
  resolve: {
    // auto append extensions. we can require modules without extensions
    extensions: ['', '.js', '.jsx']
  },
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style!css"
      },

      // Set up jsx. This accepts js too thanks to RegExp
      {
        test: /\.jsx?$/,
        // Enable caching for improved performance during development
        // It uses default OS directory by default. If you need something
        // more custom, pass a path to it. I.e., babel?cacheDirectory=<path>
        loader: "babel?cacheDirectory"
      }
    ]
  }
};

• Build bundle

webpack-dev-server --progress --colors

Or

webpack --progress --colors --display-error-details

webpack

Browsersync (Use webpack Instead)

• Install Browsersync

npm install -g browser-sync

• Add to package.json

{
  ...
  "scripts": {
    "dev": "browser-sync start --server --files \"*.*\""
  },
  ...
}

• Run Browsersync

npm run dev

React Examples

• basic-jsx-precompile

npm install --save-dev babel-cli babel-preset-es2015 babel-preset-react
cd ~/local/src/react-0.14.6/examples/basic-jsx-precompile/
./node_modules/babel-cli/bin/babel.js example.js --presets es2015,react --out-dir build/
cd ~/local/src/react-0.14.6/
browser-sync start --server --files "*.*"

Redux

npm install --save redux react-redux
npm install --save-dev redux-devtools

Redux Examples

Redux Examples