1. プロジェクトの作成 - Create React App

1-1. Create React App のインストール

公式 : create-react-app

1-1-1. インストールとローカル確認

# カレントディレクトリ : ~/.
npm i -g create-react-app
create-react-app publish-react-project-advanced
cd publish-react-project-advanced
npm start

http://localhost:3000 を開くと、 publish-react-project-advanced の内容が表示されます。

+ npm のはじめかた

2. Create React App - CSS のカスタマイズ

2-1. CSS → Sass

publish-react-project-advanced を、カスタマイズしてみます。

2-1-1. npmモジュール - node-sass-chokidar のインストール

# カレントディレクトリ : ~/polyreact
npm install node-sass-chokidar --save-dev

2-1-2. npmモジュール - npm-run-all のインストール

# カレントディレクトリ : ~/polyreact
npm install npm-run-all --save-dev

2-1-3. package.json - script の編集

# ファイルパス : ~/publish-react-project-advanced/package.json
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build": "npm run build-css && react-scripts build",
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",

2-1-4. カスタマイズ用 Sass ファイルをプロジェクトへ追加

/* ファイルパス : ~/publish-react-project-advanced/src/Custom.sass */
body
  background: powderblue
# ファイルパス : ~/publish-react-project-advanced/src/App.js
import './App.css';
+ import './Custom.css'

npm start 実行により、/src フォルダ以下の .sass ファイルが、.css に変換されます。

http://localhost:3000 を開くと、 polyreact の内容が表示されます。

見本 : koheishingaihq.github.io/create-react-app-with-sass

create-react-app-with-sass-screen-shot

+ node-sass-chokidar とは
+ npm-run-all とは

3. Create React App - Redux の導入

3-1. Create React App + Redux

publish-react-project-advanced を、カスタマイズしてみます。

3-2. yarnモジュール - redux とその他のインストール

# カレントディレクトリ : ~/publish-react-project-advanced
yarn add redux react-redux react-router-dom react-router-redux@next redux-thunk

3-3. フォルダとjsファイル - modules の作成

# カレントディレクトリ : ~/publish-react-project-advanced/src
mkdir modules
// ファイルパス : ~/publish-react-project-advanced/src/modules/index.js
import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'

export default combineReducers({
  routing: routerReducer
})

3-4. jsファイル - store.js の追加

// ファイルパス : ~/publish-react-project-advanced/src/store.js
import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './modules'

export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [
  thunk,
  routerMiddleware(history)
]

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.devToolsExtension

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension())
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middleware),
  ...enhancers
)

const store = createStore(
  rootReducer,
  initialState,
  composedEnhancers
)

export default store

3-5. jsファイル - index.js の編集

# ファイルパス : ~/publish-react-project-advanced/src/index.js
+ import { Provider } from 'react-redux';
+ import { ConnectedRouter } from 'react-router-redux';
+ import store, { history } from './store';

3-6. jsファイル - app.js の編集

# ファイルパス : ~/publish-react-project-advanced/src/app.js
+ import { Route, Link } from 'react-router-dom';

4. Create React App - Routing の実装

4-1. Routing → Create React App

publish-react-project-advanced を、カスタマイズしてみます。

4-1-1. jsファイル - index.js の編集

# ファイルパス : ~/publish-react-project-advanced/src/index.js
- ReactDOM.render(<App />, document.getElementById('root'));
+ ReactDOM.render(
+   <Provider store={store}>
+     <ConnectedRouter history={history}>
+       <div>
+         <App />
+       </div>
+     </ConnectedRouter>
+   </Provider>,
+ document.getElementById('root'));

4-1-2. フォルダとjsファイル - container の作成

# カレントディレクトリ : ~/publish-react-project-advanced/src
mkdir container
// ファイルパス : ~/publish-react-project-advanced/src/container/featured.js
import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom'

class Featured extends Component {
  render() {
    return (
      <p>Featured</p>
    );
  }
}

export default Featured;
// ファイルパス : ~/publish-react-project-advanced/src/container/About.js
import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom'

class About extends Component {
  render() {
    return (
      <p>About</p>
    );
  }
}

export default About;
// ファイルパス : ~/publish-react-project-advanced/src/container/Article.js
import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom'

class Article extends Component {
  render() {
    return (
      <p>Article</p>
    );
  }
}

export default Article;

4-1-3. jsファイル - App.js の編集

# ファイルパス : ~/publish-react-project-advanced/src/app.js
+ import Featured from './container/Featured.js';
+ import About from './container/About.js';
+ import Article from './container/Article.js';
  import logo from './logo.svg';
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
+         <Link to="/"><p>Featured</p></Link>
+         <Link to="/about"><p>About</p></Link>
+         <Link to="/article"><p>Article</p></Link>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
+         <Route exact path="/" component={Featured} />
+         <Route exact path="/about" component={About} />
+         <Route exact path="/article" component={Article} />

http://localhost:3000 を開くと、 polyreact の内容が表示されます。

見本 : koheishingaihq.github.io/routing-on-create-react-app

routing-on-crate-react-app-screen-shot

5. デザイン調整

5-1. GitHub

5-2. Screen Shot

/ : Featured

after-design-featured

/about : About

after-design-about

/article : Article

after-design-article

6. GitHub へのデプロイ

6-1. URLパス → ハッシュ

6-1-1. GitHub

#/ : Featured

after-hash-featured

#/about : About

after-hash-about

#/article : Article

after-hash-article

6-2. 事前準備

# カレントディレクトリ : ~/publish-react-app-advanced
npm i gh-pages --save-dev
# ファイルパス : ~/package.json
  {
    "name": "create-react-app",
    "version": "0.1.0",
+   "homepage": "https://[username].github.io/[your-repository-name]",

    "scripts": {
+     "deploy": "npm run build && gh-pages -d build"

6-3. デプロイ

# カレントディレクトリ : ~/create-react-project
npm run deploy

7. 公開完了

見本 : koheishingaihq.github.io/publish-react-project

publish-react-project