React を 触ってみた (2) – React + babel + webpack
この記事は 2018年 4月 29日 に書かれた記事です。
前回は 開発環境を ととのえるところまで やったので 今回は Hello World を 表示させるところ まで 作成していこうと思います
前回の記事
React を 触ってみた (1) – 開発環境
https://tekuaru.jack-russell.jp/2018/04/27/1694/
基本的に ページ下部に 記してある 参考にしたURL先の内容を なぞっています
自分が作業した 順に 書いていくので 無駄な作業が多く なるかもしれませんが 優しく見守っていただければと思います
React + babel + webpack の インストール
(Dir : /var/www/html/)
まずは 作成に必要な パッケージを インストールします
npm install --save-dev react react-dom babel-core babel-loader babel-plugin-transform-react-jsx babel-preset-react webpack
各々のバージョンは 以下のようになりました
"babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-plugin-transform-react-jsx": "^6.24.1", "babel-preset-react": "^6.24.1", "react": "^16.3.2", "react-dom": "^16.3.2", "webpack": "^4.6.0"
マイナーバージョン の 違いでも 書き方が変わって 動かない場合があるので このバージョンと異なる場合 各自 調べながら進めていく形になると思います
補足 : 何かエラーが出た…
パッケージを インストールしようとしたら エラーが出ちゃったよって人
エラー内に このように書かれていませんか??
ERR! Refusing to install react as a dependency of itself
前回の npm init 時に プロジェクト名を react とか つけていませんか??
パッケージ名と同じ プロジェクト名は つけられないので package.json を 編集してください
ex) react-test
補足 : git で 管理しようとしたら ものすごいファイルが 作業ツリーにある…
パッケージを インストールすると node_modules という ディレクトリ が できて その中にパッケージが 置かれているみたいです
git で 管理する場合は node_modules は 管理しなくて良いので .gitignore で 除外しておきましょう
/.gitignore
/node_modules/
ファイル作成
まずは ディレクトリ構造
今は 以下のように なっていますが 今後 ディレクトリは 増えていきます
/var/www/html/
-> resources
-> css
-> js
-> src
-> component
推奨のディレクトリ構造とは 違うので あまり参考にしないでください…
次に コードを 書いていきますが 手探りの中 作業しているので
とりあえず 今は おまじない的な感じで 参考のURL先を元に 作成します
/index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <div id="root"></div> <script type='text/javascript' src="./resources/js/index.bundle.js" async></script> </body> </html>
React で 描写するための 要素を ルートDOMノードと言うみたいです
今回は id=”root” が 振ってある div要素ですね
その内部が Reactによって 管理されるそうです
そして React から コンパイルしたファイル ( index.bundle.js ) を 読み込んでいます
次は id=”root” に 描写の指定をする ファイルですかね
( 詳しくは 違うのかもしれませんが 今は そんな感じで 捉えています )
/src/index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import Main from './component/main'
ReactDOM.render(
<Main />,
document.getElementById('root')
)
描画の内容は /src/component/main.jsx に 記述します
Hello World と 表示させる部分
/src/component/main.jsx
import React from 'react'
export default class Main extends React.Component {
render() {
return <h1>Hello World</h1>
}
}
React.Component を extends して Main という class を 作って render 関数を 呼び出すみたいです
export default というのは import した時 ( 今回は /src/index.jsx で import していますね ) に default で 読み出される という事みたいです
コンパイルして表示してみる
webpack で ビルドする為には 設定ファイル ( .babelrc & webpack.config.js ) と言うものが必要になるので 作成します
/.babelrc
{
"presets": ["react"]
}
/webpack.config.js
const path = require('path');
module.exports = {
// モードの設定
// mode: 'production',
mode: 'development',
// エントリーポイントの設定
entry: {
'index': [
path.resolve(__dirname, 'src/index.jsx'),
],
},
// 出力の設定
output: {
// 出力するファイル名
filename: '[name].bundle.js',
// 出力先のパス
path: path.resolve(__dirname, 'resources/js'),
},
// ローダーの設定
module: {
rules: [
{
// ローダーの処理対象ファイル
test: /\.(js|jsx)$/,
// ローダーの処理対象から外すディレクトリ
exclude: /node_modules/,
// 利用するローダー
use: 'babel-loader',
},
],
},
resolve: {
extensions: ['.js', '.jsx']
},
}
設定に 不安が残るのですが 多分こんな感じだと思います
コンパイル
実際に動かしてみます
node_modules/webpack/bin/webpack.js
すると
The CLI moved into a separate package: webpack-cli Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)
と表示されました
webpack-cli も パッケージとして 必要みたいです
y と 入力して インストール しましょう
僕の環境では “webpack-cli”: “^2.0.15” が インストール されました
すると /resources/js/ 以下に index.bundle.js という ファイルが生成されました
( こちらは コンパイルすれば いつでも生成されるので .gitignore に 追加しておこうと思います )
実際に 表示させてみる
First React Project
http://react/
Hello World と 表示されました
とりあえず 今日の目標は完了です!!
参考
ReactJSで作る今時のSPA入門（基本編）を参考にさせていただきました。
https://qiita.com/teradonburi/items/fb91e5feacab5071cfef
