React HOOKs×FirebaseでInstagramクローンを作った

## 概要

React×FirebaseによるSPA開発を学ぶために開発しました。

![f8b7ea48-1bdb-4266-8e47-5d7fc8373362.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438597/84c81fac-b82f-46b0-1c48-bcc5706b31b0.png)

![9ab89e9d-1f39-465f-ba2d-4ed0072f50f8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438597/f7761c9c-61dd-3583-07b6-99def803f8f6.png)


[demo](https://instagram-clone-react-b796c.web.app/)
[github](https://github.com/newt0/instagram-clone-react)

HOOKsやFunctional Componentを使用したReactの最新の書き方に則ったコードを心掛けているので、Reactを勉強中の方にはGithubレポジトリが参考になると思います。


## 使用技術

- React
- Hooks
- Functional Component
- firebase
- Material UI
- BEM


## 参考

[React開発効率を3倍にするVS Code拡張機能&環境設定](https://qiita.com/newt0/items/b7810fb38c339ec5e4a7)
[React初案件獲得までの流れ(学習・案件探し・面接・契約まで)](https://qiita.com/newt0/items/975a379de904858dd0f9)

[The Complete React Developer Course (w/ Hooks and Redux)](https://www.udemy.com/course/react-2nd-edition/)
[Universal React with Next.js - The Ultimate Guide](https://px.a8.net/svt/ejp?a8mat=3BK8OP+16V8C2+3L4M+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Funiversal-react-with-nextjs-the-ultimate-guide%2F)
[React Native入門：ニュースアプリを作りながら覚えよう/Hooks対応 2020年版](https://px.a8.net/svt/ejp?a8mat=3BK8OP+16V8C2+3L4M+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Freact-native-first-step%2F)
[React.js & Next.js超入門](https://amzn.to/2WwaXwQ)
[実践Firestore](https://amzn.to/3auotcD)
[初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発](https://amzn.to/3h0S7aJ)

<a href="https://www.amazon.co.jp/dp/B07X7DHZ9F/ref=as_li_ss_il?&linkCode=li2&tag=fden02-22&linkId=0b5b3306ff6ecee8f89a30f15b492aa9&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B07X7DHZ9F&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=fden02-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=fden02-22&language=ja_JP&l=li2&o=9&a=B07X7DHZ9F" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><a href="https://www.amazon.co.jp/dp/B0851BGDQG/ref=as_li_ss_il?&linkCode=li2&tag=fden02-22&linkId=fedb0f3b6f6cc9bbc2a5b25b79509ef5&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0851BGDQG&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=fden02-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=fden02-22&language=ja_JP&l=li2&o=9&a=B0851BGDQG" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><a href="https://www.amazon.co.jp/%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AEJavaScript-%E7%AC%AC3%E7%89%88-%E2%80%95ES2015%E4%BB%A5%E9%99%8D%E3%81%AE%E6%9C%80%E6%96%B0%E3%82%A6%E3%82%A7%E3%83%96%E9%96%8B%E7%99%BA-Ethan-Brown/dp/4873117836/ref=as_li_ss_il?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=298855TL8IQBA&dchild=1&keywords=javascript&qid=1608361534&sprefix=JavSc,aps,270&sr=8-18&linkCode=li2&tag=fden02-22&linkId=9eb63941ebf502c87942606420c6108a&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4873117836&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=fden02-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=fden02-22&language=ja_JP&l=li2&o=9&a=4873117836" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />