Firebase Tutorial With React Hooks

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 ต.ค. 2024

ความคิดเห็น • 168

  • @leebuckle8288
    @leebuckle8288 5 ปีที่แล้ว +22

    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!

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  5 ปีที่แล้ว +2

      This is absolutely correct. Thanks for sharing.

    • @leebuckle8288
      @leebuckle8288 5 ปีที่แล้ว +1

      @@BaylorBreaksItDown Thank you for the concise tutorial! Repeat rendering had me stumped for hours before this!

    • @hessaa1712
      @hessaa1712 5 ปีที่แล้ว +1

      right .. this was the issue thank you for pointing it :3

    • @leebuckle8288
      @leebuckle8288 5 ปีที่แล้ว

      @@hessaa1712 Gladly :) I was stuck for hours before figuring this out

  • @gwapster13
    @gwapster13 5 ปีที่แล้ว +57

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

  • @mudyeet_
    @mudyeet_ 4 ปีที่แล้ว +1

    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
    @ginocode 4 ปีที่แล้ว

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

  • @ioanoltean9868
    @ioanoltean9868 4 ปีที่แล้ว +10

    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;
    }

    • @oakes680
      @oakes680 4 ปีที่แล้ว

      goat

  • @nillkillbillthrill
    @nillkillbillthrill 4 ปีที่แล้ว +2

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

  • @benabernethy1405
    @benabernethy1405 3 ปีที่แล้ว

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

  • @eddie_thinhle
    @eddie_thinhle 3 ปีที่แล้ว

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

  • @xaedowulf
    @xaedowulf 3 ปีที่แล้ว

    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 :)

  • @notjohnAtall
    @notjohnAtall 5 ปีที่แล้ว +3

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

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  5 ปีที่แล้ว

      Thank you, that is awesome to hear! I’m glad you found it helpful. There’s always something cool to learn when using hooks.

  • @obitouchiha2445
    @obitouchiha2445 3 ปีที่แล้ว

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

  • @juleschancel6387
    @juleschancel6387 4 ปีที่แล้ว

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

  • @bugovcizubv
    @bugovcizubv 3 ปีที่แล้ว

    Very helpful man, quick and to the point

  • @vincesavvy2844
    @vincesavvy2844 5 ปีที่แล้ว +4

    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!

  • @Smile-to2ii
    @Smile-to2ii 4 ปีที่แล้ว +2

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

  • @tucker1351
    @tucker1351 3 ปีที่แล้ว

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

  • @jcanguyen1
    @jcanguyen1 4 ปีที่แล้ว +2

    Brilliant breakdown. Thanks for making it simple and painless.

  • @popaname
    @popaname 3 ปีที่แล้ว

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

  • @titus6723
    @titus6723 5 ปีที่แล้ว +1

    THANK YOU! i was getting infinite console logs from the subscription every which way i wrote my code. Its working now :) I was stuck on this for a good 6hrs

  • @shivankyadav8314
    @shivankyadav8314 4 ปีที่แล้ว +1

    This Is exactly what I have been looking for. He abstracted the data fetching functionality in a seperate function. If you don't do so, React will render blank screen as it takes some time to fetch data from firestore leading to rendering empty component beforehand

  • @ihsanashi
    @ihsanashi 4 ปีที่แล้ว

    This video was the perfect solution to the issue I was facing with React/Firebase. thank you so much!

  • @rainamra
    @rainamra 3 ปีที่แล้ว

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

  • @saurabhshah23
    @saurabhshah23 4 ปีที่แล้ว

    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

  • @iliyanyankov7401
    @iliyanyankov7401 4 ปีที่แล้ว

    Thank you ! I've learn a lot. I found your video just on time when I start learning about react hooks, to see how to use them with firebase was really important for me.

  • @MartinGarnett
    @MartinGarnett 3 ปีที่แล้ว

    Such a great tutorial. Very entertaining, yet simple and to the point. 😁

  • @DamiDimension
    @DamiDimension 5 ปีที่แล้ว +2

    Great video, and excellent presenttation. Was having issues with firebase re-rendering. I think I have an idea now

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  5 ปีที่แล้ว

      Thank you, That’s great to hear! The unsubscribe callback is easy to miss.

  • @ewertontertuliano3359
    @ewertontertuliano3359 4 ปีที่แล้ว

    Thank you very much for this tutorial. I used to set my database as Realtime but from now on is Cloud and based in your tutorial. THANK YOU!!!!

  • @yitzchaksviridyuk932
    @yitzchaksviridyuk932 3 ปีที่แล้ว

    Awesome video. You kept a really good pace. Thanks :)

  • @リョウタ-t9o
    @リョウタ-t9o 5 ปีที่แล้ว +1

    I think I want to use the firebase and React.js. this video was so good and I understood how to use about firebase. thank you.

  • @DooshyDave
    @DooshyDave 4 ปีที่แล้ว

    thank you for making this! been struggling all week with this

  • @bonnquez3524
    @bonnquez3524 4 ปีที่แล้ว

    Thanks a lot for the video man! It's good to get the hands dirty on the basic operations.

  • @drewstifler1440
    @drewstifler1440 4 ปีที่แล้ว

    Learned and entertained at the same time.

  • @WackoRulz
    @WackoRulz 3 ปีที่แล้ว

    it took me hours to find you, this works

  • @Felipe-pb9gu
    @Felipe-pb9gu 5 ปีที่แล้ว +4

    Thank you!!! It would be nice another CRUD project with firebase authentication

  • @MRCDF7
    @MRCDF7 5 ปีที่แล้ว

    Subscribed and liked! Thanks for the very fast explanation that I was seeking! Please do more react and firebase tudorials :D

  • @SimulatorMod
    @SimulatorMod 4 ปีที่แล้ว

    This tutorial is just Hilarious! But also very useful since I'm new to Firestore. Thanks!

  • @ashinlaurel5862
    @ashinlaurel5862 4 ปีที่แล้ว

    Dude Amazing stuff!! You helped me built a webpage for a company!!

  • @shadid2010
    @shadid2010 4 ปีที่แล้ว

    i frigging love you dude! spent an entire day trying to figure this out!! finally got it! thanks to you :D

  • @neilkapadia7
    @neilkapadia7 4 ปีที่แล้ว

    Very Precise and helpful

  • @AndrewOnTestingCars
    @AndrewOnTestingCars 5 ปีที่แล้ว

    Fantastic! Superb video! I loved the way it was simple but was explained with a fully comprehensive example. Thanks very much from Ireland ☘ subscribed!

  • @danielgreenfield8970
    @danielgreenfield8970 4 ปีที่แล้ว

    Wonderful Tutorial, helped me tons!

  • @thomasfawkes5440
    @thomasfawkes5440 4 ปีที่แล้ว

    Ouah AWSOME work !!! thanks for this video . They are a few day a search to understand firebase with React, I have understand with you. Thanks

  • @mf2810
    @mf2810 5 ปีที่แล้ว

    Excellent video - the code is clear and concise and the explanations of the flow are really helpful. Thank you.

  • @krutomjer
    @krutomjer 4 ปีที่แล้ว

    Awesome video and to the point, I loved it ! Bruh, this is the stuff !

    • @krutomjer
      @krutomjer 4 ปีที่แล้ว

      I'mma reply to myself but whatever, this is the stuff we need, not the 45 minutes video of theory

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  4 ปีที่แล้ว

      Thank you so much!!

  • @AdvaitDhingra
    @AdvaitDhingra 4 ปีที่แล้ว

    Thank you so much sir. This video really helped

  • @aaronrothwell7615
    @aaronrothwell7615 5 ปีที่แล้ว

    Very concise and informative, loved it.

  • @akcoder974
    @akcoder974 3 ปีที่แล้ว

    Exceptional video thank u for that..

  • @cztery7
    @cztery7 4 ปีที่แล้ว

    Thank you so much for this film! You saved my money and a lot of hours I'd spend on Udemy :)

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  4 ปีที่แล้ว

      You’re welcome. I’m glad you found it useful!

  • @kn58657
    @kn58657 5 ปีที่แล้ว +2

    Very helpful stuff! Thank you.

  • @MaciekTytko
    @MaciekTytko ปีที่แล้ว

    Thank You for your knowledge

  • @abhisheks1036
    @abhisheks1036 5 ปีที่แล้ว +1

    Thank you so much man you helped me a lot!!!

  • @avinashdhar18
    @avinashdhar18 4 ปีที่แล้ว

    Really found this very helpful

  • @gregduncan5993
    @gregduncan5993 5 ปีที่แล้ว +1

    Thanks for the great tutorial!

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  5 ปีที่แล้ว +1

      You’re welcome, I’m glad you found it helpful.

    • @gregduncan5993
      @gregduncan5993 5 ปีที่แล้ว

      @@BaylorBreaksItDown I have been trying to use firebase in a React app. Watching and trying to follow along and getting no where till I found this video. You nailed it. Thanks again.

  • @FahimMahmudChisti
    @FahimMahmudChisti 4 ปีที่แล้ว

    Thank you so much for a great tutorial!

  • @0sung
    @0sung 4 ปีที่แล้ว

    Great video thanks

  • @malikbrahimi7504
    @malikbrahimi7504 4 ปีที่แล้ว

    I like what you've done but ideally you should be able to sort without invoking a separate read. This will increase your usage and cost. This is especially true if you're doing a search filter on change using where on the collection.

  • @iammetelskiy
    @iammetelskiy 4 ปีที่แล้ว

    You are great lecturer!:)

  • @xaedowulf
    @xaedowulf 3 ปีที่แล้ว

    two questions:
    1. Does the subscription/websockets connection reduce the number of calls to firestore? (or does the new snapshot entry still cause a new firestore query to happen?) Trying to save on cost
    2. Why wouldn't you want to sort the times state/array locally instead of sending another call to your firestore to do it?

  • @yogajourney9519
    @yogajourney9519 3 ปีที่แล้ว

    Very helpful, thanks. Could you make the font bigger next time though? I could barely see it on my laptop. Anyways, thanks again for the great tutorial!

  • @Jacur1980
    @Jacur1980 4 ปีที่แล้ว

    great energy Sir, thanks for the material

  • @lemon1879
    @lemon1879 5 ปีที่แล้ว

    Thanks daddy. Watched in double speed.

  • @a3oao
    @a3oao 5 ปีที่แล้ว +2

    This is awesome! Thank you!

  • @vikasni95
    @vikasni95 4 ปีที่แล้ว

    Everything is perfect.. But plz zoom in ur system screen... We cant see the text... 😊

  • @bswill5077
    @bswill5077 3 ปีที่แล้ว +1

    I wish this was bigger fonts. I cant read it

  • @surendrareddyreddy1913
    @surendrareddyreddy1913 4 ปีที่แล้ว

    oh my god great stuff , i am subscribing

  • @nunosantosdev
    @nunosantosdev 3 ปีที่แล้ว

    Just great...👍

  • @sharqyyem
    @sharqyyem 5 ปีที่แล้ว

    Great tutorial
    Thanks bro

  • @jumavipe
    @jumavipe 4 ปีที่แล้ว

    I followed and applied all of your tips to my own app, what do you recommned to use to unit test this?

  • @MonkeyDLuffy-tp3ln
    @MonkeyDLuffy-tp3ln 4 ปีที่แล้ว

    very nice. thanks bro!

  • @rustonemperua5382
    @rustonemperua5382 5 ปีที่แล้ว

    17: 37 lol. Nice comment. Subscribed!

  • @kurdi-1919
    @kurdi-1919 3 ปีที่แล้ว

    It's amazing that he memorized 4 hours is 14400 seconds!

  • @hernaan9
    @hernaan9 4 ปีที่แล้ว

    really good! thank you

  • @akshayshewate6812
    @akshayshewate6812 4 ปีที่แล้ว +1

    Clean code good

  • @sergeyplotnikov5031
    @sergeyplotnikov5031 5 ปีที่แล้ว +1

    It is fantastic!!

  • @craigjohnson8279
    @craigjohnson8279 5 ปีที่แล้ว +1

    Great video Baylor. Next time please zoom in on the screen. Watching online the font-size is too small.

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  5 ปีที่แล้ว +1

      That is good to know. Thanks for the heads up Craig!

  • @victorsoriano9841
    @victorsoriano9841 4 ปีที่แล้ว

    Great tutorial!

  • @AnanthalakshmiSankar
    @AnanthalakshmiSankar 4 ปีที่แล้ว

    Baylor you are lazy.. haha! This is a really good watch.

  • @TheFiredesign
    @TheFiredesign 4 ปีที่แล้ว +1

    Thanks man!

  • @nicolasdupere
    @nicolasdupere 3 ปีที่แล้ว

    Love it!

  • @radovansurlak7445
    @radovansurlak7445 4 ปีที่แล้ว

    Thanks a lot :)

  • @peresola3885
    @peresola3885 4 ปีที่แล้ว

    wow! thanks for the tutorial

  • @2ntuan
    @2ntuan 4 ปีที่แล้ว +2

    Great tutorial! Could you please upload the code to github? Thank you very much!

  • @KeithPrice-OurBusinessHero
    @KeithPrice-OurBusinessHero 5 ปีที่แล้ว

    Does this tutorial cover how to limit which data a logged in user can read and/or write?

  • @magdikatay6661
    @magdikatay6661 4 ปีที่แล้ว

    Thank you!!!!

  • @nicotomomate
    @nicotomomate 4 ปีที่แล้ว

    Great video! Please Zoom the code next time

  • @AdrianLopez-zr8oq
    @AdrianLopez-zr8oq 4 ปีที่แล้ว

    good guide about react hooks and firebase, thanks mate, but just for curiosity, how hell you do for call "useState" hook on a function that´s not capitalize like time-list.jsx xD, after several time i was surrender to capitalize the function for run the app wihout problems...
    edit: i tried that´s before read a Lee Buckle comment jajaj

  • @obitouchiha2445
    @obitouchiha2445 3 ปีที่แล้ว

    I have a question...I have a form in a different component which I used to store data in firestore. When I submit that form I want to show a message like 'successfully added' but what is happening there is that all of my states in that form component is going their default value....it's like the whole is restarting so the form component states are going their default value...any solution would be really appreciated

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  3 ปีที่แล้ว

      Double check the onSubmit event handler is calling preventDefault. While I’m not sure that’s the problem, it might be.
      If you can to share a link to the code for the component somewhere I’d love to take a look and see if I can help.

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  3 ปีที่แล้ว

      It looks like the app is rerendering from GetDataFromFirestore in the App.js component.
      That function, subscribing to firestore and calling setState, is causing the entire App.js component to rerender. In turn, the router, route, and the AddProduct components are also rerendering and resetting their states.
      The problem is resolved when you move your Firestore subscription to Home.js because you are pushing that state change to the child component, which doesn’t cause the entire tree to render.

  • @areegfahad5968
    @areegfahad5968 3 ปีที่แล้ว

    i realy like that

  • @pjalmeida8732
    @pjalmeida8732 4 ปีที่แล้ว

    Can you make a CRUD with this video example?

  • @armanrozika
    @armanrozika 4 ปีที่แล้ว

    Hi Baylor, awesome video. I want to ask about onSnapshot, how it worked? I mean, it is so fast (like, instantly), even when I change network to slow 3G in devtools, it still fast. I noticed in XHR tab, when the app made request to firebase, request is still pending, but onSnapshot already fired and change the state in my react app. I thought it will wait until there's response from firebase, but that's not the case.

    • @armanrozika
      @armanrozika 4 ปีที่แล้ว

      I just found that onSnapshot will be fired when making request to firebase database, even when request is not success, the app state will be changed. In this case, how to handle error, like network error, lost connection? I know this might be a rare condition, but I am curious haha

  • @zotyovegh
    @zotyovegh 4 ปีที่แล้ว

    May I ask how is it possible to retrieve only 1 object by an index? Let's say you have saved 20 times above, and willing to write out who was the 3rd fastest. I am doing something in my code where I need such thing, but 'times[2].title' just doesn't return anything and drops an error: 'TypeError: Cannot read property 'highscore' of undefined'
    When I use a manually created list, the code above returns the 3rd fastest time correctly. But with the list we are working here, that is retrieved from firebase, it just doesn't work. If I try to print out: console.log(times[2]), the object is displayed beautifully. But after writing the '.title' there, it isn't. Do you have a solution for such scenario? Or probably straight ask the firebase which is the 3rd time in the database?

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  4 ปีที่แล้ว +1

      I think you’d want to use the +startAt+ and +limit+ query methods to offset the first result returned. Firebase will likely return an array, but it should only be a single item. Let me know if this works, this is an interesting addition.

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  4 ปีที่แล้ว +1

      Also, I think when you are referencing the +times[2].title+ and it errors, this is because the array starts out empty and JavaScript is returning +undefined+. Another solution would be to check if it exists with an &&.
      const thirdTime = times[2] && times[2].title
      Or using a ternary to have more control over the output
      const thirdTime = times[2] ? times[2].title : “N/A”

    • @zotyovegh
      @zotyovegh 4 ปีที่แล้ว

      @@BaylorBreaksItDown Yeah this second one is what I was looking for! Thank you very much, I have wasted so much time on this issue, and had no clue why didn't it work... Also, your response time is exceptionally fast! Thanks man for the help!

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  4 ปีที่แล้ว

      Thank you and I’m glad I could help!

  • @driijko
    @driijko 4 ปีที่แล้ว

    Thanks, this was extremely useful to me. Hard to find a Firebase/React tutorial that isn't all about integrating Firebase with Redux, which I don't use. Your onscreen text is a bit hard to read though, even with video streaming at 1080.

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  4 ปีที่แล้ว

      I’m glad you found it useful! You’re right, the text is really hard to read. Thanks for watching!

  • @veja-e-aprenda
    @veja-e-aprenda 4 ปีที่แล้ว

    Thanks, dude!

  • @kbshegde8539
    @kbshegde8539 4 ปีที่แล้ว

    Can you provide source....Super explanation

  • @tatendabako6363
    @tatendabako6363 4 ปีที่แล้ว

    This guy types really fast... Geeezz

  • @mohamedalaa97
    @mohamedalaa97 4 ปีที่แล้ว

    please Can you make font bigger on your VS code ?
    I cant read your code

  • @richalk
    @richalk 5 ปีที่แล้ว +1

    baylor, love your work--can you help a fellow mississippian out and send a link to this css?

  • @AshleyTennyson
    @AshleyTennyson 4 ปีที่แล้ว

    sometimes on console snapshot debugger is working but mostly showing snapshot is not defined and it is not reading any data from our firestore, showing docs: array[0], even in firestore database there are two id .

    • @BaylorBreaksItDown
      @BaylorBreaksItDown  4 ปีที่แล้ว +1

      Any chance you can upload to github and I’ll take a look.

    • @AshleyTennyson
      @AshleyTennyson 4 ปีที่แล้ว

      I solved that problem somehow, I just need to ask ,if we need to add a delete option also how and where to write it.

    • @justinsmith6544
      @justinsmith6544 4 ปีที่แล้ว

      Any chance you can say how you solved this? I am facing the same issue.

    • @AshleyTennyson
      @AshleyTennyson 4 ปีที่แล้ว

      @@justinsmith6544 Yeah, that was solved , my error was i was using name of the collection wrong, Instead of Notifications i was using Notfications , small typo . Just make sure you are using right collection/database name. :)

  • @KushPatel
    @KushPatel 3 ปีที่แล้ว

    Great Tutorial! I think your brain moves too fast your mouth LOL

  • @daveckw
    @daveckw 5 ปีที่แล้ว

    Hi, do you have the sample code for this tutorial?