This is meant to be a living document that starts with the simplest possible project and slowly adds on all the parts of the more complicated starter kits. If you step through each section, entering the code and commands by hand, you should have a much better understanding of all the moving parts that make up a modern React project.

Project Creation

yarn init

Babel

yarn add --dev babel-core babel-loader babel-preset-env babel-preset-react babel-eslint

package.json

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

Webpack

yarn add --dev webpack webpack-dev-server css-loader style-loader html-webpack-plugin

package.json

{
  ...
  "scripts": {
    "start": "webpack-dev-server"
  },
  ...
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html',
    }),
  ],
};

Dependencies

yarn add react react-dom react-router prop-types react-redux redux redux-immutable redux-thunk immutable whatwg-fetch

Testing

yarn add jest enzyme redux-mock-store react-addons-test-utils fetch-mock

ESLint

yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

.eslintrc

module.exports = {
  "extends": "airbnb",
  "env": {
    "browser": true
  },
  "rules": {
    'react/jsx-filename-extension': 0,
  }
};