てくてくあるく

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

前回は 開発環境を ととのえるところまで やったので 今回は 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

Related Article

React を 触ってみた (5) – 非同期処理 と Router

詳細へ »

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

詳細へ »