Modern React CRUD App Project (React ToDo app)
HTML-код
- Опубликовано: 31 май 2024
- During the course of this series, we’ll use React to build out a todo app that saves and loads to local storage. The React project will include full CRUD functionality: create, read, update, and delete.
🔗 Key Links 🔗
- Github: github.com/coding-in-public/r...
- Live Project: codinginpublic.dev/projects/r...
- Theme Switcher Video: • Custom Theme Switcher ...
---------------------------------------
🔗 Additional Links 🔗
- ES7+ React/Redux/React-Native snippets VSCode Extension: marketplace.visualstudio.com/...
- Hero icons: heroicons.com/
---------------------------------------
📹 Related Videos 📹
- Theming CSS: • Custom Color Theme Swi...
- Better Button defaults: • Creating a Modern Butt...
- Better Form defaults: • Building Better Form I...
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
2:27 Lesson 1: Installation and Setup
5:52 Lesson 2: Creating Add Task Form
26:55 Lesson 3: Displaying Tasks in a List
49:26 Lesson 4: Deleting Tasks
53:46 Lesson 5: Updating Tasks
57:53 Lesson 6: Editing Tasks
1:24:01 Lesson 7: Creating Custom Hooks
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public 
Хобби
Mannn the quality of your videos is something else, not gonna lie. Keep up the great work man
🙏 glad you’re enjoying them! Thanks for saying something!
oh my God, thank you so so much, what a clear explanation.
Tutorials with projects are the best keep doing these types of video.
You saved my one week of struggle in 3 hours, I followed along the video and completely understand the concepts
thank you so so much 🙌
So glad it was such a help! Thanks for taking the time to say something!
thank you for keeping this video as beginner friendly as possible .. there are a lot of people who are trying to learn step by step
You’re welcome!
that css is insane. really well put together
So glad you enjoyed it!
Great video! This covered way more than I expected. Awesome!
Great! Glad you enjoyed it!
Another excellent video with awesome explaination chris 👌👏
Glad you enjoyed it!
Great quality man, really appreciate it.
Glad you liked it!
brilliant, brilliant, brilliant! love this! a step above most other react devs on yt
🙌 Thanks for your kind words!
Why is this channel underrated 😐 😕? You have a lot of amazing content. Glad to be here
🙏 thanks so much. That’s very kind. Glad you’re enjoying the channel!
Am speechless, awesome content chris
So glad you enjoyed it!
Great content! You are motivating me to start my own channel ✌️
Go for it! 🙌
How, how, hooow are you this damn good... On this level so fast and in short time... Amazing!
Maybe one of your future videos should be a tutorial on how to properly learn things and manage your time...
Ah, that's very kind. I'm glad you enjoyed it! I'm not sure I have a lot to share there other than that I just keep building and building things until I feel like I understand it well enough to explain it. Being forced to explain it often shows me what I don't understand. And sometimes much later I still realize I didn't understand :)
Wow man! Keep up your good work 👏
Glad you enjoyed it!
can't wait to watch your next video!
🙌
Great video Chris! I"m waiting for the follow-up with theming. Switching this project to typescript could also be useful for your viewers :) Cheers!
Video drops tomorrow! Yes, adding typescript would be a great next step. Tried to just stay focused on React in this video, but that would be my next step to improve it!
@@CodinginPublic i didn't found the video.
Best react todo tutorial I've seen...
Hey, awesome! Glad it was such a help. It's been a while, so I'm sure I'd do some of it differently, but very glad to hear it was still a help!
First vid of yours I’ve seen, that font tho, wasn’t expecting that lol
And it’s free! Cascadia Code by Microsoft. I like it. :)
Awesome video bro🎉🎉
Glad you enjoyed it!
Thanks a lot, man!
God bless you!
Abraço do Brasil!
You're welcome!
thank you so much coz u are also teaching how to debug react apps when something doesn't work properly
You’re welcome! Yeah, I try to leave my mistakes in there so long as they might help others.
react content yuhuu 😍
thank you for your work Chris.
I was wondering when you just start with command combo ' pnpm create vite react - todo ' after choosing React , we are asking to choose TypeScript / TypeScript + SWC / Javascript / Javascript + SWC. What should we choose?
Any of the JS options should work! (or if you want to write TS, that's great, too!) They added SWC as an option after I created this tutorial. It's likely a little faster, but won't matter much in this project. Hope that helps! Enjoy the tutorial!
I did!! Thanks again @@CodinginPublic
Great Video!. Damn Awesome. and your terminal looks sick!!!. What theme?
Glad you enjoyed it! I’ve done some videos on my terminal in the past if you’re interested! Theme is Palenight Operator, if I’m remembering correctly.
LOVE YOU
Sweet baby Jesus I fall in love with this tutorial, thank you for your amazing content!!!
ha glad you liked it
Your to do app is beautifull
Thanks! It was fun to build out!
I would love to see you cover something in Svelete and Solid in the future
Me, too! (But I'd have to learn it first :) hopefully sometime soon!)
Is it okay to change the way tasks are added to the array in useState( setTasks(prevState => [...prevState, task]) >> setTasks(prevState => [task, ...prevState] ) instead of using sort function in TaskList component? Or was this intentional?
Haha! Yes, that's a much better way to sort them. 🤦♂️ Great improvement. Thanks!
Good idea. I feel like we could just use reverse( ) too. Slightly cleaner although it's nice to see sort( ) used as well.
Thanks
You’re welcome! Glad it was a help!
How does the delete bit work? We pull out the task id and compare it to the id but if we log those values out they are the same two values for all elements. How does it differentiate between element being deleted and others? Hope that made sense
Not sure what you mean. The filter function filters out all the elements that dont meet a criteria and sends out a new array with those elements. Here we are taking in the id of the todo and filtering it out then resending the array. Not sure if thats what you were asking but yea
The way filter() works is that it makes a comparison for each item in the array. During each loop, we compare the ID passed in to the ID of the loop. In the end we have a new array that excludes anything that doesn’t match the filter. That’s what we then “save” as our list of tasks. Hope that helps!
38:03 I used display: flex; flex-direction: column-reverse; to show the items in descending order, Will there be any issues with that?
Not that I can think of; but it’s probably better to just reverse the order you add them in JS?
شكرا جزيلا لك
على الرحب والسعة
Please release a video explaining all the styling aspects of this project.
I've done most of the individual parts on my channel-like a new button default, form details, etc. Most of the project styling is from those videos. Hope that helps!
I am using typescript, getting an error in the code:
Cannot find name 'setTask' on the line 5.
On Line 7, Parameter 'e' implicitly has an 'any' type.ts(7006)
I’d have to see the code to be a help. For the second error, you’ll need to identify the e as a synthetic react event. But don’t remember the syntax off hand. Hope that helps!
Hey man! I was actually curious about your terminal! it's pretty darned stylized! It's better than any of Git Bash, Powershell or CMD!
1. What is your terminal exactly?
2. How did you set it as your default terminal for VSC?
The terminal is called zsh
and this is the line that you have to paste in your settings.json : "terminal.integrated.shell.osx": "/bin/zsh"
Hey, yeah. It's ZSH with oh-my-posh as a terminal theme engine. I explain the basic setup here: ruclips.net/video/DBASd9L4GCo/видео.html
I was just using oh-my-zsh in this video, but oh-my-posh is even easier to setup. I might do a video on it sometime.
planning to do any tuts with firebase/superbase ? thanks ! what font is that in vs code ?
Yes, at some point! I use both Firebase and Supabase in a few projects. Just haven't ever taken the time to do tuts on them yet. Font is Cascadia Code (free font by microsoft)
enjoy watching your videos! Are you in audea btw?
Great! I don't know what Audea is? so probably not ?
Hi Chris, I don't see the styles config in your GitHub repo. Do you mind dropping a link? Thanks. And the tutorial is awesome 💯
So glad you enjoyed it! The style documents should be in later branches? like look at lesson-7 branch. Do you see them there?
@@CodinginPublic Oh I have seen it. Thank you!
Hello, sir. I'm here at the end of phase 3. but, when my code runs the results can't appear in the browser with errors like this: react-dom.development.js:26923 Uncaught TypeError: Cannot read properties of undefined (reading 'sort'). How's the solution?
Thanks for the message! It looks like the state is not holding the data you need. I'd need more context to help you. Sorry! Feel free to post a link and someone can take a link (even if I cant). Thanks!
Thanks sir, i will check again my code@@CodinginPublic
Can you share how you customized your terminal prompt and also vscode?
Sure thing :) ruclips.net/video/DBASd9L4GCo/видео.html is probably what I was using here.
I've also done a more recent video on my terminal set up here: ruclips.net/video/zhzhTvaFOiw/видео.html
Hi Chris, I tried pnpm install after extracting the downloaded zip file but I get no package.json found error
Hmm. Did you select the right branch?
Sorry, I had selected the wrong branch
Is it possible to add a priority? Say drag and drop to the top and its number one priority? Love the ui great tutorial!😍
Sure! I haven’t done drag and drop UI stuff before, but I know there’s an API in vanilla JS; I’m sure there’s also a React library for drag and drop?
Is it okay to use map, filter inside your setState or not.....?,Btw Great video 👍.
Yep, just make sure you’re not mutating state as react doesn’t like that :)
I can't seem to make the console log appear in the browser's console. Any ideas?
hmm…not sure? Happy to review code if I have a moment?
@@CodinginPublic nvm, it seems to be working fine after making another project. Must have installed it wrong the first time. Thanks for your hardwork.
@@amateruss awesome! No worries!
from lesson 6 it's getting to confusing for me, i need to watch it over and over again haha
Ah, sorry. Let me know if you have any questions
👌
Hope you enjoyed it! It was a lot of fun to put together!
bro which font you use in your vs code
Cascadia Code. Did a video linked near the bottom of the description.
what font do you use?
Cascadia code :) I’ve done a video showing how I set it up, too.
Hi!, what’s the font that you use?
It's called Cascadia Code. It's a free font by Microsoft. More info here: ruclips.net/video/5uETTXxVj8s/видео.html
is "onInput" replace "onChange" ?
No, in this case (as I understand it), you can use either. For whatever reason, React implemented them both to work the exact same way (again, someone correct me if I'm wrong here)
Can you teach us how to deploy this project? I faced many errors
The easiest way is to run `pnpm run build` and then take the dist folder and drop it here: app.netlify.com/drop. Let me know if you have other questions.
Hola! que consola estas usando?
Turbo console log
What theme and vscode font do you use?
I think in this video I was using Palenight Operator? And the font is Cascadia Code :)
@@CodinginPublic OK, thanks, I've subscribed 🤝🏻
🙌
I'm new to programming and currently learning react (Front-end). I like your tutorial, it's great. But the CSS side is frustrating, it's too complex for Juniors.
Thanks.
Yeah, this is more complex CSS than a lot of things you’ll find on my channel. Glad you liked the react part though!
@@CodinginPublic
Hey, sorry to disturb but when I try to add Local storage, everything goes blank (not rendering), I don't what I did wrong but I did watch the vid several times but it can't help. Whenever I add the useLocalStorage(), not render on the browser.
Thanks for helps!
@@Frahane1 Sorry for my delay. Your console should show some errors. Mind sharing those?
@@CodinginPublic
Yes, If you have a telegram, I'd be happy to join.
Whenever I change the parent (App) useState to useLocalStorage, everything on the browser disappear. I'm using my own CSS (SASS).
THANKS A LOT.
i didnt find any Project in github ??
Should be linked below.
Whats this terminal ? looks insane
It’s oh my posh added to a oh my zsh theme. I’ll try to throw a blog post or video together about it.
@@CodinginPublic ah cool thanks, I'll check it out too
what is the name theme VSCODE?
I think this is Palenight operator? I change up my theme a lot :)
Hi Chris! Thank you for the tutorial. The site looks very stylish. Could you please help me to understand my problem? When I load the site from my computer it works. I uploaded files to github and the site is not loading. I couldn't load a folder node_modules to github as it has too many files and github refuses to do so at once. Can that be a problem?
Hey mate, node modules is a big folder and it won't upload since there is an invisibile file called gitignore that blocks it from being uploaded. You can view this by enabling hidden files in file explorer. I reccomend you search a tutorial about uploading react app to github. If you are trying to host the app, then in your terminal run npm run build. If your goal is to host the site I recommend you use firebase instead its much much better.
Agree with ⬆️. Only thing I’d mention is Netlify is even a little easier. Look up Netlify Drip. I’d npm run build and then drag that dist folder to that netlify drop.
@@muqtadirshah7317 thank you, that's helpful
@@CodinginPublic thank you, Chris. It worked!
Can you give me your json vscode config. Thank you bro very much !!!
Sure thing. Freshly updated: github.com/coding-in-public/vs-code-settings
couldn't gind the code on github sir
Make sure you’re looking under the right branch :)
36:00
1:13:20
1:31:30
Can you give this code. Thank you
In the description. Just make sure to select the right branch.
source code?
Description :)
@@CodinginPublic github doesn't have source code
@@mann_gupta Agree. It does not have css code
@@mann_gupta sorry, you will find source code in the right branch. There is one branch for each lesson. Apologies ...
Good Try but Way too fast from lessons 4 on, it seemed like you were just wanted to get it over with while looking at your solution already.
Thanks for the feedback. I tried to speed up once I was repeating things I'd already taught, but it's good to know it felt too rushed. Thanks again.
After a wile i regret watching this video.
saying here instead of file name and making that mistakes and navigating trough app was really painfull
I’m not sure I understand your comment, but I’m sorry you didn’t enjoy the video