components/FileUpload.ts

const onDrop = (acceptedFiles: File[]) => {
     console.log(formData)
 }

return (
     <div>
         <DropZone  onDrop={onDrop}>
             {({getRootProps, isDragActive}) => (
                 <div {...getRootProps()}>
                     {isDragActive ? "Drop it like it's hot!" : 'Drag a file to upload!'}
                 </div>
             )}
         </DropZone>
     </div>
 )

react-dropzoneを使ってこんな感じに書いて、描画された部分に画像をドロップしてみると

lastModified: 1571463132902
lastModifiedDate: Sat Oct 19 2019 14:32:12 GMT+0900 (日本標準時) {}
name: "hoge.PNG"
path: "hoge.PNG"
size: 353348
type: "image/png"
webkitRelativePath: ""

こんな感じのFileっていう型の配列がもらえる。
んじゃあこのデータ配列そのままサーバ側にぶん投げて、サーバ側でfirebase storageにpath指定してあげりゃあ画像のアップロード実装できんじゃん！
って思ってたんだけど、見てわかる通りpathがfullpath(?)になってない。どうしよう...

最終的に、サーバ側に一時的に画像を保存して、そこで生成されたpathをfirebase側に指定してあげたらうまく行った。

そのために、まずはreact-dropzoneから受け取ったFile配列をFormDataとやらに変換して、それをPOSTデータとしてぶん投げた。

components/FileUpload.ts

 const onDrop = (acceptedFiles: File[]) => {
     const formData = new FormData();
     acceptedFiles.forEach(file => {
         formData.append('Files', file)
     })
     dispatch(postFiles.request(formData))
 }

参考にさせていただいたサイト様様 → https://qiita.com/uryyyyyyy/items/9954205a620b6f3c1f24

んで、これをExpress側で受け取るんだけど、このデータはmultipart/form-dataというものらしく、普通にやったらうまく受け取れなかった。なんやそれ。知らんがな。

app.ts

import multer from 'multer';

const upload = multer({ dest: './uploads/' });

app.post('/files', upload.fields([ { name: 'Files' } ]), postStorageController);

controller/postStorageController.ts

export function postStorageController(req: Request, res: Response, next: NextFunction) {
    const files: Express.Multer.File[] = req.files['Files'];

こういう風に書いてあげると、filesの部分で以下のような感じで値がもらえる

[Object: null prototype] {
  Files:
   [ { fieldname: 'Files',
       originalname: 'hoge.PNG',
       encoding: '7bit',
       mimetype: 'image/png',
       destination: 'uploads/',
       filename: 'd18eb9674f13a81898e7c25bb0c3bda6',
       path: 'uploads/d18eb9674f13a81898e7c25bb0c3bda6',
       size: 353348 } ] }

参考にさせていただいたサイト様様 → https://qiita.com/uryyyyyyy/items/9954205a620b6f3c1f24
(さっきと同じ記事。圧倒的感謝)

あとは、Google先生の解説を見ながらfirebase storageにあげれば終わり！

controller/postStorageController.ts

export function postStorageController(req: Request, res: Response, next: NextFunction) {
    const files: Express.Multer.File[] = req.files['Files'];

    files.forEach(fileInfo => {
        const uploadFilePath = `files/${fileInfo.originalname}`
        bucket.upload(fileInfo.path, { destination: uploadFilePath, contentType: fileInfo.mimetype }, error => {
            if (error) {
                console.log(`failed storage post ${fileInfo.originalname}`);
                console.log(error.message);
                return res.sendStatus(404);
            } else {
                console.log(`success storage post ${fileInfo.originalname}`);
                return res.sendStatus(200);
            }
    }
}

↓↓↓今回書いたソースコード

(フロント)
https://github.com/ShotaroOkada/fileupload_react_client

(サーバ)
https://github.com/ShotaroOkada/fileupload_express_api

components/FileUpload.ts

const onDrop = (acceptedFiles: File[]) => {
     console.log(formData)
 }

return (
     <div>
         <DropZone  onDrop={onDrop}>
             {({getRootProps, isDragActive}) => (
                 <div {...getRootProps()}>
                     {isDragActive ? "Drop it like it's hot!" : 'Drag a file to upload!'}
                 </div>
             )}
         </DropZone>
     </div>
 )

react-dropzoneを使ってこんな感じに書いて、描画された部分に画像をドロップしてみると

lastModified: 1571463132902
lastModifiedDate: Sat Oct 19 2019 14:32:12 GMT+0900 (日本標準時) {}
name: "hoge.PNG"
path: "hoge.PNG"
size: 353348
type: "image/png"
webkitRelativePath: ""

こんな感じのFileっていう型の配列がもらえる。
んじゃあこのデータ配列そのままサーバ側にぶん投げて、サーバ側でfirebase storageにpath指定してあげりゃあ画像のアップロード実装できんじゃん！
って思ってたんだけど、見てわかる通りpathがfullpath(?)になってない。どうしよう...

最終的に、サーバ側に一時的に画像を保存して、そこで生成されたpathをfirebase側に指定してあげたらうまく行った。

そのために、まずはreact-dropzoneから受け取ったFile配列をFormDataとやらに変換して、それをPOSTデータとしてぶん投げた。

components/FileUpload.ts

 const onDrop = (acceptedFiles: File[]) => {
     const formData = new FormData();
     acceptedFiles.forEach(file => {
         formData.append('Files', file)
     })
     dispatch(postFiles.request(formData))
 }

参考にさせていただいたサイト様様 → https://qiita.com/uryyyyyyy/items/9954205a620b6f3c1f24

んで、これをExpress側で受け取るんだけど、このデータはmultipart/form-dataというものらしく、普通にやったらうまく受け取れなかった。なんやそれ。知らんがな。

app.ts

import multer from 'multer';

const upload = multer({ dest: './uploads/' });

app.post('/files', upload.fields([ { name: 'Files' } ]), postStorageController);

controller/postStorageController.ts

export function postStorageController(req: Request, res: Response, next: NextFunction) {
    const files: Express.Multer.File[] = req.files['Files'];

こういう風に書いてあげると、filesの部分で以下のような感じで値がもらえる

[Object: null prototype] {
  Files:
   [ { fieldname: 'Files',
       originalname: 'hoge.PNG',
       encoding: '7bit',
       mimetype: 'image/png',
       destination: 'uploads/',
       filename: 'd18eb9674f13a81898e7c25bb0c3bda6',
       path: 'uploads/d18eb9674f13a81898e7c25bb0c3bda6',
       size: 353348 } ] }

参考にさせていただいたサイト様様 → https://qiita.com/uryyyyyyy/items/9954205a620b6f3c1f24
(さっきと同じ記事。圧倒的感謝)

あとは、Google先生の解説を見ながらfirebase storageにあげれば終わり！

controller/postStorageController.ts

export function postStorageController(req: Request, res: Response, next: NextFunction) {
    const files: Express.Multer.File[] = req.files['Files'];

    files.forEach(fileInfo => {
        const uploadFilePath = `files/${fileInfo.originalname}`
        bucket.upload(fileInfo.path, { destination: uploadFilePath, contentType: fileInfo.mimetype }, error => {
            if (error) {
                console.log(`failed storage post ${fileInfo.originalname}`);
                console.log(error.message);
                return res.sendStatus(404);
            } else {
                console.log(`success storage post ${fileInfo.originalname}`);
                return res.sendStatus(200);
            }
    }
}

↓↓↓今回書いたソースコード

(フロント)
https://github.com/ShotaroOkada/fileupload_react_client

(サーバ)
https://github.com/ShotaroOkada/fileupload_express_api

忘備録として、、、、

前回の記事 で作成したボイラープレートにJestを導入する。

各種設定

モジュールの追加

今回は Jest と Enzyme をインストールする。

$ npm install -D jest ts-jest enzyme enzyme-to-json enzyme-adapter-react-16

TypeScript を使用するので以下もインストールする。

$ npm install -D @types/jest @types/enzyme @types/enzyme-adapter-react-16

Jest設定ファイルの作成

Jestの設定ファイルを追加する。

// <プロジェクトルート>/jest.config.js

module.exports = {
  // 起点となるディレクトリを指定
  "roots": [
    "./src"
  ],
  // アセットの変換方法を指定
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  // Jestで実行するテストコードの配置場所とテストコードの正規表現での指定
  // __tests__下の hoge.test.tsx または hoge.spec.tsx を対象とする
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  // テスト対象となる拡張子を列挙
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
  // Enzymeの設定
  snapshotSerializers: ['enzyme-to-json/serializer'],
  // Enzymeの設定ファイル（自分で作成する）
  setupFilesAfterEnv: ['./test/setupEnzyme.ts'],
};

上記で設定した__tests__ディレクトリを作成しておく。

$ mkdir ./src/__tests__

Enzyme設定ファイルの作成

今回は、Enzymeを使用するので、こちらも設定ファイルを用意する。

// <プロジェクトルート>/test/setupEnzyme.ts

import { configure } from 'enzyme';
import * as EnzymeAdapter from 'enzyme-adapter-react-16';
configure({ adapter: new EnzymeAdapter() });

tsconfig.jsonを作成

TypeScriptの設定ファイルを用意する。

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "module": "es2015",  ← common.jsも設定できるが、静的解析の精度が落ちるのでes2015おすすめらしい
    "target": "es5",
    "jsx": "react",
    "esModuleInterop": true
  },
  "include": [
    "./src/**/*"
  ]
}

package.jsonにJest実行用設定を追加

package.jsonにJest実行用設定を追加する。

  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack",
    "build-prod": "webpack --mode=production",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "test": "jest"  ←ここ追加
  },

以上で、実行環境の構築は完了。

動作確認

確認用コンポーネント作成

前回作成したコンポーネントを使用する。

// <プロジェクトルート>/src/components/Button/index.tsx

import * as React from 'react';

export interface IButtonProps {
  text: string;
  flag?: boolean;
  action(): void;
}

const Button = (props: IButtonProps) => {
  const { text, flag, action } = props;
  return (
    <React.Fragment>
      { flag && <p>{text}</p> }
      <button onClick={ action }>Button</button>
    </React.Fragment>
  );
};

export default Button;

テストファイル作成

__tests__内にコンポーネントと同じディレクトリ構造を作成する。

$ mkdir ./src/__tests__/components/Button

テストコードを作成する。

// <プロジェクトルート>/src/__tests__/components/Button/index.test.tsx

import * as React from 'react';
import {shallow} from 'enzyme';
import Button from '../../../components/Button';

test('小コンポーネントが存在すること', () => {
  const wrapper = shallow(<Button text="ボタンです" flag={true} action={() => console.log("test")} />);

  expect(wrapper.find("button").length).toBe(1);
  expect(wrapper.find("p").length).toBe(1);

  expect(wrapper.find("p").text()).toEqual("ボタンです");

  expect(wrapper).toMatchSnapshot();
});

test('pコンポーネントが表示されないこと', () => {
  const wrapper = shallow(<Button text="ボタンです" flag={false} action={() => console.log("test")} />);

  expect(wrapper.find("button").length).toBe(1);
  expect(wrapper.find("p").length).toBe(0);

  expect(wrapper).toMatchSnapshot();
});

test('イベント発火時にコールバック関数が呼び出されること', () => {
  const Spy = jest.fn();
  const wrapper= shallow(
    <Button text="ボタンです" flag={true} action={Spy} />
  );

  wrapper.find('button').simulate('click');
  expect(Spy).toHaveBeenCalledWith();

  expect(wrapper).toMatchSnapshot();
});

実行

コンソールからテストコマンドを実行する。
実行すると、以下のようにテスト結果が出力される。

$ npm run test

> react-ts-webpack@1.0.0 test /Users/kento/Programing/VScodeProjects/ts-react-sass-simple-boiler-v4
> jest

 PASS  src/__tests__/components/Button/index.test.tsx
  ✓ 小コンポーネントが存在すること (33ms)
  ✓ pコンポーネントが表示されないこと (3ms)
  ✓ イベント発火時にコールバック関数が呼び出されること (6ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   3 passed, 3 total
Time:        2.182s, estimated 5s
Ran all test suites.

テスト実行後、__tests__ディレクトリ内に、__snapshots__ディレクトリが作成され、中にスナップショットファイルが作成される。

$ tree ./src/__tests__
./src/__tests__
└── components
    └── Button
        ├── __snapshots__
        │   └── index.test.tsx.snap
        └── index.test.tsx

index.test.tsx.snapの中身は以下の通り。

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`pコンポーネントが表示されないこと 1`] = `
<Fragment>
  <button
    onClick={[Function]}
  >
    Button
  </button>
</Fragment>
`;

exports[`イベント発火時にコールバック関数が呼び出されること 1`] = `
<Fragment>
  <p>
    ボタンです
  </p>
  <button
    onClick={
      [MockFunction] {
        "calls": Array [
          Array [],
        ],
        "results": Array [
          Object {
            "type": "return",
            "value": undefined,
          },
        ],
      }
    }
  >
    Button
  </button>
</Fragment>
`;

exports[`小コンポーネントが存在すること 1`] = `
<Fragment>
  <p>
    ボタンです
  </p>
  <button
    onClick={[Function]}
  >
    Button
  </button>
</Fragment>
`;

以上で、Jestの導入は完了。
作成したボイラープレートは こちら

初投稿です。
身内用にReact+firebaseの環境作成方法を共有するために投稿してみました。

要するに、
Node.jsでサーバーを動かせるようにして、
Reactでフロントの動きを作って、
material-UIで画面をお洒落に仕上げて、
firebaseのデータべースや、認証機能サービスなどを使い、
世界中に公開できるようにしましょうということです。

実行環境はwindows10です。

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

インストーラーを実行したら、ひとまず全てデフォルトの設定でインストールを完了させましょう。
コマンドプロンプトを開いて、

node -v

でバージョンが表示されていればインストールは成功です。

次にそのままコマンドで下記コマンドを実行します。

npx create-react-app my-app

（my-appの部分は任意のディレクトリ名でOKです)
happy hackingができれば完了です！

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

そのまま

cd my-app

npm start

で下記画面が表示されればReactの導入も成功です。

※パッケージマネージャーとしてyarnを導入しておくと、npmよりも早く、エラーも発生しづらいので色々便利です。

npm install -g yarn

コマンドでyarnを導入しておきましょう。

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

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

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

　1.中央にある</>マークを選ぶとwebアプリの登録に進めます。適当な名前をつけて、登録しましょう。
　2.Databaseを選択してcloudfirestoreを使えるようにしておきましょう。こちらも適当な名前で。
　3.任意の名前で作成したReactのディレクトリの中の「src」ディレクトリの中に「plugins」ディレクトリを作成し、その中に「firebase.js」というjavascriptのファイルを作成します。
「firebase.js」にProject Overviewの横にある歯車（設定）アイコンをクリックし、「プロジェクトの設定」の全般の一番下にあるコードをコピーしてapiKeyからappIdを丸ごと貼り付けます。

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

firebase.js

import firebase from 'firebase';

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

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

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で問題ないです。　

終了したら

npm run build

firebase deploy

（もしくはyarn build && firebase deploy)

deployが完了したら表示されたURLにアクセスできます

あとは更新するたびに、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ディレクトリの「public」の中の「index.html」のhead内に、RobotoFontを読み込むコードを張り付けます。
　

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

App.js

//例
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

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

↓こんな感じで表示されます。

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

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

実行環境はwindows10です。

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

インストーラーを実行したら、ひとまず全てデフォルトの設定でインストールを完了させましょう。
コマンドプロンプトを開いて、

node -v

でバージョンが表示されていればインストールは成功です。

次にそのままコマンドで下記コマンドを実行します。

npx create-react-app my-app

（my-appの部分は任意のディレクトリ名でOKです)
happy hackingができれば完了です！

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

そのまま

cd my-app

npm start

で下記画面が表示されればReactの導入も成功です。

※パッケージマネージャーとしてyarnを導入しておくと、npmよりも早く、エラーも発生しづらいので色々便利です。

npm install -g yarn

コマンドでyarnを導入しておきましょう。

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

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

ここから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】※このファイルに下記コードをコピーして保存

firebase.js

import firebase from 'firebase';

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

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

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をごっそり書き換えましょう。

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も書き換えてみましょう。

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にアクセスできます.

下記のように表示されたら成功です。

あとは更新するたびに、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を読み込むコードを張り付けます。
　
※先ほどApp.jsを書き換えた際、じつはもう記載してあります。

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

App.js

//例
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

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

↓こんな感じで表示されます。

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

※この記事は編集中です。

初投稿です。
身内用にReact+Firebaseの環境の作成方法を共有するための投稿です。

実行環境はwindows10のものです。

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

インストーラーを実行したら、ひとまず全てデフォルトの設定でインストールを完了させましょう。
コマンドプロンプトを開いて、

code　- node -v

↑が実行できればインストールは成功です。

次にそのままコマンドで下記コマンドを実行します。

npx create-react-app my-app

（my-appの部分は任意のディレクトリ名でOKです)

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

そのまま

cd my-app

npm start

で下記画面が表示されればReactの導入も成功です。

※パッケージマネージャーとしてyarnを導入しておくと、npmよりも早く、エラーも発生しづらいので後々便利です。

npm install -g yarn

コマンドで導入しておきましょう。

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

プロジェクト名はなんでもOKです。
アナリティクスはひとまず有効にしないで大丈夫です。

プロジェクトが作成されたら</>マークを選ぶとwebアプリの登録に進めます。

こちらも適当な名前をつけて、登録しましょう。

③FirebaseとReactを接続する。

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

↓

npm install -g firebase-tools

もしくは　####yarn add -g firebase -tools

↓
firebase login
↓
firebase init
↓

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