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 の内容が表示されます。
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 の内容が表示されます。
+ 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 の内容が表示されます。
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. 公開完了