ReactWebAppの新規作成
初心者の中の初心者向けです。そんなことも知らなかったのかとか言わないでください。
create-react-appを使わず、react-appをどう作ればいいのかについて。これについては他の方がすでに記事にしているが、僕にはいまいちよくわからなかったのでなるべくシンプルにまとめてみました。
この記事がどこかの誰かの役に立つことを願って。
ここで重要なのがWebpackの存在。
Python(import hoge from 'hoge')とかprogateのreactなどとかでは、当たり前のように、import hoge from 'hoge'やconst hoge = require('hoge') と書いてソースコードを分割するが実際には、webブラウザのjsには他のプログラムを読み込む機能はないので、うまく行かない。
そこでWebpackやブラウザリフィルなどを使ってrequireやimportなどの単語がソースコード上で出てきたら、それらのソースコードを探してきて、読み込むことによって、requireやimportを行う。
更にWebpackは、それだけでなくいろいろできる。
（参照 https://ics.media/entry/12140/ https://app.codegrid.net/entry/browserify-1)
一応nodeとnpmのインストールの仕方。
sudo apt install npm nodejs -y
sudo npm install -g n
sudo n stable
sudo apt purge nodejs npm -y
reboot
node -v
npm -v
npm no such file or ...と出る場合は、rebootした後にecho export PATH=/usr/local/bin/:\$PATH >> ~/.bashrcとしてください。
| 大まかな手順 | |
|---|---|
| 0 | ディレクトリ作成 |
| 1 | npm、eslintの初期化 |
| 2 | NodePackageのインストール |
| 3 | ディレクトリ構築 |
| 4 | 書く |
| 5 | webpack.config.jsを書く |
| 6 | package.jsonに次を書き足す。 |
| 7 | webpackを実行。 |
| 8 | 生成されたindex.htmlを開く。 |
####0.ディレクトリ作成
mkdir react-app
####1.npm、eslintの初期化
npm init -y
npx eslint --init
####2.NodePackageのインストール
基本として次の13のパッケージを入れる。
react
react-dom
@babel/core
@babel/cli
@babel/preset-env
@babel/preset-react
webpack
webpack-cli
webpack-dev-server
babel-loader
css-loader
style-loader
html-webpack-plugin
グローバルインストールをしたほうが良いのかよくわからないので、一応しておきます。
sudo npm i -g react react-dom @babel/core @babel/cli @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
npm i -save react react-dom
npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
####3.ディレクトリ構築
react-app/
├── public/
│ ├── css/
│ │ └── スタイルシート
│ ├── img/
│ │ └── 画像
│ └── template/
│ └── index.html
└── src/
├── Components/
│ └── App.js
└── index.js
mkdir public src
cd public
mkdir css img template
touch template/index.html
cd ../src
mkdir Components
touch index.js Components/App.js
####4.書く
<!DOCTYPE html>
<body>
<div id="root"></div>
</body>
import React from 'react';
import ReactDOM from 'react-dom';
import App from './Components/App';
ReactDOM.render(<App />, document.getElementById('root'));
import React from 'react';
import '../../public/css/index.css';
class App extends React.Component {
render() {
return (
<div>
<h1>Hello, React</h1>
<p>Hello, React</p>
</div>
)
}
}
export default App;
h1 {
color: red;
background: yellow;
font-size: 40;
}
p {
color: yellow;
background: red;
font-size: 20px;
}
####5.webpack.config.jsを書く
cd react-app
touch webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js', !
mode: 'development',
output: {
path: path.resolve(__dirname, './'), !
filename: 'bundle.js' !
},
module: {
rules: [
{test: /\.(js)$/, use: 'babel-loader'},
{test: /\.css$/, use: ['style-loader', 'css-loader']}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/template/index.html' !
})
]
}
一応それぞれのディレクトリ構造に合わせて変えないといけないところは「！」で表した。（4箇所）
上で示したディレクトリ構造の場合は変える必要なし。コピペする場合「！」は消してください。
####6.package.jsonに次を書き足す。
...
"babel":{
"presets" : [
"@babel/preset-env",
"@babel/preset-react"
]
},
"scripts": {
"build-react-app": "webpack",
"start": "webpack-dev-server --open"
},
...
####7.webpackを実行。
cd react-app
npm run build-react-app
####8.生成されたindex.htmlを開く。
7を実行すると、reaxt-appディレクトリに
index.html
bundle.js
が生成される。
webpackによってbundle.jsにすべてがまとめられ、index.htmlではscriptタグでbundle.jsを実行するだけである。
参考
次のサイトが大変参考になりました。
Webpack for React (intro) / Vishang
https://dev.to/vish448/webpack-for-react-intro-3n01
Webpack Getting Started
https://webpack.js.org/guides/getting-started/
babel Usage Guide
https://babeljs.io/docs/en/usage