Build an Expense Tracker | React Hooks & Context API

Поделиться
HTML-код
  • Опубликовано: 31 янв 2025

Комментарии • 561

  • @TraversyMedia
    @TraversyMedia  5 лет назад +184

    Here is part 2 where we take it a step further and build a backend API with Node/Express/MongoDB - ruclips.net/video/KyWaXA_NvT0/видео.html

    • @JustchillBro9
      @JustchillBro9 5 лет назад +1

      @@blockcoder8129 Hi, thanks for the code but I tried your code and it is throwing me an error " Cannot read properly 'apply' of undefined". If possible, can you please help me out with that. Thanks

    • @syednoman84
      @syednoman84 4 года назад +3

      Hi there - this seems very useful. Can you please share the video link for the plain vanilla javascript version of this app that you mentioned you converted to react in this video? Many thanks.

    • @igorpavlenko411
      @igorpavlenko411 4 года назад +2

      appreciate ur work man!!

    • @abhayganti8662
      @abhayganti8662 4 года назад +2

      @@syednoman84 I think the Vanilla JavaScript version is in his 20 Web Projects Udemy Course. Only the React version has a RUclips Video

    • @vickyvignesh3523
      @vickyvignesh3523 4 года назад +2

      Bard will you provide the correct structure to follow for react ... For Big application How to maintain Context API ,, Need some Folder Structure,

  • @MrTaraskoro
    @MrTaraskoro 5 лет назад +836

    Three years ago I tried to find simple and understandable video about the whole new and scary world of JS. And found this small channel with 15k subscribers where cool big guy explained basic stuff about JS. And after three years I still watch almost every video from Brad.
    And now you, Brad reached 1M subscribers.
    And I became Team Lead in small company in Ukraine.
    And all started from your channel and your talent to explain hard things as simple as possible.
    Thank you. All good wishes to you, your son and your family.

  • @aliajami24
    @aliajami24 4 года назад +127

    I'm here to tell you that thanks to your tutorials, your teaching style and your amazing knowledge I was able to find a job as a ReactJS developer with an amazing team who were surprised with all the knowledge that I learned from you!
    You helped me after struggling for almost a year without a job and it really brings a tear to my eye writing this while I'm doing my job and thinking about all the times I was watching your videos and dreaming of having a steady job one day. Thank you so much for everything you have done for me and everyone else, you are changing our lives... And with my 1st paycheck I also got your udemy courses on JS and React but it will never be enough for what I have learned from you! Thank you Brad

    • @paramgandhi5768
      @paramgandhi5768 3 года назад

      thereis not any tutorial video on thus channel,only projects,how did u learn?

  • @MrRuchir23
    @MrRuchir23 5 лет назад +68

    Today I went to an engineering college for a lecture and I recommend your channel learning different technologies

    • @TraversyMedia
      @TraversyMedia  5 лет назад +12

      ruchir saxena that’s awesome. Thank you

  • @DennisIvy
    @DennisIvy 5 лет назад +134

    Thought you would be on a week long binger after hitting 1million lol. I guess its just back to the lab for Brad :)

    • @TraversyMedia
      @TraversyMedia  5 лет назад +67

      Nope, nothing stops :) just keep going

    • @flippinoutrock
      @flippinoutrock 5 лет назад +9

      And that's what gets someone a million subs! Great work ethics!
      Brad will soon be at 2 millions!

    • @techbygul3303
      @techbygul3303 2 года назад

      Brad is at 2M

  • @deepakparamesh8487
    @deepakparamesh8487 5 лет назад +102

    Hi Brad Sir, I initially started learning programming from your channel on 2017. Last Month I joined Microsoft, which is one of my dream company. I don't know whether you read this comment or not. I wanted to show my deep gratitude to you by becoming a patreon. Thank you once again. With love from India.

  • @musicpodu8380
    @musicpodu8380 10 месяцев назад +1

    Actually It Helped me a lot to Understanding the React, reducer Concept. Thanks a lot Mr. Brad Sir, you're the Best in your way

  • @cwcfunclock2709
    @cwcfunclock2709 3 года назад +10

    One of the best parts about this channel is being capable of explaining anything so that even a layman can understand in details.

  • @chintansharma
    @chintansharma 5 лет назад +70

    Hey Brad, congrats on 1M subs! Very well deserved! Learned a lot from your vids. Thanks for all the great content!!

    • @Fullflexno
      @Fullflexno 5 лет назад

      djenigma 👆🏾this! Thank you Brad!

    • @TraversyMedia
      @TraversyMedia  5 лет назад +4

      Thanks :) and you are welcome!

  • @rwshaw11
    @rwshaw11 5 лет назад +5

    I finished making this same app using vanilla JS a couple days ago from your 20 Javascript Apps course on Udemy. Making this again with React, Hooks and Context API is the cherry on top! Thank you so much for this and I appreciate all of your professionally made content!

  • @williamb4426
    @williamb4426 5 лет назад +2

    Hi Brad.
    Wanted to thank you a lot for all your videos. It's been a while now that I discovered your channel (and your udemy classes), and it helped me a lot to transition from my old field of study (Neurosciences...) to being now a full time engineer & front-end dev in a nice company.
    Everytime I have doubts, or something I don't understand, I end up coming back to your channel, and there is a reason behind it...you just have one of the best dev channels on youtube and your way of explaining things is great.
    So thanks again and all the best to you (and other fellow devs reading this)

    • @Bebetter11111
      @Bebetter11111 3 года назад

      You left Neurosciences for Developer/engineer...you didn't like Neuroscience or was it too hard? just curious...

    • @williamb4426
      @williamb4426 3 года назад

      @@Bebetter11111 I liked the research and the academic part of it, but when it came to practice in the field I didnt like it as much as what I expected. And in France it's quite hard to work as a researcher, not a lot of jobs, not well paid. So I decided to change 🙃

  • @shaquilmaria8248
    @shaquilmaria8248 5 лет назад +22

    Was planning on building one of these, and boom! Traversy uploaded a video about it. Great vid!!

  • @stevefu7317
    @stevefu7317 5 лет назад +2

    From a noob to a technical leader of a startup, I really enjoy watching your videos and have been still learning loads of new stuff. Thank u Brad! Would really like to see more complex projects on advanced React Hooks like useEffect and custom hooks!

  • @samartajshaikh2601
    @samartajshaikh2601 3 года назад +1

    whoever convinced you to remake this application in react did the right thing

  • @user-qy2wf2lt6v
    @user-qy2wf2lt6v 5 лет назад

    I've been watching this channel for year now, and I can tell, that you are one of the few people on RUclips who actually helped me to learn something and achieve some of my goals! Thanks for the awesome content! Congratulations on your well deserved success!

  • @Acumen928
    @Acumen928 3 года назад

    You're the best explainer of these concepts. I like how you actually talk through the code and explain what and why you are doing something rather than just say "next we do this, then we do that" like other instructors.

  • @mafh97
    @mafh97 4 года назад +10

    If you need to reset the "add transaction" form, just add these two lines: setText(''); setAmount(''); at the end of the AddTransaction() function in AddTransaction.js file. Great tutorial, thaks a lot!! :)

  • @patroclusTractors
    @patroclusTractors 5 лет назад

    The best money iv'e ever spent was buying your courses. Thank you brad for making it easier for us ! you're a true hero!

  • @opencubetechnologies948
    @opencubetechnologies948 4 года назад

    Thanks for all these videos brad. I had always a negative ATT towards js but this channel changed my whole perspective and kept me loving it. Many thanks from Kenya.

  • @seunmichael852
    @seunmichael852 Год назад

    Thank you so much. This is the first React project I coded along from beginning to the end. I am sure I'll understand how everything speak with each other as I continue. This gives me hope.

  • @alanflynn3612
    @alanflynn3612 5 лет назад

    Easily the best teacher on RUclips, heres to hitting 2 million, well done sir

  • @rockgames345
    @rockgames345 4 года назад

    You're absolutely amazing! The community is blessed to have you around to guide us all.
    Much love from India!

  • @VincentFulco
    @VincentFulco 5 лет назад +2

    Terrific tutorial. Bought your reactjs: front to back course a few weeks ago. Very well done and complete. Thanks for everything.

  • @abenjamin13
    @abenjamin13 5 лет назад +1

    Congratulations on the 1 MILLION subscribers...VERY DESERVED for all that you teach us. And I greatly appreciate you building something with the context-api..I needed more practice.

  • @zivtamary
    @zivtamary 5 лет назад +2

    I seriously don't understand why would anyone click the dislike button? how bored are people? thanks for the vid Brad!

    • @aldocaamal7740
      @aldocaamal7740 5 лет назад

      Usually people do it because they expect more, or just hating, some people find your videos useful and some others not, for example beginners will find this thrilling but people more advanced will just take a look and move on, sometimes leaving a dislike, but thats just how things are

  • @patryk3852
    @patryk3852 5 лет назад +1

    Hello Brad, 1 million subscribers - congratulations . I wish you all the best in the future. You're doing a great job. Thanks.

  • @polokojohnson7259
    @polokojohnson7259 5 лет назад

    Brad thank you, ever since I started pursuing Web development you have been a great mentor and a role model for me. Your content is appreciated. I am from South Africa !

  • @cecitorresmx
    @cecitorresmx 5 лет назад +1

    Just that I needed! Thanks Brad, I always recommend your material to everyone that want to start to learn development or some senior mates that are curious about JS/Frontend stack

  • @sujalkhatiwada2267
    @sujalkhatiwada2267 5 лет назад

    You're just spechless sir, We're blessed that we've got instructor like you, so that we can buy courses in just in price of food in udemy, god will bless you, keep making courses sir .

  • @infosandfacts7536
    @infosandfacts7536 5 лет назад +8

    Hugs from Hamburg, Germany man. ;). I’m starting on a new job and needed react. You teached me to survive I hope :) thanks so much. 😘

  • @greenie62
    @greenie62 5 лет назад

    Always appreciate the content. You're a major reason I know anything at all in this silliness. Congrats on the 1 mill!

  • @Vichion
    @Vichion 5 лет назад +7

    When you ran npm start an ad started on youtube. Blew my mind.

  • @dnielsen9713
    @dnielsen9713 5 лет назад

    been a developer for a little bit and Brad has saved me at work mutliple times haha

  • @jondarling7933
    @jondarling7933 5 лет назад

    Nice!! I just completed this in your 20js projects. Gonna knock this out today. Congrats on the subs and continued incredible work.

  • @ekeneidiagbor4678
    @ekeneidiagbor4678 5 лет назад +1

    Brad. Thank you so much.. I can't thank you enough for all you've done for the community and most especially the next generation of developers. Can't wait to have the next video.

  • @kylehenson2259
    @kylehenson2259 4 года назад

    i think you're become a hero because you try shere your information for us

  • @gonzatoto
    @gonzatoto 2 года назад +2

    The most important parts:
    15:42 --> Setup the folders and files to create the GlobalContext
    16:44 --> Set initial state
    18:00 --> Create the Global Context
    18:44 --> Create the provider component
    21:00 --> Create the reducer
    22:53 --> Wrap the App with the global provider
    24:03 --> Access the Global State
    35:55 --> Set State through context

  • @HimanshuYadav-nt9zp
    @HimanshuYadav-nt9zp 5 лет назад +1

    Congrats man!! Its 1M.. really happy, proud amd thankful... enjoying your Udemy courses as well...keep up the good work

  • @fluntimes
    @fluntimes 4 года назад

    Great work again Brad. I am going to follow on from this tutorial and update the projects I have worked on from the Vanilla JS course by creating them in React. I've done this before and I always find it refreshing to not have to invoke so many createElement() calls!

  • @sulemanahmed2408
    @sulemanahmed2408 4 года назад +1

    One should just buy all your courses and run through em! Great job

  • @victornoagbodji
    @victornoagbodji 4 года назад

    you do have a gift for bringing these new web technologies down to a practical level! very grateful for all these videos you make 🙏 🙏 🙏

  • @salkjshaweoiuenvohvr
    @salkjshaweoiuenvohvr 5 лет назад +6

    Thank you so much Brad for Teaching Hooks in react! I very grateful to use this as a reference!

  • @amirhosseinkhurizadeh8920
    @amirhosseinkhurizadeh8920 5 лет назад +2

    I was just going to do this, take the expense tracker and make it into a react app for practice.
    I guess Brad read my mind.

  • @UmJammaLamma
    @UmJammaLamma 2 года назад

    I followed this and converted it to use Redux instead of Context, great video, really easy to follow. Thanks!

  • @phenixphyre666
    @phenixphyre666 5 лет назад

    This video came out at the perfect time!! I wanted to learn hooks and context and then you released this video. Fantastic video as always, keep up the great work!!

  • @tessanathaniel
    @tessanathaniel 5 месяцев назад +2

    I really love this vid. Even though I didn't watch the crash course before watching it. Cz it made me want to learn react.

  • @Kevin-jc1fx
    @Kevin-jc1fx 3 года назад +1

    Thank you so much Brad for this amazing and well-thought tutorial. It helps a lot to have the designs taken care of so that I can focus on code.

  • @maharaj1991
    @maharaj1991 5 лет назад

    Congrats on reaching 1M Brad, you're an inspiration! many thanks for creating such awesome videos! and this one came at such a perfect time, I was just looking for React projects to make!

  • @KETANRAMTEKE
    @KETANRAMTEKE 5 лет назад +1

    Amazing tutorial.
    Context API explanation and implementation were very understandable.
    Thank you, and congratulations on 1M subs.

  • @MULTICODE
    @MULTICODE 5 лет назад +1

    Oh my GOD congratulations for the 1M subs. I'm very happy to get frequently notification from your channel. Keep up working hard to achieve your various goal

  • @onedimensionalchess4373
    @onedimensionalchess4373 5 лет назад

    Haha, I was thinking about this project the other day. I've only done the modal one so far. I wrote my own expense tracker in python a long time ago, and it basically eliminated all my overdrafts overnight, so this is a really awesome project, for sure. I think this one is more interesting, because if you had it on a server you could track a whole household and you would be free to use different devices.

  • @rylanzhou7617
    @rylanzhou7617 5 лет назад

    Honestly I watched tons of tutorials of React Hooks but this one literally gets me through to it :D

  • @iwillnotfollow
    @iwillnotfollow 5 лет назад

    Congrats Brad on 1M Subs! Love your channel here in Kenya. Thank you for the great content. God bless!

  • @yusy4code
    @yusy4code 5 лет назад +1

    Hearty congratulations for your 1M subs. My best wishes to get more and thanks for all your knowledge sharing.

  • @Italya3343
    @Italya3343 5 лет назад +1

    Thank you so much for sharing with us Brad!!
    Looking forward your react applications course in the future..
    And really really wish that you consider converting your React course and MERN course that you already have on Udemy into MERN with Mysql/sequelize, while still using JWT for login,passport for social media, jwt routes admin/users, bcrypt, etc...
    The vast majority of Nodejs/react courses online have been made with MongoDB, therefore the market is really thirsty for MERN sql Technology! (Mysql/sequelize)
    Thank you so much for all your efforts and your help!

  • @Virus-ke8xj
    @Virus-ke8xj 4 года назад

    Woooh! This was my first project in React! And yeah, as usual, Brad rocked!
    Will try to implement some project on my own😊😊

  • @TechnoDB
    @TechnoDB 5 лет назад +1

    Congratulations for 1M+ subscribers Sir..
    You deserved 100M+
    Thanks for this React tutorial :)

  • @snsa_kscc
    @snsa_kscc 5 лет назад +1

    Boom! 1M! The best of the best and the happiest of the happiest, sensei! The universe is just.

  • @mohammadnaim9226
    @mohammadnaim9226 3 года назад

    This is such a beautiful and interesting project.I have enjoyed the full tutorial.Thanks a lot Brad Traversy for your effort to building such an amazing react project

  • @delllatitude299
    @delllatitude299 5 лет назад

    Man, No words for your support and these videos. You are Programmer sever

  • @SwamiNathansai
    @SwamiNathansai 4 года назад

    This one video will give complete understanding of hooks with global state. Thank u brad again

  • @mohdsarfraz1816
    @mohdsarfraz1816 5 лет назад

    dont have enough words to appreciate your efforts for students like me

  • @syntaxed4365
    @syntaxed4365 5 лет назад

    Thank you for all of the help on this development road, and congrats on reaching 1 million subs! It's crazy that people like Jake and Logan Paul (just for example) can exist and have the kind of recognition they have, but quality individuals/creators like yourself have to work much harder, while adding actual value (a whole lot of it) to society. Great stuff man!

  • @kaushikakash8092
    @kaushikakash8092 5 лет назад +1

    Such an awesome tutorial . Just today I was asked many questions from context API , would be a blessing if the vedio was released yesterday.

    • @kaushikakash8092
      @kaushikakash8092 5 лет назад

      Hi can I reverse values stored in variables while destructuring.
      Like I have an array= [1,2,3,4]
      let [a,b,c,d] = [...array];
      a stores 4, b stores 3 and so on?

    • @amanar06
      @amanar06 4 года назад

      @@kaushikakash8092 just do [d,c,b,a] = [...array]

  • @iwswordpress
    @iwswordpress 5 лет назад +2

    Well done on 1M! You have been very helpful.

  • @timurgolovinov
    @timurgolovinov 4 года назад

    Brad solved "+amount" problem as a legend!

  • @DevOtionSynthax
    @DevOtionSynthax 4 года назад

    Although I didn't understand everything, I still followed through the entire course. Now onto part 2! :D

  • @andrew-tuts
    @andrew-tuts 5 лет назад

    Thank you brad for your content i started following you last year and also looked into your udemy courses and i have not been the same THANK YOU very much....

    • @kalenzo78
      @kalenzo78 5 лет назад

      Email bro I'm also from Uganda.. Still pushing on
      mukwaya78@gmail.com

  • @MrAnegm
    @MrAnegm 4 года назад

    Great!! hope to see more projects using React for the frontend and Ruby on Rails APIs backend, also using bulk upload from CSV to load data to the database. Really appreciated!!

  • @sunguru981
    @sunguru981 5 лет назад

    FIRST OF ALLL CONGOOO FOR THE 1M Subs Brad.
    Just irrelevant, but the shade of blue which you used on the thumbnail was typescript react (JSX would be slight lighter). I was literally thinking that you were combining typescript template with all these other tech haha.

  • @alessandro_carta
    @alessandro_carta 4 года назад

    Thanks Brad, fantastic video as always! A lot of interesting information here, explained in a simple way, this is the great merit of Brad, make the code available to all!
    This is true democracy. Thanks again and please do not ever change!

  • @hossamelatmani5940
    @hossamelatmani5940 Год назад +1

    great video man , in arabic we say "chokran lak" as thank you 😎

  • @kirant9339
    @kirant9339 5 лет назад

    Hey Brad, congrats on 1M . keep doing really it helps a lot.thank you

  • @AH-cf9cv
    @AH-cf9cv 5 лет назад

    congratulate Brad u cross one million subscriber and i am big fan of u since 2018.

  • @gogogogogogogogogogog9
    @gogogogogogogogogogog9 5 лет назад

    best teacher ever
    even better than ones on my university

  • @unchart_d
    @unchart_d 5 лет назад

    Nice one Brad, what can we do without him. So its 1m sub👌🏽👌🏽👌🏽.

  • @oakleyorbit
    @oakleyorbit 5 лет назад +1

    1million subscribers that’s wicked! I remember you were at about 350k when I started!
    Good shit!!

    • @TraversyMedia
      @TraversyMedia  5 лет назад +1

      Richard Hogg thanks for sticking around

  • @floughio
    @floughio 4 года назад +10

    420 balance, well played brad

  • @tessanathaniel
    @tessanathaniel 5 месяцев назад +28

    I'm posting this comment here so that each time someone likes it, It will boost my moral to continue learning React

    • @Rohan-hx7ry
      @Rohan-hx7ry 3 месяца назад

      Here, boost your moral💻

    • @S5Dic09
      @S5Dic09 3 месяца назад +1

      no

  • @freezingCode
    @freezingCode 5 лет назад

    Congrats on 1 million, Brad.

  • @rez41
    @rez41 5 лет назад

    Awesome, I wanted to see context and reducer at work and you drop a video doing just that. Cheers Brad

  • @pruthvi4703
    @pruthvi4703 5 лет назад

    congrats on 1 MILLION SUBSCRIBERS

  • @PyrmontBridgeInSYDNEY
    @PyrmontBridgeInSYDNEY 3 года назад

    This tutorial is really crazy, i understood perfectly. many thanks.

  • @mwlai288
    @mwlai288 5 лет назад

    I had this idea too. I completed the exchange rate calc in vanilla yesterday and the react version of it today.

  • @osamagamal495
    @osamagamal495 4 года назад

    instead of having to pass every function like (deleteTransaction) to the value property of the provider. we could pass dispatch instead. and use that dispatch on our components and leave our GlobalState neat and clean.
    (e.g):
    dispatch({type: "DELETE_TRANSACTION", id: props.transaction.id})} className={props.transaction.amount < 0? 'minus' : 'plus'}>
    {props.transaction.text} {sign}${Math.abs(props.transaction.amount)}x
    thank You brad an amazing tutorial like always.

  • @green-world-aktar
    @green-world-aktar 5 лет назад

    Congratulations for 1M! You deserve it :)

  • @Maha_560j
    @Maha_560j 2 года назад

    Thanks. I learned a lot about useReducer, useContext and createContext.

  • @eduardobaia1
    @eduardobaia1 3 года назад +1

    WOOOOW, thats amazing! I've learned a lot! Thank you so much!!!!

  • @UmutcanKavak
    @UmutcanKavak Год назад

    Dude that was challenging my head still hurts but one day I’ll come back to this video and say it was easy

  • @didarsubasi
    @didarsubasi 3 года назад +1

    Brad I really like the way you teach the projects, could you do more react projects yourself. its good to have guests to your channel but we are here for you Brad.

  • @eazydatasolutions5800
    @eazydatasolutions5800 Год назад

    Great tutorial as always. I have just realized the power of React.🤓

  • @dhruvdonsahu9972
    @dhruvdonsahu9972 10 дней назад

    tbh the context part was pretty confusing for me so i grinded for an hour to did all of this on my own using props , and the good news is ,everything is working how i want to yay, also i did all of that without any help so yeah , a good progress i would say!

  • @sentient-5002
    @sentient-5002 4 года назад

    You're a god sent Brad! I learned so much from your videos.

  • @sudharshanpani585
    @sudharshanpani585 3 года назад +1

    Learnt a lot from this project, thanks man.

  • @amani_art
    @amani_art 5 лет назад

    I just wanted to say, I watched the whole Ad. Thanks Brad ✌🏽

  • @ssarefintanweer6191
    @ssarefintanweer6191 5 лет назад

    Congratulations for 1M Brad!

  • @bhang96
    @bhang96 4 года назад

    5:03 UI + basic Compenents
    15:09 Global State

  • @lartumraksap3051
    @lartumraksap3051 5 лет назад

    Congrats on your million subs brad, your videos helped me a lot, it made a better person overall !

  • @karimkazia
    @karimkazia 3 года назад

    Thank you for this video!!! you have made it so simple for me to work with reducer and context.

  • @alferatovic3396
    @alferatovic3396 5 лет назад

    Got the update that Traversy dropped a new video. Time to start a new project !