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';
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.
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.
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!!?
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...
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 ✌🏿✌🏿
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?
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: th-cam.com/video/hQI_w4AZ92I/w-d-xo.html
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.
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.
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.
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 :(
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.
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.
@@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.
NEW VIDEO Version 9: th-cam.com/video/-yrnWnN0g9o/w-d-xo.html 👈
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';
Maan i love you, I've been thinking what's wrong for almost and hour..
@@loxx8782 happy this saved your time! :)
Thank you Thank you! This is by far the easiest and simplest React-Firebase tutorial on TH-cam. Perfect!
This is the simplest tutorial ive seen and the best as well.
Thank you very much.
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.
thank you sooooooooo much this is what I was looking for. this video deserves more likes :3
Thanks bro your video helped me Alot in a task where I was stuck from too long
This tutorial is so simple and short, I like it
thanks , it helped me to add firebase 1 day before my project submission .
💯
Omg !!! Thank you !!! I'm struggleling for a looooooooong time with this !
Awesome tutorial! Well explained! You deserve more subscribers!
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
You deserve a like and comment dude. Thanks for the video
I appreciate that :D
This turtorial was really helpful and straignt to the point. Thanks a lot.
Thank You So much!!! I've been looking for this since a long time. You really saved me!! Thank You :D
this is the content i am looking for
Thanks... It was quite easy to follow and understand
Very nice video.U r helping us a lot!!
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.
thanks bro! I was struggling adding the SDK and initialising Firebase
you saved my life . perfect tutorial
what i was looking for! thanks
Wow amazing. Well done. Thank you
Thanks for this nice tutorial! Firebase v9 should import like firebase/compat/your_package instaed of just firebase/your_pacakge
Thank youuuuu!!
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
Glad you liked it 😁
@@SamFromaway Yes it is super.. Thanks again..alsoo thanks for part 2.
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.
Thank you!
This helped me a lot!
Thank you!
Do we have any ways to add another field directly in database that we create ?
Thanks a lot u really helped me🙏
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!!?
He created the file before
@@finne.7726 how and also how can i do that
Thank you so much!!!! This is exactly what I was looking for!!! How can I upload to the database from react using a state
Thanks! very helpful
thank you soo much!
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...
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 ✌🏿✌🏿
Thanks that's a real compliment :D
@@SamFromaway I got some issues while running my website thesame procedures you did I also did but I just get an error
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?
How does putting the keys in an env-file protect them? The keys are still being loaded into the browser aren't they?
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: th-cam.com/video/hQI_w4AZ92I/w-d-xo.html
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 ?
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.
what version firebase is this
Is the .env file required?
Great video!!!!
it helped for real.
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.
yes no one can tell you what happens when you refresh de page 200 times, how to handle unsubscribe etc.
awesome !
Gracias, muy buen video
Gracias
Thank you, thank you, thank you!!!!
cant find firebase js in my files
So what if each school had a collection named 'students'. Each with their name and favorite subject. How would you display that?
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.
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 :(
For anyone getting error TypeError: Assignment to constant variable.
Use:
var [loading, setLoading] = useState(false);
instead of:
const [loading, setLoading] = useState(false);
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.
@@SamFromaway I am new to JS and React, thanks for the info 😁
i luv u ty
My data is not coming ,but I am getting no error
Why you're not using Realtime database instead of using firestore?
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.
@@SamFromaway Thank you for your explanation.
@@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.
Not working 😭
Trash tut.