React + Babel + Webpackのチュートリアル
WordPressの1ページをReactを使って開発したいと勉強しているときの覚書。
環境: CentOS 7.6, node v11.14.0
今まで通りPHPでさくっと作れるけれど下記理由で今に至る
まずはReact公式サイトを読む
そこからリンクされている記事を参考にする。
$ cd react-demo/
$ npm init -y
各種ディレクトリ作成
$ mkdir public src dist
index.htmlはGistのを流し込む。
$ vi public/index.html
$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
Babelの設定ファイルを作る
$ vi .babelrc
$ npm install --save-dev webpack webpack-cli babel-loader
設定ファイルを作る
$ webpack.config.js
$ 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
【関連記事】
環境: 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」が表示されているはず。
【関連記事】