![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
$ npm install -g create-react-app
$ create-react-app [プロジェクト名] $ cd [プロジェクト名] $ npm start
$ rm -rf src/*
import { Router, Route, IndexRoute, IndexLink, browserHistory } from 'react-router';
:
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Top} />
<Route path='hoge' component={Hoge} />
</Route>
</Router>import { Route, BrowserRouter } from 'react-router-dom';
:
<BrowserRouter>
<div>
<Route exact={true} path='/' component={Top}/>
<Route path='hoge' component={Hoge}/>
</div>
</BrowserRouter><Route path="/one">
<IndexRedirect to="1" />
<Route path="1" component={First} />
<Route path="2" component={Second} />
</Route><Route path="/one">
<Switch>
<Route exact path="/one/1" component={First} />
<Route exact path="/one/2" component={Second} />
<Redirect to="/one/1" /> <== パスがマッチしなかった場合は最後に書くこと！
</Switch>
</Route>$ npm un -S react-router && npm i -S react-router-dom
[Action => Dispatcher => Store => View] => [Action ...
$ webpack-dev-server
$ webpack-dev-server --progress --colors
$ npm install --save-dev css-loader postcss-loader postcss-easy-import extract-text-webpack-plugin
const webpack = require('webpack');
:
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'css-loader!postcss-loader'
),
},
:
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
}
}),
],$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
{
"presets": ["es2015", "react"]
}$ create-react-app --scripts-version=react-scripts-ts [プロジェクト名] $ cd [プロジェクト名] $ npm start $ rm -rf src/*
$ mkdir [プロジェクト名] $ cd [プロジェクト名] $ npm init $ npm install --save react react-dom @types/react @types/react-dom $ npm install --save-dev webpack webpack-dev-server
:
"scripts": {
"build": "webpack --progress --colors",
"start": "webpack-dev-server"
},
:$ npm install --save-dev typescript awesome-typescript-loader source-map-loader
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
// webpackの出力をデバッグするためのsourcemapsを有効化
devtool: "source-map",
resolve: {
// 解決可能な拡張子に'.ts'と'.tsx'を追加
extensions: ["*", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
// '.ts'または'.tsx'の全てのファイルを、'awesome-typescript-loader'で扱う
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
],
rules: [
{
test: /\.tsx$/,
exclude: /node_modules/,
loader: 'awesome-typescript-loader',
}
],
},
// インポートしたモジュールのパスが下記のいずれかにマッチする場合、
// それに相当するグローバル変数が存在するものとしてそれを使用します。
// 依存性の全てを扱うことを避けることができるようになり、
// ビルド間でそれらのライブラリがキャッシュ可能になるため重要です。
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};import React from 'react';
import { render } from 'react-dom';
import App from './App';
render(
(<App />),
document.getElementById('root')
);$ npm run build $ npm start
