React Budget App Tutorial | Learn how to use the Context API

[@getbest50]

Hey Chris!! Great quality. I started learning React since Feb and this project opened my eyes on Context API that I have been just thinking of.

[@ChrisBlakely]

Awesome , glad it helped , and thanks for watching !

[@getbest50]

@@ChrisBlakely I have followed your video step by step and added budget editing(mimicked your dispatch) and expense list search (took search input value length and used it for slicing expenses.name filtering) without watching final code. Was great fun and increased confidence :). Thanks again.

[@ChrisBlakely]

Thats great to hear! Good job !

[@david_ramoraswi1711]

your work really amazing,i am new to react(angular background) and you do not assume that one might have prior knowledge but taking it to stage by stage.I just wanted to say thank you and appreciate the time and effort you take to compile such

[@ChrisBlakely]

Thanks for your feedback - I really appreciate it! Glad you enjoyed the video

[@skyforever9970]

This was very helpful, I will be binge watching all your videos now onwards 😁

[@apurbusarderapu3383]

You are a good Teacher bro...

[@linamaria1119]

You are amazing! I'm doing all your tutorials for React! Huge thanks

[@ChrisBlakely]

Thanks for the kind words Lina! I'm glad you're enjoying my videos!

[@linamaria1119]

@@ChrisBlakely Hi, I was working on the ExpenseList and everything was cool and my bootstrap just stopped working, also I can't add a new expense. ;/

[@ChrisBlakely]

Hey Lina You can have a look at the completed code on GitHub to compare it to yours and see where you went wrong. Also you can use the time stamps to jump back to those sections in the video as well ! 😃

[@linamaria1119]

@@ChrisBlakely sooooo.... for some reason the bootstrap version went down from version 4 to version 2, and lots of hours debugging: to find 'ADD_EXPENSE vs 'ADD-EXPENSE' 😂😂😂 for some reason, this is the only way the cost will display for me : with single and double quotes {props.cost} and is not showing me the blue badge just the price. Any Suggestion? sorry for being a bug!!! I love the way you are teaching and I don't want to give up!

[@Pareshbpatel]

Excellent Tutorial/Mini-App that illustrates the use of many important aspects of REACT. Thanks very much. {2021-12-20}

[@diveshkswn]

This is really a great content. We need more like this please :)

[@mtycoder]

one of the best react tutorial!

[@dangerzone-136]

Really awesome tutorial. Please do more tutorials like this. Thanks

[@aramabdulrahman2087]

Lots of thanks , please add authentication and registration with form validation to this

[@ChrisBlakely]

Thanks for watching Aram - I have a tutorial in the works for exactly what you asked !

[@jaggyjut]

Really enjoyed this tutorial and as always very good explanation. May be extend this to integrate with Firebase. Thank you again.

[@mithunvelalar]

Thank you buddy , I did tried out your tutorial and you have explained everything perfectly 🍪🍪

[@ChrisBlakely]

My pleasure 😊

[@kshitijgudla38]

Awesome ! it is easier than the one i learnt in javascript

[@ajeigbejohnoluwaseyi8458]

This is great! Thank you Chris

[@tylermorales9043]

This is an awesome tutorial and one that really taught mean context and reducer. Is there a way, or how would you recommend re-factoring the app context.JS file to allow other contexts.

[@ChrisBlakely]

Thanks Tyler! Yeah you'd just create a new context in a separate file and wrap your app in the Provider, similar to what you did already. You can then choose which context to pull from in your components: stackoverflow.com/questions/53346462/react-multiple-contexts

[@jaggyjut]

At 48:03 don't we have to define a key within the map function?

[@zmaktr]

yes id/key is not passed through the children as props in react we need to get it by name

[@vandandave7505]

I want to add data into local storage, how can I do it?

[@TheBdemba16]

Great great video. Keep it up!

[@narayadewe7979]

11:17 13:13 items not showing like in the video, but solved after adding the return(

[@joeniati7903]

does this incorporate sql or flask?

[@pubggameryt6067]

what are tech stack used other than react

[@chinazor4711]

I need help it wont read AppContext unless it's in components file.

[@mickaelrichard7255]

wow your videos are clear and well explained thank you! Are you planning to make some videos using Redux in the futur?

[@ChrisBlakely]

Thanks so much Mickael! I appreciate the kind words. Yes my next video is going to be about redux and redux toolkit! Will be releasing in the next week or 2! 😄

[@mickaelrichard7255]

@@ChrisBlakely Very happy to hear that :) Thanks again for your hard work!

[@rituparnamohanty3360]

If I want to edit the expense then what should I do ... please give me a idea ...It's highly urgent

[@sidrayousaf2461]

but sir whe we change the budget then remaining amount should also be changed

[@namle6191]

'PORT' is not recognized as an internal or external command, operable program or batch file. how to fix it ?

[@Manikandan-nn2bw]

Great tutorial ! One doubt. When we click on 'delete' we are not actually deleting that item from the state. Is it correct ?

[@ameensayed6514]

Thank you so much ♥️

[@woofcode3383]

Thank You so much! Great tutorial! your channel should get more subscribers for sure! subscribe, like and comment, will share as well. Cheers! Happy New Year Chris!

[@crazyiron9003]

Thankyou for this sir.

[@ChrisBlakely]

Thanks for watching !

[@amals.alzuhair84]

Thank you for the good quality content. One question from me, how do we know the features provided by bootstrap styling?

[@ChrisBlakely]

Hey Amal, If you look at the bootstrap docs, you can see the features. This app mainly uses the grid system (for rows/cols), list groups, buttons, alerts and forms: getbootstrap.com/docs/5.0/components/list-group/ Thanks!

[@muhammadhamzashabbir8364]

First View & Comment 🥇 Big Fan Sir

[@ChrisBlakely]

Thanks I hope you enjoy it!

[@muhammadhamzashabbir8364]

@@ChrisBlakely Yes Sir absolutely 🥰 keep it up

[@sergiob3698]

Hey Cris, very clear example. Thank you QQ is this kind of context a good replacement for Redux toolkit or similar? It seems to be react native solution.

[@ChrisBlakely]

Hey Sergio! I think both have good uses for different situations. If you have a small/medium size web app Context API may be a better/easier approach to manage than Redux. For large apps with 100's of components, actions etc Redux Toolkit is still my go to, as it makes the code easier to manage across teams. I'll explain more in my next video (Redux Toolkit Tutorial) Thanks for watching as always!

[@sergiob3698]

@@ChrisBlakely OK, thank you

[@kahangadhiya369]

Is it advised to use npm fpr installing packages when the default package manager used my npx is yarn

[@ChrisBlakely]

Yeah it doesn’t really matter if you use yarn or npm, just try not to mix and match them when installing your packages 😄

[@syedshazanrizvi3518]

Hi! Can you please Post the code for the challenges.... Thanks.

[@ChrisBlakely]

Hi yeah it’s ok GitHub if you check the description

[@anrotheunissen6611]

Cant find packages.json error. Anyone else also have this error?

[@luizsantos146]

i cant start the tutorial because i dont know how to navigate to the desktop in node

[@sylvesterjengwa7941]

Hi Chris hope you are doing well. I'm having an issue that is very weird after I finish the project an icon to remove my expense start to behave differently its not removing it when i click it but when i open dev tools and components and hooks then click the icon from there its working. it was working all fine but by the time i finish the project it started that

[@sylvesterjengwa7941]

never mind i got i right

[@kshitijgudla38]

and good explanation btw

[@ChrisBlakely]

Thanks!

[@kshitijgudla38]

can you make more of them ?

[@ChrisBlakely]

Yeah I've a large list of projects I'll be building over the next while - stay tuned :) Thanks for watching!

[@kshitijgudla38]

@@ChrisBlakely ok waiting !

[@mohithguptakorangi1766]

why does description say movie app?

[@ChrisBlakely]

fixed - thanks!

[@PandaMMANews]

Damn the whole reason why i watched this is to figure out how to change the initial set budget, and at the END it’s a challenge 😞

[@ChrisBlakely]

Hey thanks for watching! Heres a little code sandbox with an example of how to do this : codesandbox.io/s/unruffled-solomon-lgq2hs?file=/src/App.tsx