expressとreactで作るSPA(1) - reactでhello world! 

# 概要

サーバサイドをexpress、フロントエンドをreactで構成するSPAのWebアプリケーションを作る流れを書いていきます。
Ubuntu 18.04 LTSで必要なものを一からinstallしながら進めていきます。

[expressとreactで作るSPA(0) - 準備編](https://qiita.com/megmog/items/f48ecbbb30b7f1c06332)

# 作業ディレクトリを作る

アプリケーションを作るディレクトリを作ります。ディレクトリ名をappとします。

```shell
mkdir ~/app
cd ~/app
git init
```

以下、作業はすべてappディレクトリで行うものとします。

appディレクトリの中はこうなりました。

```shell
.
└── .git/
```

.git にはGitの状態を管理するファイルが入っているので触らないように。

# reactをインストール

Yarnを使ってreactをインストールします。

```shell
yarn add react react-dom
```

そうすると何やら動いてappが以下のようになります。

```shell
.
├── .git/
├── node_modules/
├── package.json
└── yarn.lock
```

package.json と yarn.lock はYarnがパッケージの状態を管理するためのテキスト情報が格納されていて、node_modulesは実際にダウンロードしたパッケージが格納されています。

# node_modulesをGit管理対象外にする

作成されたファイル・ディレクトリはGitの管理対象になっています。

```shell
$ git status
ブランチ master

No commits yet

追跡されていないファイル:
  (use "git add <file>..." to include in what will be committed)

	node_modules/
	package.json
	yarn.lock
```

node_modulesは、今後もダウンロードしたパッケージがどんどん増えていくのでGitの管理対象になっているとリポジトリのサイズがどんどん大きくなって非常にウザいので、Gitの管理対象から外します。
Gitの管理対象外にするには、.gitignore というファイルを作ってそこに対象外にするファイルのパスを書きます。

```:.gitignore
node_modules
```

こうするとGitの管理対象から外れます。

```shell
$ git status
ブランチ master

No commits yet

追跡されていないファイル:
  (use "git add <file>..." to include in what will be committed)

	.gitignore
	package.json
	yarn.lock
```

ここまでで、一旦Gitにcommitします。

```shell
git add .
git commit
```

# コーディング

ReactでHello, world!を出力するコードをコーディングしていきます。
[脱create-react-app ~ 真面目に express × react 環境を構築する~](https://qiita.com/ohs30359-nobuhara/items/bdc06b2db1bef7af2439) を参考にさせてもらいました。

src/client ディレクトリを作成して、その下に以下3つのファイルを作成します。

```html:src/client/index.html
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello world!</title>
  </head>
  <body>
    <section id="index"></section>
  </body>
</html>
```

```jsx:src/client/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Page from './page';

ReactDOM.render(<Page />, document.getElementById("index")); 
```

```jsx:src/client/page.jsx
import React from 'react';
import ReactDOM from 'react-dom';

const Page = () => <div>Hello, World!</div>;
export default Page;
```

# reactのコードを動かす

webでプログラムを動かすにはwebサーバが必要です。
最終的にはnode.jsで動かすわけなんですが、いきなりそこまでやると大変なので、webpack-dev-serverという開発・デバッグ用のserverを立てて動かします。

関連パッケージのinstall

```shell
yarn add -D webpack-cli webpack webpack-dev-server html-webpack-plugin 
yarn add -D @babel/core @babel/cli @babel/preset-env @babel/preset-react
yarn add -D babel-loader babel-plugin-module-resolver
```

webpackの設定ファイル

```javascript:config/webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/client/index.html",
  filename: "./index.html"
});

module.exports =  module.exports = {
  entry: "./src/client/index.jsx",
  output: {
    path: path.resolve('dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /(\.js$|\.jsx$)/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [htmlWebpackPlugin],
  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'],
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
}; 
```
babelの設定ファイル

```json:.babelrc
{
  "presets": [
    "@babel/preset-env", 
    "@babel/preset-react", 
  ],
  "plugins": [
    ["module-resolver", { "root": ["./src/client"] }]
  ]
}
```

以下のコマンドでwebpack-dev-serverを起動

```shell
yarn webpack-dev-server --config config/webpack.config.js
```

ブラウザで http://localhost:8080 にアクセス -> 「Hello, World!」 表示

お疲れ様でした！

# 参考
[Webpack | Configration](https://webpack.js.org/configuration/)
[Configure Babel](https://babeljs.io/docs/en/configuration)
[脱create-react-app ~ 真面目に express × react 環境を構築する~](https://qiita.com/ohs30359-nobuhara/items/bdc06b2db1bef7af2439)