react-boilerplate: A repository from alspdx

#React project Setup

##Installing Packages and setting up dev environment

Initial React and Webpack Install and Setup

$ npm init
$ npm install react@15.5.4 react-dom@15.5.4 --save
$ npm install webpack@3.4.0 --save-dev (also must be saved globally)

Create webpack.config.js in the top-level of the project and add the following:

const webpack = require('webpack');
const { resolve } = require('path');

module.exports = {

  entry: [
    resolve(__dirname, "src") + "/index.jsx"
  ],

  output: {
    filename: 'app.bundle.js',
    path: resolve(__dirname, 'build'),
  },

  resolve: {
    extensions: ['.js', '.jsx']
  }

};

Babel and Webpack Install and Configuration

$ npm install babel-core@6.24.1 babel-loader@7.0.0 babel-preset-es2015@6.24.1 babel-preset-react@6.24.1 --save-dev

Add the following to the webpack.config.js file:

...
  resolve: {
    extensions: [ '.js', '.jsx' ]
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: [
            "es2015",
            "react"
          ]
        }
      },
    ],
  }
};

Creating Initial Components

$ touch index.jsx

index.jsx, with App component linked:

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(
  <App/>,
  document.getElementById('react-app-root')
);

Creating Nested Components $ touch App.jsx

App.jsx:

import React from "react";

function App(){
  return (
    <div>
      <span>App works!</span>
    </div>
  );
}

export default App;

Props and Prop Types

$ npm install prop-types@15.5.10 --save

Passing props from ParentComponent.jsx:

...
  return(
    <ChildComponent
      propOne="value one"
      propTwo="value two" />
    );
...

Receiving props and declaring PropTypes in ChildComponent.jsx:

import React from 'react';
import PropTypes from 'prop-types';

function ChildComponent(props) {
  return(
    <div>
      <h3>{props.propOne}</h3>
      <span>{props.propTwo}</span>
    </div>
  );
}

ChildComponent.propTypes = {
  propOne: PropTypes.string,
  propTwo: PropTypes.string
}
...

Webpack Dev Server

$ npm install webpack-dev-server@2.5.0 --save-dev (also must be saved globally)

Building

$ npm webpack

Serving

$ npm webpack-dev-server

Hot Module Replacement

$ npm install react-hot-loader@3.0.0-beta.7 --save-dev

update webpack.config.js file:

...
const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {

  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    resolve(__dirname, "src", "index.jsx")
  ],
...

add publicPath property in webpack.config.js:

...
  output: {
    filename: 'app.bundle.js',
    path: resolve(__dirname, 'build'),
    publicPath: '/'
  },
....

add config for dev tools and dev server webpack.config.js:

...
 resolve: {
    extensions: ['.js', '.jsx']
  },

  devtool: '#source-map',

  devServer: {
    hot: true,
    contentBase: resolve(__dirname, 'build'),
    publicPath: '/'
  },
...

update config rules and add plugins to rules in webpack.config.js

...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: [
            ["es2015", {"modules": false}],
            "react",
          ],
          plugins: [
            "react-hot-loader/babel"
          ]
        }
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ]
};
...

$ npm install html-webpack-plugin@2.29.0 --save-dev

ESLint Install and Setup

($ npm install eslint -g) global only!
($ npm install eslint-plugin-react -g) global only!
eslint --init

This will prompt a series of questions for eslint setup

? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? No
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON

Changes to make in .eslintrc:

...
  "indent": [
    "error",
    2
  ],
...

...
  "rules": {
    "react/jsx-uses-vars": 2,
    "react/jsx-uses-react": 2,
    "react/jsx-no-duplicate-props": 2,
    "react/jsx-no-undef": 2,
    "react/no-multi-comp": 2,
    "react/jsx-indent-props": [
        "error",
        2
      ],
    "react/jsx-pascal-case": 2,
    "react/prop-types": 2,
    "react/jsx-indent": [
        "error",
        2
    ],
    "react/jsx-key": 2,
...

Adding ESLint Scripts and Running

Adding ESLint in package.json:

...
  "scripts": {
    "lint": "eslint src/** src/**/**; exit 0",
    "lint-fix": "eslint src/** src/**/** --fix; exit 0"
...

$ npm run lint
$ npm run lint-fix

alspdx/react-boilerplate