React + Babel + Webpackのチュートリアル

投稿日：
WordPressの１ページをReactを使って開発したいと勉強しているときの覚書。

環境： CentOS 7.6, node v11.14.0

今まで通りPHPでさくっと作れるけれど下記理由で今に至る
  • Flutterを最近使い始めたから。FlutterがインスパイアーされたReactの仮想DOMの考え方を学びたい
  • 予約システムやLINEのようなコミュニティシステムの開発は、SPA(Single Page Application)になると思う
  • そろそろ技術の淘汰が進んで学びやすくなっていそう


まずはReact公式サイトを読む


そこからリンクされている記事を参考にする。


作業環境を作る

$ mkdir react-demo
$ cd react-demo/
$ npm init -y

各種ディレクトリ作成
$ mkdir public src dist

index.htmlはGistのを流し込む。
$ vi public/index.html

Babelのインストール

Babelの公式サイトで各種パッケージの説明がある。
$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

Babelの設定ファイルを作る
$ vi .babelrc
{
  "presets": [
    "@babel/preset-env", "@babel/preset-react"
  ]
}

Webpackのインストール

まずは必要なものだけ。
$ npm install --save-dev webpack webpack-cli babel-loader

設定ファイルを作る
$ webpack.config.js
const path = require("path");
module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
};


Reactの実装

Reactをインストール
$ npm install --save react react-dom

index.jsを作ってこちらのGistを流し込む。
$ vi src/index.js

App.jsを作成して、こちらのGistを流し込む。
$ vi src/App.js
今回CSSは読み込まないので「import "./App.css";」はコメントアウト

package.jsonのscriptsにビルドコマンドを追記。
$ vi package.json
  "scripts": {
    "build": "webpack --mode=development"
  },

ビルド実行
$ npm run build

index.htmlを開くと「Hello World」が表示されているはず。



【関連記事】