React + Babel + Webpackのチュートリアル
WordPressの1ページをReactを使って開発したいと勉強しているときの覚書。
環境: CentOS 7.6, node v11.14.0
今まで通りPHPでさくっと作れるけれど下記理由で今に至る
Flutterを最近使い始めたから。FlutterがインスパイアーされたReactの仮想DOMの考え方を学びたい予約システムやLINEのようなコミュニティシステムの開発は、SPA(Single Page Application)になると思うそろそろ技術の淘汰が進んで学びやすくなっていそう
まずはReact公式サイトを読む
Create a New React App – React
そこからリンクされている記事を参考にする。
Creating a React App… From Scratch. - Noteworthy - The Journal Blog
作業環境を作る$ 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",
…
環境: CentOS 7.6, node v11.14.0
今まで通りPHPでさくっと作れるけれど下記理由で今に至る
Flutterを最近使い始めたから。FlutterがインスパイアーされたReactの仮想DOMの考え方を学びたい予約システムやLINEのようなコミュニティシステムの開発は、SPA(Single Page Application)になると思うそろそろ技術の淘汰が進んで学びやすくなっていそう
まずはReact公式サイトを読む
Create a New React App – React
そこからリンクされている記事を参考にする。
Creating a React App… From Scratch. - Noteworthy - The Journal Blog
作業環境を作る$ 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",
…