Reactの記録

dev

Reactの環境構築して、Material-UIを導入する

  • nodeを環境構築してcreate-react-appする
$ npx create-react-app my-react-demo
  • 起動してみる
$ yarn start

ブラウザで localhost:3000で表示されるか確かめる

  • Material-UIをインストールする
$ yarn add --save @material-ui/core @material-ui/icons @material-ui/system

Material-UIの公式ページ GetStartedを確認する
https://material-ui.com/getting-started/installation/

  • public/index.htmlのheadタグ内にfontの設定をincludeする
  <head>
    ・・・
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <title>React App</title>
  </head>

Firebaseの設定

  • firebaseのCLIツールをインストールする (グローバルインストールでPCに)
$ yarn global add firebase-tools
  • プロジェクトにfireaseライブラリをインストールする
    cd でディレクトリまで移動して
yarn add firebase
  • firebase login, init
$ firebase login
$ firebase init

firebase init でコンソールで作成したプロジェクトや使うサービス、javascriptかtypescriptなどを設定
注意) Hostingを設定した場合、Reactならpublic directoryにデフォルトのpuclic ではなくbuild を設定する。

FireabaseHostingへデプロイ

  • まずReactアプリをbuildする
$ yarn build

/build にいろいろファイルが作成される。

  • deployする
$ firebase deploy
# hostingだけなら以下も可
$ firebase deploy --only hosting

Comments

タイトルとURLをコピーしました