How To Set Up React With Firebase/Firestore | Get & Realtime | Part 1

[@SamFromaway]

NEW VIDEO Version 9: kzbin.info/www/bejne/Y6rVn4qkg5Wab9E 👈

[@opus1magnum]

Thanks for video! Btw, whoever got an error after trying to import from 'firebase/app' - just letting you know that imports now (from v9 of firebase) must be made from 'firebase/compat/app'. Like this - import firebase from 'firebase/compat/app';

[@loxx8782]

Maan i love you, I've been thinking what's wrong for almost and hour..

[@opus1magnum]

@@loxx8782 happy this saved your time! :)

[@trevorallen7554]

Thank you Thank you! This is by far the easiest and simplest React-Firebase tutorial on KZbin. Perfect!

[@yusufdimari3512]

This is the simplest tutorial ive seen and the best as well. Thank you very much.

[@sohamjain7803]

thank you so much, its a bit out of date with v9 requiring slightly different imports but the way you walked through how to do everything was so easy to understand.

[@muhammadosama4593]

I was facing some error when I connected firebase with my react app. But after thi video I have solved the problem. Thank You and God bless you

[@mahedikamal8472]

thanks , it helped me to add firebase 1 day before my project submission .

[@mbogomahad3125]

💯

[@AkashSatre]

Thanks bro your video helped me Alot in a task where I was stuck from too long

[@hassaneloufir8440]

thank you sooooooooo much this is what I was looking for. this video deserves more likes :3

[@pjguitar15]

This tutorial is so simple and short, I like it

[@dattubhargavmedarametla576]

You deserve a like and comment dude. Thanks for the video

[@SamFromaway]

I appreciate that :D

[@kalpeshpatil741]

this is the content i am looking for

[@laurentgenereux4159]

Omg !!! Thank you !!! I'm struggleling for a looooooooong time with this !

[@allansaleh6267]

Awesome tutorial! Well explained! You deserve more subscribers!

[@santacroce2489]

you saved my life . perfect tutorial

[@dbsjaks_56888]

what i was looking for! thanks

[@stelladare5741]

This turtorial was really helpful and straignt to the point. Thanks a lot.

[@estebanmunchjones7946]

thanks bro! I was struggling adding the SDK and initialising Firebase

[@antoniobraccio5210]

i have this problem : index.js:1 [2021-03-21T13:25:22.609Z] @firebase/firestore: Firestore (8.3.1): Could not reach Cloud Firestore backend. Connection failed 1 times.

[@ade-joshe]

Thanks... It was quite easy to follow and understand

[@chiranjeevichowdary5948]

Very nice video.U r helping us a lot!!

[@jaggyjut]

what if we also want to upload the picture of the school in firebase storage and also be able to perform CRUD operations on the image.

[@pauljohny200]

I needed to understand this. .You have put the right video in right time .Thanks The other good news is you have put the code in github

[@SamFromaway]

Glad you liked it 😁

[@pauljohny200]

@@SamFromaway Yes it is super.. Thanks again..alsoo thanks for part 2.

[@Yosk-p8j]

Wow amazing. Well done. Thank you

[@mahanmashoof1989]

Thanks for this nice tutorial! Firebase v9 should import like firebase/compat/your_package instaed of just firebase/your_pacakge

[@ChrisSteurer]

Thank youuuuu!!

[@wildrap9804]

There are many errors in the setup: 1. If statement before the use effect 2. Expected an assignment or function call and instead saw an expression 3. Firebase does not work 4. getMember Data does not work either...

[@bharatigogoi2779]

Thank You So much!!! I've been looking for this since a long time. You really saved me!! Thank You :D

[@brittosmonteiro]

This helped me a lot! Thank you!

[@tronganhnguyenthanh1157]

Do we have any ways to add another field directly in database that we create ?

[@arsenemn]

Thanks a lot u really helped me🙏

[@svorskemattias]

How does putting the keys in an env-file protect them? The keys are still being loaded into the browser aren't they?

[@SamFromaway]

You are correct, it's just one of many things to protect the database. The .env is primarily a good practice, because sometimes there are server side keys that are not exposed. How to protect the database when you have client side keys is with security rules. More about that here: kzbin.info/www/bejne/noKskKpqdr9saKs

[@showbikshowmma3520]

one big question how did u change all those stuff in one click 11:31 how did u changed all app keys to for example apiKey: process.env.REACT_APP_API_KEY, how!!?

[@finne.7726]

He created the file before

[@showbikshowmma3520]

@@finne.7726 how and also how can i do that

[@TheNamesJT]

So what does someone do if they already coded a rest api locally with express and using fake data as a json file in my project. I'm wanting to host my backend on firebase the api and database would this series be right for me?

[@sushantkamble736]

Thanks! very helpful

[@michaelantoniobutler3846]

Is the .env file required?

[@xplore2000]

Hello there sir I really like the way you are explaining to us I don't know if you know Shaun for the net ninja channel? You're nice in explanation like Shaun man. Thanks for making me understand how to work with react hooks and firebase ✌🏿✌🏿

[@SamFromaway]

Thanks that's a real compliment :D

[@xplore2000]

@@SamFromaway I got some issues while running my website thesame procedures you did I also did but I just get an error

[@timzeynalov3537]

I cant understnund but why do we need to use setLoading true and false when we try to take data from document and use it ?

[@SamFromaway]

Because first we are setting loading to true, so the loading text shows, then we start the asynchronous action to try getting the date, once we habe the data we set loading to false so the loading text dissapears.

[@probro8747]

thank you soo much!

[@kennygunderman]

Thank you!

[@evernolasco19]

Thank you so much!!!! This is exactly what I was looking for!!! How can I upload to the database from react using a state

[@lardosian]

So I assume the realtime function is using graphq, subscriptions and websockets in the background to update in realtime. Personally I'm using aws amplify framework and DataStore to do similar. DataStore is an offline first approach where the user interacts with a local browser indexdb which syncs with the cloud dynamodb.

[@rgb2647]

yes no one can tell you what happens when you refresh de page 200 times, how to handle unsubscribe etc.

[@p0mf47]

what version firebase is this

[@binaystha1813]

Great video!!!!

[@mbogomahad3125]

it helped for real.

[@maiaklimenko6614]

The setup looks so easy, but, no matter what I do, it always returns empty data. The collection has items and the names are correct, but data is never there :(

[@eduardoayora2327]

Gracias, muy buen video

[@SamFromaway]

Gracias

[@maratfaizer]

awesome !

[@INFLUENCERPOINTSS]

cant find firebase js in my files

[@mrdeangray]

Thank you, thank you, thank you!!!!

[@perynal]

So what if each school had a collection named 'students'. Each with their name and favorite subject. How would you display that?

[@SamFromaway]

You probably mean how to structure the database for that? Then you have a so called one (school) to many (students) relationship. As with Firebase you are not able to really do "relationships" with your different collections, you have those options. 1. Put a student's set (array) in each school document itself. If for some reason you want it in a separate collection you'll do: 2 a). Reference a id-set (array) in each school document. 2 b). You reference the school in each student document itself. With 2 and 3 you just need to make sure to keep the id-set in schools and the students collection in sync as Firebase won't take care of that like a relational database.

[@chanmyaemaung]

Why you're not using Realtime database instead of using firestore?

[@SamFromaway]

It has some more features than the real time database and nowadays should be the default choice unless you need a specific feature that only the real time database has.

[@chanmyaemaung]

@@SamFromaway Thank you for your explanation.

[@chanmyaemaung]

@@SamFromaway How do I have to retrieve the single objects data without looping through and put it to the useState hook, that I have stored only one single objects in the firestore? I have subscribed your Channel because I love your teaching style and it is quite a bit easy to understand for me.

[@sealovingsoura3036]

My data is not coming ,but I am getting no error

[@Farhaan-td3dk]

For anyone getting error TypeError: Assignment to constant variable. Use: var [loading, setLoading] = useState(false); instead of: const [loading, setLoading] = useState(false);

[@SamFromaway]

Thanks for the idea. Bit you shouldn't reassign react state. Use immutable programming. So if you want to change state use `setLoading(newState)`. Also, in modern javascript we only use const or if we reasign a value, we use let. I hope it helps.

[@Farhaan-td3dk]

@@SamFromaway I am new to JS and React, thanks for the info 😁

[@seaNxgil]

i luv u ty

[@yogeshrajput5712]

Not working 😭

[@the_seg_faulter]

Trash tut.