Firebase Tutorial With React Hooks

React and Firestore Tutorial With Hooks. Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform.

I'll show you everything you need to know about using Cloud Firestore with useEffect and useState. After watching this video you'll see why React is so much better than Angular.

We'll be creating a simple scoreboard application that allows us to post and sort time entries.

[leebuckle]

If anybody is having the 'React Hook "useEffect" is called in function...' issue, try capitalizing the 'useTimes' function so it's 'UseTimes', this will cause it to be read as a component instead of a function and should solve the issue.


Other than that (which is probably version related), amazing tutorial!

[gwapster]

This is great, thank you! One suggestion: maybe increase font size on the editor, for people watching this on smaller screens.

[mudyeet_]

I applied for an internship and I was desperately looking to learn how to integrate firebase with React because, well, that's what who's hiring me needs me to know. Now, I can't say I just became a master of firebase after watching this video, but I can say that it did give me a lot of tips that I can use in the task given to me. Thank you!

[ginocode]

Love a tutor who can be professional yet not afraid to have fun and brag about their lockpicking skills. Awesome vid!

[nillkillbillthrill]

Your self-deprecating humor is hilarious! And your relaxed attitude and quick, focused, explanation is damn good. Thank you! Subscribed.

[xaedowulf]

I seriously thought I had my video playback speed set to "2" when watching this (which Is what I usually do as other tutorial narrations are always pretty slow). Loved the speed and crazy fast typing skills :)

[eddie_thinhle]

You rock! I came to see your video in 2021 and learned such useful knowledge about using Firebase with React. Thank you so much!

[benabernethy]

Thank you so much. One of the best tutorials I've come across so far.

[obitouchiha]

Hats Off man for this great React Hooks and Firestore tutorial. You got a sub here

[ioanoltean]

The CSS code:


body {
background: #f2f2f2;
}

.App {
max-width: 700px;
margin: 2rem auto;
background: #fff;
padding: 2rem;
border-radius: 4px;
box-shadow: 0 2px 4px #ddd;
}

h1 {
margin: 0;
}

.time-entry {
display: flex;
justify-content: space-between;
width: 50%;
}

.time {
color: #776ad4;
}

form {
background: #f2f2f2;
padding: 1rem;
border-radius: 4px;
box-shadow: inset 0 2px 4px #ddd;
}

form h4 {
margin: 0 0 1rem;
}

form div {
margin-bottom: 0.5rem;
}

form label {
display: block;
}

[bugovcizubv]

Very helpful man, quick and to the point

[Gaandfaadguy]

you are a gem. I wish i could buy a coffee for you

[juleschancel]

Banged my head on several other videos about react and firebase. yours is just awesome. thanks !

[vincesavvy]

Dude, that was amazing!! I never used hooks before, I was looking for a tutorial on how to implement login with google and found this instead... That was just WOW! Instant subscribe + notif bell... I'm never not using this in all my future projects!

[notjohnAtall]

Yesy Yes, I did it. Thanks for this. I never really understood deeply how to unsubscribe inside useEffect. This really opened my mind.

[tucker]

You are a weapon, best tutorial i've found and you're hilarious. Many thanks!!

[popaname]

You're like a wizard! Thank you so much been struggling all day finally found my answers.

[saurabhshah]

Video is awesome bro.. quick sneak-peek into realtime firestore subscription.
Your speed is commendable.. fun to see and listen to you.. it was hard to hit that fwd button ;-) haha

[rainamra]

This is great! Really help me with my project, like the way you explain things. Make it seems so simple and easy :))

[drewstifler]

Learned and entertained at the same time.