React環境メモ
create-react-app
- create-react-appのインストール
npm install -g create-react-app
- アプリを作りたい階層に移動してからプロジェクトを作る(ここではhelloという名前で作る)
create-react-app hello
cd hello
- アプリを実行する
npm start
- いじった後、プログラムを公開する
npm run build
- webサーバーが必要になるのでserveコマンドをインストールする
npm install -g serve
- サーバーを起動する
serve -s build -p 3000
webpack
- インストール
npm install -g webpack webpack-cli
- ファイルをwebpackで1つにまとめ上げて出力をする。まずモジュールのファイルとそれを呼び出すファイルを作成し、そこから実行する例。
// calc.js export function mul(a, b) { return a * b }
// main.js import { mul } from "./calc"; const a = mul(3, 5) console.log(a)
- 実行
$ npx webpack --mode=development ./main.js
- 実行したらdistフォルダにファイルが生成される。
webpackでReact/JSXをビルドする
>>> mkdir src out >>> npm init --force >>> npm i --save-dev webpack >>> npm i --save-dev react react-dom >>> npm i --save-dev @babel/core babel-loader >>> npm i --save-dev @babel/preset-env @babel/preset-react
- webpackの設定ファイル
module.exports = { entry: './src/main.js', output: { filename: './out/bundle.js' }, module: { rules: [ { test: /.js$/, loader: 'babel-loader', options: { presets:['@babel/preset-env', '@babel/preset-react'] } } ] } }
- src/main.js
import React from 'react' import ReactDOM from 'react-dom' import {Hello} from './Hello' ReactDOM.render( <Hello />, document.getElementById('root') )
- src/Hello.js
import React from 'react' export class Hello extends React.Component { render() { return <h1>Hello!</h1> } }
$ webpack
- 生成されたのをファイルを読み込むmain.html
<!DOCTYPE html> <html><head> <meta charset="utf-8"> </head><body> <div id="root"></div> <script src="dist/out/bundle.js"></script> </body></html>
- webサーバ起動して確認する
serve
create-react-appを使えばReact/JSXの開発環境を容易に整えることができるが、構成の変更が容易ではないがwebpackを用いると環境を手軽にカスタマイズができる。