ご依頼を検討されている方

【React×Firebase入門】

URLをコピーする
URLをコピーしました!

【React Firebase入門】


想定読者

Reactアプリの機能をグレードアップするためにFirebaseを導入したいなぁ。

本記事は上記の方におすすめです。

おにちゃん

執筆者:Reactアプリを初期簿ながら開発している僕が詳しく「React×Firebase」の使い方について解説します。

本記事:React×FIirebaseでできること
  1. Hosting→Reactアプリを簡単にデプロイできる
  2. authentication→ログイン機能など
  3. 今後追加予定

Firebaseを使いこなせるようになると、Reactアプリの幅が広がりますので、この機会にぜひ挑戦してみてください。

目次

【レベル1】Reactアプリをfirebase Hostingでデプロイさせよう

ReactアプリをFirebase Hostingを活用してデプロイする手順は下記の通りです。

本記事の難易度
  1. Firebaseの初期設定を行う
  2. Firebase SDKを導入する
  3. ReactアプリとFirebaseプロジェクトと連携する
  4. ReactアプリをFirebase Hostingを使ってデプロイ
おにちゃん

レベル1を行いたい方は下記の記事を参考にしてみてください。


レベル1で求められるReactとFirebaseのスキル

Hostingでのデプロイに求められるReactとFirebaseのスキルは下記程度です。

  • Reactの環境構築が問題なくできる
  • ターミナルについて理解できている方
おにちゃん

このレベルに自信がない方は下記の記事で学習してから挑戦してみてください。


【レベル2】reactアプリにfirebaseのauth機能を実装しよう

ReactアプリにFIrebaseのauth機能を実装する方法は下記の通りです。

本記事の難易度
  1. .envファイルとfirebase.jsを作成する
  2. firebaseのauthentication設定を行う
  3. App.jsファイルを設定する
  4. AuthContext.jsxを設定する
  5. その他ファイルを設定する
おにちゃん

レベル2を行いたい方は下記の記事を参考にしてみてください。


レベル2で求められるReactとFirebaseのスキル

Reactアプリにauth機能を導入する際に必要となるスキルは下記の通りです。

おにちゃん

Firebaseのauth機能を実装するには上記のスキルは必要最低限必要なので、必ず理解しておきましょう。


React×Firebaseをもっと学びたい方向け

React×Firebaseでもっと学びたい方は下記の方法があります。

React×Firebaseでもっと学びたい方
  1. 有料動画
  2. プログラミングスクール


React×FirebaseをUdemyで学ぶ

おにちゃん

React×firebaseを学びたい方はUdemyを活用しましょう。


React×Firebaseをスクールで学ぶ

React×Firebaseをスクールで学ぶことはできません。

無料体験できるプログラミングスクール
  1. TechAcademy 無料体験
    →色々なコースが充実しているので、迷っている方はこのスクールをおすすめします
  2. 侍エンジニア塾 無料体験
    →オンラインコミュニティがあるので、費用がない方におすすめ
  3. chot.design
    →月額1100円でWebデザイン系の基礎を学ぶことができる


まとめ:React×firebaseを体系的学びたい方はおにちゃん塾がおすすめです。

ここまでで「【React×Firebase入門】」の解説は以上です。

プログラミングだけでなく技術ブログで稼ぎたい方は下記の記事を参考にしてみてください。

おにちゃん

本記事は以上です。最後までご覧下さりありがとうございました。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる