Reactを使用してWeb画面を作成する

# はじめに
reactとreact-reduxを調べたときに概念や考え方など難しい話から入っているサイトやちょっと難しい(カッコいい)Web画面をサンプルに使用していて理解が難しいなと感じました。
そのため、単純なサンプルを使用して最低限の説明のみをしようと思います。

# 環境
 - node.js: v12.18.2
 - webpack: 4.44.1
 - React: 16.13.1
 
# 環境作成
## node.jsのインストール
公式のサイトに従ってインストールしてください
公式サイト: https://nodejs.org/ja/

## プロジェクト用のファイルを作成
node.jsのプロジェクトではプロジェクトの設定やインストールしたパッケージなどをpackage.jsonに記載します。
次のコマンドでpackage.jsonを作成するといくつかの入力項目がありますが基本的にすべてデフォルトで問題ないです。

```

npm init
```

## Babel
環境やブラウザのバージョンによって使用できるJavaScriptの仕様が異なります。その仕様の差分を埋めるために、Babelを使用して作成したJavaScriptを対応可能なものに変換します。

### Babelのインストール

```

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/register
```

### Babelの設定作成
Babelの設定はプロジェクト直下の``` .babelrc ``` に記載します。そのため、このファイルを作成して以下の内容を記載します。

``` .babelrc

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

## webpack
Web画面からJavaScriptを読みだす際にJavaScriptのファイルが多いと無駄な時間や処理が発生します。webpackを使用すると複数のファイルを一つにまとめていい感じにしてくれます。

### webpackのインストール
webpackに必要なライブラリの他にもローカルでサーバを起動するために ``` webpack-dev-server ``` をインストールします。

```

npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader
```

### webpackの設定作成
webpackの設定はプロジェクト直下の``` webpack.config.js ``` に記載します。このファイルを作成して以下の内容を記載します。

``` webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    // ファイルをどのように変換すればよいのかのルールを設定。
    // testで入力するファイルの条件、excludeで除外する条件、
    //loaderで外部ライブラリのルールを参照する 
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  // ビルドの順番を設定
  resolve: { extensions: ["*", ".js", ".jsx"] },
  // ビルド後の設定
  // pathは、ビルド後のファイルを吐き出すフォルダ、
  // filenameはビルド後のファイル名を設定
  output: {
    path: path.resolve(__dirname, "dist/"),
    filename: "bundle.js"
  },
  // ローカルで起動するサーバの設定
  // contentBaseでブラウザからアクセスしたときのルート、
  // portはブラウザからアクセスするときのポート番号、
  // hotOnlyはファイルを更新したときに自動読み込みをする設定
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 8080,
    hotOnly: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};
```

## react

### reactのインストール

```

npm install react react-dom
```

# Web画面のソースの作成

## フォルダの作成
プロジェクトルート直下にsrcとpublicとdistのフォルダを作成してください。
※上のwebpackの設定を変えたときはここも変えてください。

```

project_root
├─dist   // ビルド後のファイルを格納 
├─public // htmlを格納
├─src    // reactのJavaScriptファイルやCSSファイルを格納
├─.babelrc
├─package.json
├─webpack.config.js
```

## htmlファイルの作成
ブラウザからアクセスした際に一番最初にアクセスされるhtmlファイルを作成します。
※webpackのビルド後のファイルをインポートするのを忘れないでください。

``` index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React Sample</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
  </body>
</html>
```

## reactのrendarファイルの作成
reactの機能をつかってレンダリングするJavaScriptファイルを作成します。
``` ReactDOM.render() ```にコンポーネントファイルとdocument.getElementById(置き換えるhtmlのid)を指定してあげます。
上のindex.htmlの``` <div id="app"></div> ```とAppコンポーネントを置き換えたいので``` ReactDOM.render() ```に``` <App />```と``` document.getElementById('app') ```を指定します。

``` index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('app')
);
```

## reactのコンポーネントファイルの作成
実際にWeb画面に表示するための情報を書いたコンポーネントのJavaScriptファイルを作成します。
基本的にはコンポーネントファイルを増やして、Web画面を増やしたりWeb画面の要素を増やしたりします。
※上のindex.jsの``` import App from './App'; ```でこのファイルをインポートしています。最後の行のexportを忘れないでください。

``` App.js

import React, { Component} from "react";

class App extends Component{
  render(){
    return(
      <div className="App">
        <h1> Hello, World! </h1>
      </div>
    );
  }
}

export default App;
```

# Web画面の起動

## ビルド
開発用のサーバを起動するときに同時にビルドが走るので特に必須ではないですが、webpackの設定や作成したファイルが間違っていないかをチェックするために一旦ビルドします。
プロジェクトのルートで次のコマンドを実行するとビルドが走ります。Windowsの場合はダブルクォーテーションで囲まないとうまくいかないです。

```

"./node_modules/.bin/webpack" 
```

ビルドが成功するとdictフォルダ内にJavaScriptファイルが一つできるはずです。

## 開発用サーバの起動
プロジェクトのルートで次のコマンドを実行するとビルドとサーバの起動が走ります。Windowsの場合はダブルクォーテーションで囲まないとうまくいかないです。

```

"./node_modules/.bin/webpack-dev-server"
```

サーバが起動したらブラウザからlocalhost:8080にアクセスするとHello, World!が表示されます。


# 終わりに
Reduxやaxiosとの連携を書こうと考えていましたが、予想以上に長くなったので今回はここまでにします。
~~次回以降にReduxとaxiosのサンプルと簡単な説明を書いていこうと思います。~~
それぞれまとめました。
Redux:[ReduxとReduxToolkitを使用してReact内でデータを管理する](https://qiita.com/mink0212/items/add733e2a2a1dfbc3aed)
axios:[ReactのRedux内でaxiosを使用した通信をする](https://qiita.com/mink0212/items/b89388f9c255d7ef6833)