Setup react build tools

react-env-setup.md

Do a blog post on this, as it’s so annoying to re-remember!

1 Set up libraries & dependencies

Set up blank project folder:

• npm init (and follow the prompts)
• npm install react react-dom —save
• npm install webpack webpack-dev-server -g
• npm install babel -g
• npm install babel-loader babel-core babel-preset-es2015 babel-preset-react

2 Configuration

touch

• index.html
• main.js (entry point in to our app)
• webpack.config.js
• Your app files (e.g. App.js)

3 in webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    path: './',
    filename: ‘bundle.js'
  },
  devServer: {
    inline: true,
    port: 3333
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}

4 in package.json

Write script:

“start”: “webpack-dev-server”.

then just run webpack and you’ll have a dev-server up and running.

5 A bit about module writing?