てくてくあるく

WordPress の テーマ とか プラグイン に ついて 勉強しています

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 と 表示されました

とりあえず 今日の目標は完了です!!

参考

I referred to ReactJSで作る今時のSPA入門（基本編）.
https://qiita.com/teradonburi/items/fb91e5feacab5071cfef

Related Article

React を 触ってみた (8) – 記事一覧 を 表示

詳細へ »

React を 触ってみた (6) – コンポーネント の 再利用

詳細へ »

Gutenberg の カスタムブロック を 作ってみる (create-guten-block)

詳細へ »