初投稿です。
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】※このファイルに下記コードをコピーして保存
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というファイルでインポートさせます。
後々、使う認証機能も一緒にインポートしておきましょう。
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をごっそり書き換えましょう。
<!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も書き換えてみましょう。
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をインポートしておきましょう。
1.上記のリンクの上部にあるコマンドでインストール
#####npm install @material-ui/core
もしくは
#####yarn add @material-ui/core
2.任意の名前で作成したReactディレクトリの「build」の中の「index.html」のhead内に、RobotoFontを読み込むコードを張り付けます。
※先ほどApp.jsを書き換えた際、じつはもう記載してあります。
3.必要なライブラリだけimportとしていきます。あとはコードで囲えば使用できます。
//例
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
<TextField value="入力"/>
<Button>登録</Button>
↓こんな感じで表示されます。
これで準備はだいたいOKです。
続きはまた次回に投稿いたします。
firebase.jsのモジュール化はこちらの記事を参考にさせていただきました。
↓
https://qiita.com/dyoshikawa/items/404402e4e8622d6811f3