プログラマになって初めての常駐先でreactを使用し、興味を持ったので自宅で勉強がてら環境を作ってみます。
プロジェクトの他メンバーにreactの環境構築について色々聞いたので、忘れないうちにメモ。ちなみに私の理解度は素人同然なので、ふわっとした感じで書いていきます。

内部の設定ファイルのことを何もわからなくても、コマンドでcreate-react-appだとすぐに動く環境を作れるのですが、何が起こっているかわからないという気持ち悪さが残ったので、色々聞いて、雰囲気だけ掴み、一から構築してみました。

手順1 node.jsをインストール

https://nodejs.org/ja/ からインストールする。

手順2 空のディレクトリを作る。

名前は好きに決めます。私はmyappにします。この中にファイルを作成していきます。

手順3 package.jsonの作成

cdコマンドで作成した空ディレクトリに移動して

$ npm init

と入力するとpackage.jsonというファイルが作られる。
色々聞かれますがとりあえずenterの連打。

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

このファイルに書かれている情報を元に必要なファイルをインストールしてくれるらしい。
各部分の説明はこちらの方の記事が非常に参考になりました。
（というかこの方の記事で環境作れるっぽい笑）
https://qiita.com/righteous/items/e5448cb2e7e11ab7d477

package.jsonを少々いじって（コピペ）インストールの準備をします。
package.jsonは調べるといろんな方が自分の環境設定を公開しているらしい。
私はreact-reduxを使用したいので、職場の方のgithubよりコピペして作りました。

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "develop": "webpack -d --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7"
  },
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-redux": "^7.1.1",
    "redux": "^4.0.4"
  }
}

babelは主に新しいjsを古いjsに書き換えてくれる役割らしい。
webpackはここではjsファイルをひとつにしてくれる役割らしい。
多分相当ざっくりな感じです。

手順4 必要なファイルの作成

引き続きmyappでコマンドを入力

$ npm install

するとさきほどのpackage.jsonの情報を元に必要なファイルがインストールされました。
node_modulesというフォルダの中にpackage.jsonで指定した情報を含む様々な実体が置いてある。

babel,webpackにもそれぞれ必要なファイルがあるのでmyapp直下にファイルを作成して用意しておきます。こちらもgithubよりコピーしてきました。

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public/js')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

webpackに関してはこちらの記事が非常にわかりやすかったです。
https://qiita.com/one-kelvin/items/b810aafb6b5ef90789a3

myapp直下に　.babelrc　という名前の隠しファイルも作成しておきます。
babelさんが使うらしい。

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

手順5 index.htmlの作成

myappの直下にindex.htmlを作成します。

index.html

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>myapp</title>
  </head>
  <body>
    <div id="myapp-page"></div>
  </body>
</html>

タグの部分に後ほどjsで作成するファイルが当てはまる形になります。

手順6 srcフォルダの作成

myapp直下にsrcフォルダを作成し、ここにjsファイルを作成していきます。
先ほど設定したwebpackの設定内容で起点となるファイルindex.jsをsrc内に作成します。

index.js

import React, {useState} from 'react'
import ReactDom from 'react-dom'
import { Provider, useSelector, useDispatch } from 'react-redux'
import { createStore } from 'redux'

const App = () => {return (<div>HELLO REACT</div>)}

ReactDom.render(
    <App/>,
    document.getElementById('myapp-page')
)

手順7 完成品のjsファイルを作成する

この状態で

$ npx webpack

というコマンドをうつと、新たにフォルダができて、webpackの設定ファイルに記載したように、public/jsの中にbundle.jsという完成品のjsファイルができます。

手順8 index.htmlにjsファイルを読み込ませる。