Reactを初めて触ってみる。（ついでにFirebaseHostingにデプロイしてみる）

普段は業務でAngularばっかり使ってますが、社内のアプリ開発コンテストでReactを使うことになりました。
徐々に勉強していこうと思いますが、まずは環境構築について書いてみます。


# Getting Started

公式で色々書いてありますが、ローカル環境の構築方法は以下に書いてありました。
https://ja.reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment

## プロジェクトの作成

```
npx create-react-app my-app
```


```package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
```

## プロジェクトの起動

- `npm start`で起動します

```
npm start
```

- 起動に成功すると、以下のような表示が出ます

```
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.2.15:3000

Note that the development build is not optimized.
To create a production build, use npm run build.
```

→　Productionビルドしたかったら`npm run build`叩いてねって書いてありますね。

- ブラウザでアクセスします。  
※VM(`192.168.33.10`)上で動かしています

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/89958fc3-c3c2-4e4a-4505-4c1fceed9404.png)



# テンプレートプロジェクトの構成について

- プロジェクトルート

```
[vagrant@localhost /samba/my-app (master)]$ ll
合計 628
-rw-r--r--.    1 vagrant docker   2891  2月 26 22:39 README.md
drwxr-xr-x. 1022 vagrant docker  32768  2月 26 22:42 node_modules
-rw-r--r--.    1 vagrant docker 581143  2月 26 22:40 package-lock.json
-rw-r--r--.    1 vagrant docker    742  2月 26 22:40 package.json
drwxr-xr-x.    2 vagrant docker    120  2月 26 22:39 public
drwxr-xr-x.    2 vagrant docker    148  2月 26 22:39 src
```

- public ディレクトリ　・・・　静的ファイル置き場

```
[vagrant@localhost /samba/my-app (master)]$ ll public
合計 36
-rw-r--r--. 1 vagrant docker 3150  2月 26 22:39 favicon.ico
-rw-r--r--. 1 vagrant docker 1721  2月 26 22:39 index.html
-rw-r--r--. 1 vagrant docker 5347  2月 26 22:39 logo192.png
-rw-r--r--. 1 vagrant docker 9664  2月 26 22:39 logo512.png
-rw-r--r--. 1 vagrant docker  492  2月 26 22:39 manifest.json
-rw-r--r--. 1 vagrant docker   67  2月 26 22:39 robots.txt
```

- srcディレクトリ　・・・　コード置き場


```
[vagrant@localhost /samba/my-app (master)]$ ll src
合計 36
-rw-r--r--. 1 vagrant docker  564  2月 26 22:39 App.css
-rw-r--r--. 1 vagrant docker  555  2月 26 22:39 App.js
-rw-r--r--. 1 vagrant docker  280  2月 26 22:39 App.test.js
-rw-r--r--. 1 vagrant docker  366  2月 26 22:39 index.css
-rw-r--r--. 1 vagrant docker  452  2月 26 22:39 index.js
-rw-r--r--. 1 vagrant docker 2671  2月 26 22:39 logo.svg
-rw-r--r--. 1 vagrant docker 5085  2月 26 22:39 serviceWorker.js
-rw-r--r--. 1 vagrant docker  255  2月 26 22:39 setupTests.js
```


# 修正してみる

App.jsの文章を`Hello React`に変えてみます

```src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello React
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

　↓　保存すると即座にリロードされます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/05b7056e-d00b-ef56-4b72-777dda7f9de0.png)



# Firebaseを使って公開してみる

基本的には以前に執筆した[Angularのホスティング](https://qiita.com/teracy55/items/bc35bb21f98d3d493f9f#firebase%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90)と同じなので、異なる点だけ書いておきます。

## ReactプロジェクトをProductionビルド

- `npm start`した際に表示される通り、`npm run build`だけでproductionビルドとなります

```
npm run build
```

　↓

```
[vagrant@localhost /samba/my-app (master *)]$ npm run build

> my-app@0.1.0 build /samba/my-app
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  39.38 KB  build/static/js/2.bc5b117a.chunk.js
  771 B     build/static/js/runtime-main.aaf88d20.js
  605 B     build/static/js/main.63c75bea.chunk.js
  556 B     build/static/css/main.d1b05096.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

```

buildディレクトリに出力されました。


## Firebase Hostingへのデプロイ

- 公開するディレクトリは`build`に変更します

```
? What do you want to use as your public directory? (public) build
```

- SPAの設定は`y`を選びます

```
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
```

- index.htmlは上書きしません

```
? File build/index.html already exists. Overwrite? (y/N) N
```

## デプロイ

```
firebase deploy
```

## アクセスしてみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/59aab802-7a41-9d2e-04e7-30c917d93708.png)


# 最後に

Reactについては全然わかってないですが、とりあえず環境の構築とFirebaseでの公開はできました。
SPAは簡単に公開できて良いですね。

徐々にReactについても勉強していこうと思います。