HighBridge’s blog

勉強の記録

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を用いると環境を手軽にカスタマイズができる。