02-env-setup

Step 2 - Environment setup

Setup

Create a package.json to manage dependencies:

npm init -y

Replace package.json contents so it looks like:

{
  "private": true,
  "scripts": {}
}

Install React dependencies:

npm install --save react react-dom

Install webpack module builder:

npm install --save-dev webpack

Install Babel dependencies for ES6+ & JSX transpiling:

npm install --save-dev babel-cli babel-preset-es2015 babel-preset-stage-0 babel-preset-react babel-loader

Install ESLint linting utility for JavaScript:

npm install --save-dev eslint babel-eslint eslint-plugin-react eslint-config-benmvp

Update package.json contents to add Babel configuration:

{
  "private": true,
  "scripts": {},
  "dependencies": ...,
  "devDependencies": ...,
  "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ]
  }
}

Create a simple webpack.config.js:

var path = require('path');

module.exports = {
    entry: './src/index',
    output: {
        path: path.join(__dirname, 'src/dist'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                loader: 'babel',
                include: path.join(__dirname, 'src')
            }
        ]
    }
};

Create a simple .eslintrc.json that uses eslint-config-benmvp to put in src directory:

{
    "extends": "benmvp"
}

Don't accidentally lint the bundle by adding .eslintignore in root directory:

# Ignore built files
/src/dist/

Build a one-time bundle with webpack (including a source map):

./node_modules/.bin/webpack --progress --colors --devtool source-map

Or instead, set webpack to watch on file changes for continuous building:

./node_modules/.bin/webpack --watch --progress --colors --devtool source-map

Add scripts to package.json to make building and linting easier:

{
  "scripts": {
      "build": "webpack --progress --colors --devtool source-map",
      "build:watch": "webpack --watch --progress --colors --devtool source-map",
      "eslint": "eslint .",
      "lint": "npm run eslint",
      "test": "npm run lint"
  }
}

Run build:watch script for webpack continuous building:

npm run build:watch

Run test script to lint:

npm test

Tasks

• Replace the <script> tags in index.html to point to webpack bundle
• Add React dependencies to the top of index.js
• Separate the components into their own files (index.js, App.js, EmailForm.js, EmailView.js, EmailList.js & EmailListItem.js), and use ES6 imports to pull in dependencies
• Add propTypes to each of the components

Next

Go to Step 3 - Fetching from server.

Resources

• React Developer Tools
• Reusable Components
• ES6 imports
• Getting Started with webpack
• Babel
• ESLint
• package.json & npm init