初心者がReact+FirebaseでWebアプリを作成する①

初投稿です。
React+Firebase+Material-UIの環境作成方法に関する記事です。

実行環境はwindows10です。

①Reactを使うにはNode.jsが必要です。
まず下記URLからNode.jsのインストーラーをダウンロードしましょう。
今回は左の推奨版でOKです。
https://nodejs.org/ja/

インストーラーを実行したら、ひとまず全てデフォルトの設定でインストールを完了させましょう。
コマンドプロンプトを開いて、
#####node -v
でバージョンが表示されていればインストールは成功です。

![zoom command node ver.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/e736f261-a9a5-1dc1-3640-2dcdc02eb680.jpeg)



次にそのままコマンドで下記コマンドを実行します。
#####npx create-react-app my-app
（my-appの部分は任意のディレクトリ名でOKです)
happy hackingができれば完了です！

![reactapp.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/addf6675-0d74-c8bd-71c4-f8984bb4093e.jpeg)


するとReactの実行環境が作成されます。

そのまま
#####cd my-app
#####npm start
で下記画面が表示されればReactの導入も成功です。

![reacthome.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/8cd438b4-240d-6f2a-391f-8e51d7580dc2.jpeg)


※パッケージマネージャーとしてyarnを導入しておくと、npmよりも早く、エラーも発生しづらいので色々便利です。
#####npm install -g yarn
コマンドでyarnを導入しておきましょう。

②次にFirebaseで自分のプロジェクト作成します。
下記のリンクで使ってみるを選択します。
https://firebase.google.com/?hl=ja

プロジェクト名はなんでもOKです。
アナリティクスはひとまず不要で大丈夫です。
そうすると下記のメイン画面に入ります。

![firebase.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/db2a1edd-b126-7b60-82d4-c21d47c5f61a.jpeg)

ここから3つのことをやっておきましょう。

　1.中央にある</>マークを選ぶとwebアプリの登録に進めます。適当な名前をつけて、登録しましょう。
　2.Databaseを選択してcloudfirestoreを使えるようにしておきましょう。こちらも適当な名前で。モードはテストモード。ロケーションはとりあえずasia-northeast1で。

　3.任意の名前で作成したReactのディレクトリの中の「src」ディレクトリの中に「plugins」ディレクトリを作成し、その中に「firebase.js」というjavascriptのファイルを作成します。
「firebase.js」にProject Overviewの横にある歯車（設定）アイコンをクリックし、「プロジェクトの設定」の全般の一番下にあるコードをコピーしてapiKeyからappIdを丸ごと貼り付けます。

【任意のReactディレクトリ】⇒【srcディレクトリ】⇒【pluginsディレクトリ】⇒【firebase.js】※このファイルに下記コードをコピーして保存

```Javascript:firebase.js

import firebase from 'firebase';

const config = {
//ここから
    apiKey: "****************************",
    authDomain: "****************************",
    databaseURL: "****************************",
    projectId: "****************************",
    storageBucket: "****************************",
    messagingSenderId: "****************************",
    appId: "****************************",
//ここまでコピーして書き換え
  };
const firebaseApp = firebase.initializeApp(config);
export const firestore = firebaseApp.firestore();
```

そしたらsrcディレクトリの中のApp.jsというファイルでインポートさせます。
後々、使う認証機能も一緒にインポートしておきましょう。

```javascript:App.js
import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"
import { firestore } from './plugins/firebase';
```


これでfirestoreというデータベースのサービスを利用することができます。
※注意
firebaseの料金プランは無料プランのままにしておいて下さい。
誤って従量課金プランに変えてしまうと、
とんでもない請求がいくかもしれません…

③FirebaseとReactを接続する。


FirebaseCLIを使うことで、ローカルからfirebaseプロジェクト更新できるようにします。
下記コマンドを入力しましょう。

↓
####npm install -g firebase-tools
もしくは　
####yarn add -g firebase -tools

CLIが導入できたら、
↓
####firebase login
↓
####firebase init

とコマンドを続けましょう。
そうすると選択項目が出てきます。

ここはキーボードの方向キーで指定して、スペースキーで選択、enterで決定できます。
下記の順に選びましょう。
#####Hosting
↓
#####Use an existing project （先ほど名前を付けたFirebaseのアプリの名前を選択）
↓
#####What do you want to use as your public directory?(ディレクトリを選択します。buildと入力しておきましょう）
あとはyesで問題ないです。　

そうすると「build」というディレクトリが生成されているので、その中のindex.htmlをごっそり書き換えましょう。

```Html:index.html
<!doctype html>
    <html lang="ja">
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <meta name="theme-color" content="#000000"/>
        <meta name="description" content="Test"/>
        <title>React Sample</title>
    </head>
    <body>
        <div id="root">
        </div>
    </body>
                
    </html>
```

App.jsのreturn()の記述が、最終的にindex.htmlのid ="root"に渡ってきます。
App.jsも書き換えてみましょう。

```javascript:App.js
import React from 'react';
import './App.css';
import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"
import { firestore } from './plugins/firebase';

class App extends React.Component{
  constructor(props){
    super(props);
      }

      render(){
        return(
          <h1>Hello React</h1>
        );
      }

}


export default App;
```

完了したら
##### npm run build
##### firebase deploy
（もしくはyarn build && firebase deploy)
    
deployが完了したら表示されたURLにアクセスできます.

下記のように表示されたら成功です。
![HelloReact.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/69ae526b-dc4a-542b-fa59-e115c0d9e2e5.png)
  
あとは更新するたびに、buildとfirebase deployを行えば更新することができます。


④最後にmaterial-UIをインポートしておきましょう。

https://material-ui.com/getting-started/installation/ 

1.上記のリンクの上部にあるコマンドでインストール
#####npm install @material-ui/core
もしくは
#####yarn add @material-ui/core

2.任意の名前で作成したReactディレクトリの「build」の中の「index.html」のhead内に、RobotoFontを読み込むコードを張り付けます。
　    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
※先ほどApp.jsを書き換えた際、じつはもう記載してあります。

3.必要なライブラリだけimportとしていきます。あとはコードで囲えば使用できます。

```Javascript:App.js
//例
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

<TextField value="入力"/>
<Button>登録</Button>

```
↓こんな感じで表示されます。
![materialUI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/bf5622e4-315e-cb26-049e-e55f308aa0bd.png)


これで準備はだいたいOKです。
続きはまた次回に投稿いたします。

firebase.jsのモジュール化はこちらの記事を参考にさせていただきました。
↓
https://qiita.com/dyoshikawa/items/404402e4e8622d6811f3