React を 触ってみた (2) – React + babel + webpack
前回は 開発環境を ととのえるところまで やったので 今回は 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