Reactに関連する得体の知れないものたち
フロントエンジニア初心者な僕が、Reactを触ってみて、フロントラビリンスに迷い込んだので、わかったことから書いていこうかと思います。
書き出したばかりのため、恐ろしく簡単な文章です。
こんな要素があるんだなーくらいで流しちゃってください。(2016/09/27)
- React.js
- React-Router
- Redux
- babel
- webpack
- eslint
- npm(package.json)
- ES6(ES2015)
- browserify
- dotenv
- 番外編
- 今抱えてる問題
React.js
僕の解釈。
- Jsのフレームワークで、jqueryみたいなdom操作ができるよ。
- ちょっと前から流行ってるコンポーネント化できるよ(コンポーネント化しろよ的な)
- シングルページで作ろうね。
- HTMLもjs内に持っちゃうよ。
こんな感じ。
詳しくはここなんかみてもらったらわかりやすいかも。
React-Router
- ページ遷移用のモジュール
- URL直叩きするとNOT FOUNDになるのを回避する方法
サンプル
// 下記の感じでaタグのリンクが生成される感じ。
<Link to={{ pathname: '/add' }} className="mdl-navigation__link">追加</Link>
// ルートとなるjsに下記みたいな感じで、表示するコンポーネントを、pathで対応付けて宣言
import { Router, Route } from 'react-router';
render((
<Router history={browserHistory}>
<Route path="/" component={IndexPage} />
<Route path="/add" component={AddPage} />
<Route path="/:id" component={DetailPage} />
</Router>
),
document.getElementById('root')
);
// onclickで遷移させたい時とか。(eはいらないかも)
import { Link, browserHistory } from 'react-router';
class Jump extends Component {
showDetail(e, id) {
browserHistory.push(`/ ${id}`);
}
render() {
return (
<div id={ this.props.key } onClick={(e) => {this.showDetail(e, this.props.key);}} >
jump
</div>
);
}
}
Redux
Reduxは、Fluxの派生したもの。
Fluxとは、アーキテクチャ(Observer パターン)を実現させるもの。
構造化して、viewとactionとstoreを明確に分離させる。
reactとreduxを繋げるために、
* react
* redux
* react−redux
が必要。
react-routerで、遷移を制御している場合で、ページの状態もreduxに管理したい場合は、上記に加えて
* react-router
* react-router-redux(他にも類似のものがある)
が必要。
(現在調査中で、別途まとめます)
babel
- ES6形式のコードを、従来の規格のコードに変換してくれるツール。
Webpack
僕の解釈
- コンポーネントごとに作ったjsとかをビルドしてくれる。
- ミニファイして、いっこにまとめてくれる。
- mapファイルができて、静的ファイルだけでアクセスしようとすると怒られる
(mapファイル消したら怒られなくなる) -
ここにまとまってますが、gruntやgulpを使わないでビルドする存在らしい。
(↑機能フラグの内容ありがたい！) -
npm install -g webpackで、グローバルインストールしておかないと、webpackコマンド使えない(?)
devだけでもokって記載がちょこちょこ見受けられたので、書いてみる。
watchしたら怒られた。
webpack --watch 実行すると下記のエラーで怒られた。
ERROR in ./src/App.css
Module parse failed: xxxx/src/App.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
対策
module: {
/* loaderの設定 */
loaders: [
{
test: /\.js$/, // 対象となるファイルの拡張子（正規表現可）
exclude: /node_modules/, // 除外するファイル/ディレクトリ（正規表現可）
loader: 'babel-loader', // 使用するloader
query: {
presets: ['es2015', 'react']
}
},
// 下記を追記
{ test: /\.css$/, loader: "style!css" },
{ test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
{ test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
{ test: /\.svg$/, loader: "file" }
// ここまで
]
},
index.htmlを生成させたくない。
webpack使って、index.htmlは自分で用意したい場合
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html', //出力ファイル名
template: './index.html' //templateの場所
})
]
eslint
僕の解釈
- ご存知の方も多いと思うが、チェックツール
ここらへんを参考に、設定しました。
何も考えずにインストールして使おうとすると、nodeをチェックするような状態になりエラーが大量にでます。
browserify
僕の解釈
- webpackと同業者でビルドする人？
- webpack使うため出番なし？
番外編
間違ってインストールしちゃったやつを消す
インストールと同じように、uninstallに、--save-devオプションでパッケージから削除
npm uninstall --save-dev browserify
環境ごとに定数を変えたい
開発環境や、ステージング、本番で、APIのエンドポイントを変えたい場合に、
let url = "http://127.0.0.1:8000/api/";
if (__PRO__) {
url = "http://ステージングのURL/pr/api/";
}
process.env.url = url;
render((
<Router history={browserHistory}>
<Route path="/" component={IndexPage}/>
<Route path="/add" component={AddPage}/>
<Route path="/:id" component={DetailPage}/>
</Router>
),
document.getElementById('root')
);
っと、processに追加。
他のコンポーネントから、process.env.urlでアクセスできるようになる。
__PRO__は、
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
__PRO__: JSON.stringify(JSON.parse(process.env.BUILD_PRO || 'true'))
});
に追加。
今抱えてる問題
ReduxやらFluxやらが色々ありすぎ
サンプルもわかりにくくて、迷走中