【React-Redux】webpackで環境構築編 [初心者入門1日目]

$ mkdir uriel
$ cd uriel

$ npm init

$ npm init                                                                                                                                                                                                                           [~/dev/labo/uriel][master]
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (uriel)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/hiro/dev/labo/uriel/package.json:

{
  "name": "uriel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

Is this OK? (yes) yes

$ npm install --save react react-dom react-redux redux

$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-eslint babel-loader eslint eslint-loader eslint-plugin-react file-loader html-webpack-plugin webpack webpack-cli webpack-dev-server

"dependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.0.6",
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-react": "^7.18.3",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

{
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jquery": true
  },
  "rules": {},
  "parser": "babel-eslint",
  "plugins": [
    "react"
  ],
  "ecmaFeatures": {
    "arrowFunctions": true,
    "jsx": true
  }
}

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

module.exports = {
  context: __dirname,
  entry: [
    './src/index.jsx',
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js',
  },
  module: {
    rules: [
      { test: /\.jsx$/, enforce: 'pre', exclude: /node_modules/, loader: 'eslint-loader' },
      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader'] },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      inject: 'body',
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        eslint: {
          configFile: './.eslintrc',
        },
      },
    }),
  ],
};

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --hot --inline --progress --colors --history-api-fallback",
    "build": "webpack --mode production --progress --colors"
  },

// カウンター増減
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

import * as types from '../constants/ActionTypes';

const increment = () => {
  return { type: types.INCREMENT };
};

const decrement = () => {
  return { type: types.DECREMENT };
};

const CounterActions = {
  increment,
  decrement,
};

export default CounterActions;

import * as types from '../constants/ActionTypes';

const initialState = {
  value: 0,
};

const counter = (state = initialState, action) => {
  switch (action.type) {
    case types.INCREMENT:
      return { value: state.value + 1 };
    case types.DECREMENT:
      return { value: state.value - 1 };
    default:
      return state;
  }
};

export default counter;

import { combineReducers } from 'redux';

import counter from './counter';

const rootReducer = () => combineReducers({
  counter,
});

export default rootReducer;

import React from 'react'

import Header from './header/HeaderComponent';
import Counter from './counter/CounterComponent';

const AppContainer = () => {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  );
};

import React, { useMemo } from 'react'
import { bindActionCreators } from 'redux'
import { useDispatch, useSelector } from 'react-redux';

import Header from '../components/header/HeaderComponent';
import Counter from '../components/counter/CounterComponent';
import CounterActions from '../actions/counter';

const useActions = (actions, deps) => {
  const dispatch = useDispatch();
  return useMemo(
    () => {
      if (Array.isArray(actions)) {
        return actions.map(a => bindActionCreators(a, dispatch))
      }
      return bindActionCreators(actions, dispatch)
    },
    deps ? [dispatch, ...deps] : [dispatch]
  )
};

const AppContainer = (props) => {
  const counterActions = useActions(CounterActions);
  const counter = useSelector(state => state.counter);

  const _counterProps = { counter, counterActions, ...props };
  return (
    <div>
      <Header />
      <Counter {..._counterProps} />
    </div>
  );
};

export default AppContainer;

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

const CounterComponent = (props) => {
  const { counter, counterActions } = props;
  
  return (
    <div>
      <h2>count={counter.value}</h2>
      <button onClick={() => counterActions.increment()}>増加</button>
      <button onClick={() => counterActions.decrement()}>減少</button>
    </div>
  );
};

CounterComponent.propTypes = {
  counter: PropTypes.object.isRequired,
  counterActions: PropTypes.object.isRequired,
};

export default CounterComponent;

import React from 'react'

const HeaderComponent = () => {
  return (
    <div>
      <h1>ヘッダだYO</h1>
    </div>
  );
};

export default HeaderComponent;

import { createStore } from 'redux';
import rootReducer from '../reducers';

const configureStore = () => {
  const store = createStore(
    rootReducer(),
  );

  return store;
};

export default configureStore;

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import configureStore from '../stores/configureStore';
import App from '../container/AppContainer';

const stores = configureStore();

const render = () => {
  ReactDOM.render(
    <Provider store={stores}>
      <div>
        <App />
      </div>
    </Provider>,
    document.getElementById('root'),
  );
};

render();

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>React-Redux Boilerplate</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

$ npm start