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,
}
};