React プロジェクトを GitHub ページとして公開する方法 ( 応用編 : Sass + Redux + ルーティング )

5
Like
2
Comment

KoheiShingaiHQ

Edited at 2017-10-09

React プロジェクト ( Sass + Redux + ルーティング ) を GitHub ページとして公開する方法

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

+ 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

5. デザイン調整

5-1. GitHub

修正内容

5-2. Screen Shot

/ : Featured

/about : About

/article : Article

6. GitHub へのデプロイ

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

6-1-1. GitHub

変更内容

#/ : Featured

#/about : About

#/article : 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

# React プロジェクト ( Sass + Redux + ルーティング ) を GitHub ページとして公開する方法
## 1. プロジェクトの作成 - *Create React App*

### 1-1. Create React App のインストール
> 公式 : [create-react-app](https://github.com/facebookincubator/create-react-app)

#### 1-1-1. インストールとローカル確認
```bash
# カレントディレクトリ : ~/.
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* のインストール
```bash
# カレントディレクトリ : ~/polyreact
npm install node-sass-chokidar --save-dev
```

#### 2-1-2. npmモジュール - *npm-run-all* のインストール
```bash
# カレントディレクトリ : ~/polyreact
npm install npm-run-all --save-dev
```

#### 2-1-3. package.json - *script* の編集
```diff
# ファイルパス : ~/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 ファイルをプロジェクトへ追加
```sass
/* ファイルパス : ~/publish-react-project-advanced/src/Custom.sass */
body
  background: powderblue
```

```diff
# ファイルパス : ~/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](https://koheishingaihq.github.io/create-react-app-with-sass)

![create-react-app-with-sass-screen-shot](https://c1.staticflickr.com/5/4465/36878306283_8811ec8516_b.jpg)

[+ node-sass-chokidar とは](https://qiita.com/KoheiShingaiHQ/items/88760658a26d9decf85e)
[+ npm-run-all とは](https://qiita.com/KoheiShingaiHQ/items/fd5a9cf43bbc71aebc8b)

## 3. Create React App - *Redux* の導入

### 3-1. Create React App + Redux
`publish-react-project-advanced` を、カスタマイズしてみます。

### 3-2. yarnモジュール - *redux* とその他のインストール
```bash
# カレントディレクトリ : ~/publish-react-project-advanced
yarn add redux react-redux react-router-dom react-router-redux@next redux-thunk
```

### 3-3. フォルダとjsファイル - *modules* の作成
```bash
# カレントディレクトリ : ~/publish-react-project-advanced/src
mkdir modules
```

```js
// ファイルパス : ~/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* の追加
```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* の編集
```diff
# ファイルパス : ~/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* の編集
```diff
# ファイルパス : ~/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* の編集
```diff
# ファイルパス : ~/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* の作成
```bash
# カレントディレクトリ : ~/publish-react-project-advanced/src
mkdir container
```

```js
// ファイルパス : ~/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;
```

```js
// ファイルパス : ~/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;
```

```js
// ファイルパス : ~/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* の編集
```diff
# ファイルパス : ~/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](https://koheishingaihq.github.io/routing-on-create-react-app)

![routing-on-crate-react-app-screen-shot](https://c1.staticflickr.com/5/4497/36880247443_0c716eb73c_b.jpg)

## 5. デザイン調整
### 5-1. GitHub
+ [修正内容](https://github.com/KoheiShingaiHQ/publish-react-project/commit/3aec6e0c807c10b4ebb1138c3891f9163458e073)

### 5-2. Screen Shot
#### / : Featured
![after-design-featured](https://c1.staticflickr.com/5/4453/37524311516_22d26c6752_b.jpg)

#### /about : About
![after-design-about](https://c1.staticflickr.com/5/4444/23720635698_5a9be8c8cc_b.jpg)

#### /article : Article
![after-design-article](https://c1.staticflickr.com/5/4474/23720636618_d127ab423a_b.jpg)

## 6. GitHub へのデプロイ
### 6-1. URLパス → ハッシュ
#### 6-1-1. GitHub
* [変更内容](https://github.com/KoheiShingaiHQ/publish-react-project/commit/02e03a5c09f6bb24e873845adc4d95af9a20a3d7)

##### #/ : Featured
![after-hash-featured](https://c1.staticflickr.com/5/4512/37573145681_4ef03be7be_b.jpg)

##### #/about : About
![after-hash-about](https://c1.staticflickr.com/5/4448/37573146031_08c75cec20_b.jpg)

##### #/article : Article
![after-hash-article](https://c1.staticflickr.com/5/4468/36862910134_48e0515184_b.jpg)

### 6-2. 事前準備
```bash
# カレントディレクトリ : ~/publish-react-app-advanced
npm i gh-pages --save-dev
```

```diff
# ファイルパス : ~/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. デプロイ
```diff
# カレントディレクトリ : ~/create-react-project
npm run deploy
```

## 7. 公開完了
> 見本 : [koheishingaiHQ.github.io/publish-react-project](https://koheishingaihq.github.io/publish-react-project)

![publish-react-project](https://c1.staticflickr.com/5/4453/37524311516_22d26c6752_b.jpg)

KoheiShingaiHQ

8Contribution

他の言語

英語 : How to publish React project as GitHub pages ( Advanced : with Sass + Redux + Routing )

KoheiShingaiHQ

8contribution

2017-10-09 04:19

React プロジェクトを GitHub ページとして公開する方法 ( 応用編 : Sass + Redux + ルーティング )

React プロジェクト ( Sass + Redux + ルーティング ) を GitHub ページとして公開する方法

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

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

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

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

2-1. CSS → Sass

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

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

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

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

3. Create React App - Redux の導入

3-1. Create React App + Redux

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

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

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

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

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

4. Create React App - Routing の実装

4-1. Routing → Create React App

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

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

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

5. デザイン調整

5-1. GitHub

5-2. Screen Shot

/ : Featured

/about : About

/article : Article

6. GitHub へのデプロイ

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

6-1-1. GitHub

#/ : Featured

#/about : About

#/article : Article

6-2. 事前準備

6-3. デプロイ

7. 公開完了

人気の投稿

他の言語

関連

Report article

Feedback