d46/react-playground

Gri Creative React Workshop

We will going to use React with Webpack 2 and ES6

First check your nvm is on node 7.x

Read here --> https://github.com/webpack/webpack

Install webpack as a global instead of local pack.

Create webpack.config file

Read here --> https://webpack.js.org/guides/get-started/#using-webpack-with-a-config

Browsers do not support ES6. We need to transpile our code with babel.

Read here --> http://babeljs.io/docs/setup/#installation

In step 3, We will use via config.

Setting up babel preset for react.

Setting up webpack.config

const path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve('target'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
        ]
    }
}