Vue.js にも小慣れて来たので React に入門しました
ついでに webpack4 も使ってみたのでそのメモです
コードはここにあります
https://github.com/tkhr0/hello-react
docker-compose.yml
、あります
基本方針
ES2015 で書いて webpack を使って babel でコンパイルします。
バージョンは webpack4 の React16 です。
設定ファイル
package.json
最近 babel を使う時は @babel
のパッケージを指定するみたいですね。
{
"dependencies": {
"@babel/core": "^7.0.0-beta.42",
"@babel/preset-env": "^7.0.0-beta.42",
"@babel/preset-react": "^7.0.0-beta.42",
"babel-loader": "^8.0.0-beta",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13"
}
}
babel-lader
のバージョンに ^8.0.0-beta
を指定しないと、コンパイル時にバージョン不足で怒られるので注意です
それ以外はパッケージ名指定だけで大丈夫でした
.babelrc
babel のコンパイル設定ファイルです
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["last 2 versions"]
},
"modules": false
}],
"@babel/react"
]
}
presets
の指定が @babel/~
になります。
preset-env
を使うとトランスパイルをよしなにやってくれるみたいなので便利。
具体的にやるのは対応したいブラウザバージョンを指定するだけ。
preset-env
に "modules": false
を指定すると webpack の tree shakeing が使えます
webpack
webpack の設定ファイルです
mode
が新しいところですね
development
or production
を指定できます
production
だと色々最適化してくれるみたいです
module.exports = {
mode: 'development',
entry: './app/src/app.jsx',
output: {
path: `${__dirname}/app/dist/`,
filename: 'main.js'
},
module: {
rules: [
{
test: [/\.js$/, /\.jsx$/],
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
}
]
}
]
}
.jsx
に対して loader: 'babel-loader'
を指定します
React コード
ES2015 で書いていきます
これだけ書けばコンポーネントを表示できます
import React from 'react';
import ReactDom from 'react-dom';
// コンポーネントを作る
class App extends React.Component {
render () {
return <p> Hello React!</p>;
}
}
// マウントする
document.addEventListener('DOMContentLoaded', () => {
ReactDom.render(<App />, document.getElementById('app'));
})
コンポーネントを作るところ
class App extends React.Component {
}
React のバージョンによっていくつか書き方があるみたいですが、 16ではこの書き方をするみたいです
React.Component
を継承したクラスを作ります
クラス名がそのままタグ名になるので命名が大事ですね
このコンポーネントは <App />
で呼び出します
コンポーネントのDOM
render () {
return <p> Hello React!</p>;
}
render
メソッドの戻り値として DOM を返します
複数行の場合はかっこで括ります
render () {
return (
<div>
<p> Hello React!</p>
<p> Hello React!</p>
</div>
);
}
トップレベルのタグは1つだけににします
.vue
の <template></template>
と同じですね
return (
<p> Hello React!</p> // これはだめ
<p> Hello React!</p>
);
マウント
ReactDom.render()
を使います
ReactDom.render(<App />, document.getElementById('app'));
これで <App />
を document.getElementById('app')
の下にマウントします
<App />
は class App extends React.Component {}
です
Vue.js で書くなら
new Vue({
el: '#app',
components: { App }
})
かな(未検証)
コンパイル
yarn run webpack
で app/dist
以下に main.js
が生成されます
html ファイル
これをブラウザで開いて Hello React!
と出れば成功です
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>hello react</title>
<script src="app/dist/main.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
js読み込み
<script src="app/dist/main.js"></script>
コンパイルしたファイルを読み込みます
マウントポイント
<div id="app">
</div>
ここに先ほどの <App />
が入ります
document.getElementById('app')
してるからですね
まとめ
React より babel 周りの情報が錯綜してるのが辛かった
React は Vue.js に比べるととっつきにくいイメージがありましたが、触ってみたら全然そんなことなかったです
まだ入り口だからかな
ただ .jsx
記法、見慣れるまで違和感 MAX ですね
次はコンポーネントの入れ子のやり方を知りたい