Setting Up A Test-Driven React Project From Scratch - Part 2: webpack niceties

This post will explore some more niceties that using webpack provides.

#ESLint

ESLint functionality is provided by way of eslint-loader:

npm install eslint-loader --save-dev

To ensure that linting only runs on your un-transpiled ES6 source files, specify the loader as a preLoader:

module: {
  preLoaders: [
    {
      test: /\.jsx?$/,
      loaders: ['eslint-loader'],
      excludes: /node_modules/
    }
  ],
 
  loaders: [
    {
      test: /\.jsx?$/,
      loaders: ['babel-loader'],
      excludes: /node_modules/
    }
  ]
}

ESLint may seem to appear to work right out of the box, but in order for it to function effectively, you need to configure ESLint to suit your coding style/needs. eslint-loader takes in a config file whose path is specified in webpack.config.js:

eslint: {
  configFile: path.resolve(__dirname, ".eslintrc");
}

In your .eslintrc (the above setting specifies it in your project root), you may wish to include at least the following sane barebones config:

{
  "ecmaFeatures": {
    "arrowFunctions": true,
    "blockBindings": true,
    "classes": true,
    "destructuring": true,
    "forOf": true,
    "modules": true,
    "jsx": true
  },
  "rules": {
    "quotes": [2, "single"],
    "strict": [2, "never"],
    "react/jsx-uses-react": 2,
    "react/jsx-uses-vars": 2,
    "react/react-in-jsx-scope": 2
  }
}

This barely scratches the surface of how ESLint can be configured. The ESLint docs are excellent.

ESLint React

eslint-plugin-react is a ESLint plugin that provides React-specific linting rules. To install:

npm install eslint-plugin-react --save-dev

Then, modify your .eslintrc file to add the following:

{
  "plugins": [ "react" ]
}

#Hot Reloading

TODO