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