In this series you’ll learn how to make an expenses/budgeting app from scratch, using React & React Router DOM. You’ll also use local storage to save a user’s data in the browser.
??? Visit Chris @ Coding in Public for more of his tutorials:
https://www.youtube.com/c/codinginpublic
???Get early access to his entire course now on Net Ninja Pro:
https://netninja.dev/p/budgeting-app-with-react-router
??? Access the course files on GitHub:
https://github.com/coding-in-public/react-router-budget-app
??? Live demo of the finished app:
https://codinginpublic.dev/projects/react-router-budget-app/
??? React Router in Depth Tutorial:
On Net Ninja Pro –
On YouTube –
??? React Router docs –
??? VS Code –
Okay then going so in this series you're Going to learn how to create this Budgeting application using react and React router Dom which comes with a Bunch of new features that hopefully You're going to learn all about as well Now to teach you this I'm going to hand You over to Chris from coding in public He's an awesome teacher also here on YouTube he's got his own YouTube channel Called coding in public I'm going to Leave the link to that down below I Would definitely implore you to go and Subscribe because he's got some really Really good videos anyway without Further Ado I'm going to hand you over To Chris enjoy Foreign Hey what's up my name is Chris and a Huge thanks to Sean for having me on the Channel again I'm really excited to Share this react router project with you Here's the finished project if you want To play around with it on my website You'll see here that I can create some Budgets I just have to provide a name And an amount I can then add expenses And I can select which budget I want the Expense to go to and then I can also Delete expenses down below now we can do All this and more and we're going to Build this whole thing out from scratch Together in this series now just a quick Note we'll be building on Sean's recent
Series on react router 6.4 and extending It to show off a few more new features In react router 6.4 and above in fact We'll be using 6.8 in this series now These newer versions of react router Take an old school web concept and Modernize it behind the scenes with a Few simple and clever touches while Surprisingly simple the new features Also change the way you write react code It's really a paradigm shift but it's Totally worth it now perhaps a brief Overview will help pique your interest Here's the opening splash page for the App that we'll build now if you're Familiar with react you may assume I'm Manually storing state for my name and That when I create my account it passes That state down to whatever components Show next but there's actually something More simple and more complex going on When I click submit react router Actually submits the form to the page Like a standard HTML form as simple as It gets that means I get a submit Request and everything sent to this Route with the form data natural Included like a normal HTML form Submission now I track that submission And take the form data in as a parameter And then save it to my database in this Case just local storage All of this takes place in a simple Action function I pass to react router I
Don't have to manually track state or do A bunch of prop drilling react router Handles all the complexity for me behind The scenes Now how does this newer functionality in React router show my data in different Routes well here's where another New Concept comes in loaders I can tell React router to run a different function Every time a route loads and in that Function I'll fetch all the data I need To display in the route pass down that Loader data to the component and I can Map over it and show it on the page now Here's the real clever bit when I create A new budget I don't have to write a use Effect hook or manually take any action As soon as the form submits to the given Route react router runs my loader Function automatically and updates the Dom for me this means with a few simple Forms you can manage a ton of complex State and ensure your back end and front End stay in sync so many of our apps These days are pulling from the same Data set in all kinds of routes and Components now normally you'd have to Manually pass along that state create Context or call Custom hooks or write Use effects to keep everything kind of Up in the air and working but react Router just handles it all you can use The same data in multiple components and Your UI will just keep up to date as
Your data changes without a bunch of Micro touches on your end and what's More I get some extra superpowers for Instance react router gives me access to The current state of my form submission So here when I'm waiting on my database It can reflect that status in the UI for My users like by changing the button Text and disabling the button we'll also Use a newer form available on something React router calls a fetcher this will Among other things allow handling Multiple form submissions at once like Deleting a bunch of expenses quickly Even if those rights or reads happen out Of sync it does all the heavy lifting For you Now before we jump in let me list a few Assumptions I'm assuming that you have a Recent version of node.js on your Machine which you can get from Nodejs.org I'm also assuming that you Have a good understanding of HTML JavaScript and react and finally I'm Assuming that you have a basic Understanding of what react router does And maybe that you've worked with it Before this tutorial is meant to serve As practice for working with react Router and react and not as an Introduction to it Now one more note you may notice that I've left off talking about CSS and That's because we're mostly going to
Ignore it in this series I'll have you Copy a global CSS style sheet at the Beginning of the course but so that we Can focus on react router I won't be Returning to CSS so that this series Isn't four months long all right we'll Add classes a few custom variables here And there throughout the project to get A bunch of custom styling as you can see But that's about it if you're interested In how I write CSS feel free to check Out my channel coding in public where I Regularly write CSS and projects live Streams tutorials Etc now in this final Part of the video we'll set up the Basics of this project together and copy In all the images and the CSS that we Need you can find everything you need For this stage Below in the lesson one Branch of the project and by the way Each lesson has a corresponding Branch With a finished code so you can grab any Code you miss or compare your code to Mine if you get stuck if you'd rather Skip this setup and jump straight into Writing react feel free to skip to the Next lesson you'll just need to grab the Code from the lesson 1 Branch download And unzip it and then open it in your Favorite code editor from there open a Local terminal and run npm install to Install all the dependencies and then Finally run npm run Dev to get the dev Server up and running and I'll see you
In the next lesson now I find many People prefer to start from absolute Scratch and install everything Themselves so if that's you you've stuck Around for good reason because that's What we're going to do right now when We're done our code should look just Like the code in lesson one which other People may have downloaded already and Skipped ahead to the next lesson four And you'll need that branch open too as We'll be copying images and CSS from the Actual code in that Branch okay you Ready let's jump in alright so I've got My terminal of choice open that would be Warp and I'm going to go ahead and Install this project we are going to use Veet to get going with this so I'll type Npm create Veet at latest you can see I'm getting an autocomplete there for React router budget app we'll just call This like react router budget how about That all right you can call it whatever You want but that's what I'll call it Here now I just want to select react I'll go ahead and select swc it's not a Huge deal for a project this small but It's basically a new plugin that uses es Build behind the scenes instead so That's what I'm going to do because Technically it's a little bit faster Alright next I'm going to CD into react Router budget right here and so now I'm Inside of this in my terminal let's go
Ahead and install one other thing and That would be react router Dom so I'll Say npm install and then I want react Router Dom and in this case I want to make sure That I have 6.8 because that's what I'm Going to be using in this tutorial Series so you may want to install that Exact version as well but just so you Know in the future things could have Changed if you're watching this later on In the future so if you want to follow Along exactly what I'm doing here I'd Recommend installing 6.8 okay so Everything is installed now I just Simply need to open this up in my code Editor the quickest way to do that is You can just do code and Dot that should Actually use vs code to open it up and That's what I'm using so that's what I'll do now on Mac you actually have to Set this up so it's no big deal if you Need to go to the folder right click it And just click open with vs go that Works as well all right I'll be right Back with you okay so I've got vs code Up on the left I've got Chrome open out On the right we're going to do a couple Things mostly taking things out and then We'll put a few things in so the first Thing I want to do is open up the SRC Folder we're just going to get rid of This app CSS we're not going to need That so I'll go ahead and delete that
And then inside here I need to basically Get rid of pretty much everything so all This stuff up here we'll get rid of I'll Get rid of this you state we don't need That anymore and then I'm simply going To return just the div with the class Name of app so I can get rid of all the Rest of this and yours should look Something just like this all right so Return div class of app that's it now Let me jump over here to the main this One we shouldn't need to do anything for We're going to actually change around What's in here but the rest of this Should work I do need to change around Some stuff in my index.html file so I'm Going to come in here we're going to Change this we'll just call this like Budget app And then here I don't want this to point To avite SVG I'm going to actually point This to my own favicon SVG which we'll Copy in in just a second in fact maybe Let's just do that now so inside of my Public right here I'm going to grab this And I should be able to come over here Let's see copy raw contents there we go So let's come over to the public I'll Just go ahead and change this to say Favicon.svg and then I'll paste this in We should have just two more things to Do and the first thing is I want to Update this index.css file with my own Custom CSS so I go back to kind of the
Root of lesson one which by the way you Need to make sure you're on lesson one Here then what I can do is open up SRC I'll jump inside the index.css and I'll Go ahead and copy this right here copy Raw contents once again I'll just paste This in and this should contain all the CSS we need for the entire project now Just to note here that I did write this For the tutorial it's really not meant To expand to a larger site so there's Several things I wouldn't do if I was Doing it a bigger site but to kind of Minimize the amount of times you're Writing classes and things like that I've kind of optimized it for the Tutorial you're welcome to look through This and I think at one point in the Tutorial I'll briefly kind of talk you Through a couple things in here but Mostly we're just going to leave this Alone and style stuff just by adding Classes and kind of letting the CSS do Its thing the last thing we need to do Is copy in some images so if I come Inside the SRC We should have some assets here and all You want to do is download all these and Add them over here to your assets folder You can also delete this react.svg we Won't need that anymore so let me go Ahead and add them in here I'll be right Back with you all right so there we are We've got all three of these inside of
Here you can see I've got a logo Mark I've got a wave and I've got an Illustration so those are the three Images we'll be using throughout the Site the rest of it will just be done With CSS our HTML well jsx and the rest Of the code that we write okay so you Should be up and running and ready to go Now just to make sure this is working Properly I'll open up my local terminal Which you can do with like command J or You can also do command or let's see Control tilde as well and I'll type npm Run Dev and there we go this should get It up and running I'll command click on This and here's my budget app you see It's got my right title it's got my Right favicon and there shouldn't be Anything in here but if I came over here And added something now you should see It show up Okay so we've got it all up And running let's go ahead and jump into The next video where we'll talk through The basics of creating a browser router With react better I'm really excited About this tutorial I hope it'll be a Huge help to you and that it's really Fun as well by the way if you want to Watch this entire course now without YouTube adverts you can do it's all up On the net ninja website netninja.dev You can buy the course for two dollars To get instant access to all of it or You can sign up to net Ninja Pro and get
Instant access to all of my courses Without adverts as well as premium Courses not found on YouTube including My udemy ones that's nine dollars a Month and you can get your first month Half price when you use this promo code Right here so I'm Gonna Leave This link Down Below in the video description for You to sign up and I really hope you Enjoyed this series and please do not Forget to share subscribe and like the Videos that really helps a lot and I'm Going to see you in the very next lesson
