Reactの覚書 | ワクガンス

React.jsの開発環境構築 webpack + babel

手順

プロジェクトのルートへ移動する
```
$ cd ~/git/node_demo/demo2
```
```
$ npm init
```
パケージ名などいくつか質問を聞かれるので適当に答える。質問が終わるとpackage.jsonが作成される。
srcディレクトリとdistディレクトリを作成する。
```
$ mkdir src dist
```
srcにはソースコードを配置。 distにはソースコードをコンパイルしたファイル(一つのjsファイル)が出力される。
babel関連のパッケージをインストールする。
```
$ npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/register
```
package.jsonにもbabelの情報が書き込まれる。

「.babelrc」ファイルを作成

$ touch .babelrc

.babelrcファイルに下記を記述

{
  "presets": [
    "@babel/preset-env", "@babel/preset-react"
  ]
}

webpackをインストール
```
$ npm i -D webpack webpack-cli
```

webpackの設定ファイルを作成し、下記の設定コードを記述

$ touch webpack.config.js


const src  = __dirname + '/src';
const dist = __dirname + '/dist';

module.exports = {
  mode: 'development',
  entry: src + '/index.jsx',

  output: {
    path: dist,
    filename: 'main.js'
  },

  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },

  resolve: {
    extensions: ['.js', '.jsx']
  },

  plugins: []
};

Reactパッケージをインストール
```
$ npm i -S react react-dom
```
-Sをつけるとpackage.jsonのdependenciesタグに記載される。

ソースコードのサンプルを作成

$ touch src/index.jsx

index.jsx


import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {

	constructor(props) { 
		super(props)
		this.state = { text1: 'インドゾウ' }
	}

	onChange(e) {
		 this.setState( {text1: e.target.value} )
	}

	render () {
		return (
			<div>
				<input type="text" onChange = { this.onChange.bind(this) } />
				<p>{ this.state.text1 }</p>
			</div>
		);
	}
}

render(<App/>, document.getElementById('react_app1'));

コンパイルを実行する。
```
$ npx webpack
```
webpack.config.jsで設定した「main.js」がdistディレクトリに作成される。

適当な場所にindex.htmlを作成。index.htmlにてmain.jsを読み込む。

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>ReactのDemo2</title>
</head>
<body>
	<h3>ReactのDemo2</h3>
	
	<div id="react_app1" ></div>
	<script src="dist/main.js"></script>
	
</body>
</html>

ブラウザにてindex.htmlを表示
http://localhost/react_demo/demo2/index.html
ファイル構成

参考サイト:Babelとwebpackを使ってES6でReactを動かすまでのチュートリアル

2021-1-29

Reactの覚書 | ワクガンス

React.jsの開発環境構築 webpack + babel

xxx