Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

React + TypeScript + Firebase環境を超高速で作る

More than 1 year has passed since last update.

React + TypeScriptの環境を作る

基本は以下ドキュメントのままやれば大丈夫。
https://facebook.github.io/create-react-app/docs/adding-typescript

create react-appで雛形を作成。

yarn create react-app my-app --typescript

必要なパッケージをインストール。

cd my-app
yarn add typescript @types/node @types/react @types/react-dom @types/jest
yarn add firebase @types/firebase

以下コマンドを打つと、ブラウザが起動しサンプルのページが表示される。

yarn start

これでReact + TypeScriptの環境ができた!

Firebase環境のセットアップ

https://console.firebase.google.com へアクセス。
以下のような画面が表示されるので、[プロジェクトを追加]を選択。
image.png

プロジェクト名、地域、リージョンを選択してプロジェクトを作成。
image.png

プロジェクトが作成されると、ダッシュボード画面が表示される。
Webアプリを作る場合は、</>ボタンをクリックしてアプリの作成を始める。
image.png

アプリができたら、歯車マークをクリックする。
image.png

プロジェクトの設定画面が表示される。
画面下の方に行くとapiKeyとかの記述があるので、それを元にconfigファイルを作成する。
(apiKeyが表示されない場合は[Firebase SDK snippet]ラジオボックスの[CDN]を選択する。)

/config/firebase.ts
import firebase from 'firebase';

const config = {
  apiKey: "your-api-key",
  authDomain: "your-app-name.firebaseapp.com",
  databaseURL: "https://your-app-name.firebaseio.com",
  projectId: "your-app-name",
  storageBucket: "your-app-name.appspot.com",
  messagingSenderId: "your-messagind-sender-id",
  appId: "your-app-id"
};

firebase.initializeApp(config);

export default firebase;

firebaseにコンソールからログインする。

firebase login

firebaseの初期設定をする。
画面に従って設定すると自動でいろんなファイルが作られる。
ここではpublicフォルダ配下のファイルを上書きするか聞かれるが、拒否しよう。

firebase init

ここまで来ればもうFirebaseが使える。
試しにユーザー作成をしてみる。
Firebase Console にログインし、[Authentication]⇒[ログイン方法]から、[メール/パスワード]を有効にしておく。
その後、React側で以下記述でユーザー作成ができるようになる。

login.tsx
import firebase from 'firebase';
import firebaseConfig from './config/firebase';

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(user => {
    alert("register complete!")
  })
  .catch(error => {
    alert('firebase error :' + error);
  });

アプリのデプロイ

せっかくなのでアプリをデプロイしよう。
まずはfirebase-toolsをインストールする。

npm install -g firebase-tools

アプリをビルドする。

yarn build

デプロイする。これで以下URLでアプリにアクセスできるようになる。
https://your-app-name.firebaseapp.com/

firebase deploy
hatena-corp
「知る」「つながる」「表現する」で新しい体験を提供し、人の生活を豊かにする
https://hatenacorp.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away