React Todo List App Tutorial - React JS Project Tutorial for Beginners
HTML-код
- Опубликовано: 5 июн 2024
- Hey guys, welcome to this tutorial! In this video, we'll be covering the basics of creating a functional and interactive to-do list using React. Whether you're new to React or just looking to improve your skills, this tutorial will provide you with the foundation you need to start building amazing applications.
In this video, we'll be taking a step-by-step approach to building a Todo List App from scratch. You'll learn how to use components, state, props, and more to create a fully functional Todo List.
One of the best things about React is that it makes it easy to create reusable components that can be used in multiple projects. We'll be taking advantage of this by creating a Todo component that we can use to display each item on our list.
In addition to building the Todo List App, we'll also be covering some key concepts such as conditional rendering and event handling. These are important in order to create dynamic and interactive apps with React.
By the end of the video, you'll have a solid understanding of how to create a Todo List App with React and will be ready to take on more complex projects.
So if you're ready to learn, hit that play button and let's get started!
Timestamp:
00:00 Demo
00:40 Installation
02:37 Creating Components
05:05 Working on the Form
10:08 Adding Todos and Using Props
18:24 Marking Todos as Complete
21:17 Deleting Todo
23:08 Edit Todo
Source Code: github.com/gbopola/todolist-a...
Follow me on Instagram 👇
/ ope.afolabi_
Music from #Uppbeat (free for Creators!):
uppbeat.io/t/prigida/holding-you
License code: I33Z7GWLMFPMGVXJ
#reactjs #reactjsforbeginners #reactjstutorial 
Наука
Let me know what video topics you guys want next 🙏
I would like to watch video about your first react project
Thanks for the suggestion! Can you explain a bit more what you mean?
Do more projects with react using API s may be
@@H7forReal noted! Thanks🙏
filter products using react and image slider using react
ToDo list is one of those underrated apps, but actually one of the most important concepts that allows you to learn the most important parts of React and even JavaScript.
Facts, it's simple but really effective 👌
@@opeafolabi Yes, I learned a lot with this video. I'm still starting and am currently at props, components, maps and a little bit of useState. This video helps a lot.
Great to hear that! 🙏
Upvoted, for sure! 👍
Even me, I underrated it. Now I'm back to it😂
I just finished watching this video and I have to say, it was incredibly helpful! The explanations were clear and concise, and I feel like I have a much better understanding of useState now. Thank you so much for sharing this valuable content. I can't wait to start using ReactJs in my own projects.
Appreciate it bro! 🙏
Probably one of the best videos I've seen so far about React and using it to create a project. You did an amazing job explaining each segment of this project.
Great job! This is a very beautiful exercise. You explain very clearly. Thank you for this video, I learned a lot of stuff from this.
Thank you a lot! Your tutorials are awesome, i swear
No problem 🙏 Appreciate it!
Staggering project my friend. For a rookie like me it was quite helpful to put all this into practice! Thanks a lot my friend
Thanks a lot Ope for this tutorial, clear and effective👏
You're welcome, thanks for watching 🙏
The most effective beginner's tutorial I've seen so far.
where did he get the CSS, 4:54
I like how simple and usefull this looks, im going for it.
OMG, Thanks a lot!! This is a good and complete tutorial. It works perfectly :D
awesome tutorial, simple but you covered all the use cases
thanks man!
Excellent walk through!. I made sure I watched the ads completely to support.
thank you for that, much appreciated, glad it helped :)
Clear and Concise.Thank you
No worries! Glad it helped:)
It's cool man, thx for your tutorial and explaining. You are best, makes my day
Glad to hear that! Thanks for watching 🙏
Awesome Stuff and great work! everything worked perfectly
Appreciate it man! Glad it helped.
thank you for the video, i feel like a mistake while doing it, but it still works as intended
Love it man keep making this kind videos
Thanks! Appreciate the support!
Nice work. Well explained.
Very helpful and well explained tutorial
It took me a lot of hours to understand your code but with the help of bard I could do it. The hardest part was how you name props, I noticed some people told you the same here. For example task and todo... todo should be taken as the object and task as the variable. Instead of saying task.task you should have said todo.task... and there are more examples in your code. I think that maybe adding more descriptive names for example: task and taskObject ( which is the one that contains the id, task, etc), and trying to not change them when you passed to props would be nice. However, I liked analyzing your code, I learned a lot these hours.
sorry about that bro. I think in my head it looked okay but I didn't realise it would be confusing for others. Great that you used ai tools. I wish I had them when I first started learning to code. Would have saved me a LOT of headaches. 😂
Thanks man! this was amazing.
Glad you liked it!
really helped me to develop my react skills very valuable video
thank you so much this work is amazing God bless you
Thank you for this lesson I really liked the way u r teaching us)
Thank you very much. It was interesting and helpful.
Glad you enjoyed it! Thanks for watching.
Perfect tutorial. This video is useful for React beginner
Thanks, glad it helped!
Thanks a lot Ope. I learned a lot.
Glad to hear that! Thanks for watching.
amazing video, thanks a lot!
Glad it helped!
Very nice!
best tutorial in my life!
wow, it's great to hear that! Thanks so much for watching🙏
great tutorial, really helped me out
Glad it helped 👍
That was great Man ....... i really appretiate your work, it really hels me to do my project
Glad to hear that 🙏
Thank you 👍
Amazing Tutorial thanks a lot 🙏
Appreciate it thanks 👍
I learn a lot
Nice one dude👍
Thanks ✌
Thank you very much!!!
No worries 👍
for learning logices implement your video is very good thats i learned a lot frome this viedeo that how we can give style and some logice building in react
Thank you!
You're welcome bro 🙏
thanks lot ❤❤
Thank you so much bro
No worries bro 👍
Thank you very mucb.
This is the very good one but could you please also add the features like searching, last modified date in it...
You're really a good tutor keep up the good work bro
Thanks I appreciate it! 🙏
The best part about the video is that you didn't waste time on styling ✌
BTW Awesome Explanation!!!
Thanks appreciate it🙏
very good explanation sir, thank you!
No worries!
great
work👏👏
Thanks :)
great ...thanks
Glad you liked it!🙏
I thank you very much that you care about local storage in source code , thank you very much
no worries 🙏
Good tutorial, trying to get back into coding with React after spending so much time on Python and Ansible
Nice. I've been working with python recently for a web scraping project.
Awesome video man. Some parts were a little bit quick but for the most part I could follow along. One of my functions didn't work and I couldn't figure out for the life of me how to correct the issue. I ended up going watching a more cohesive tutorial. That said, that's my issue, not yours! Subscribed!
Bro, awesome tutorial! Tell me please what color theme do you use for vscode?
I use a theme called ayu 👌
From where he got that CSS 4:54 , i mean how would i know the CSS style he used?
awesome
You didn't really explain anything in this video, you just verbalize what you're doing... But it's a good project to try on
Hi, at 18:00 I get error:
"Objects are not valid as a React child (found: object with keys {id, task, completed, isEditing}). If you meant to render a collection of children, use an array instead. "
Any way to fix?
Edit: Instead of task={todo} I I used task={todo.task} and it worked
By this way i fix this bug, i try again task={todo} and it worked. Tks ur cmt.
wow thank you sooo much
No problem 👍
Alright. Thanks mate. I used typescript instead js. So I had to create interfaces in each component in order to call the functions. If you know typescript, can you say is that a good way to do? And actually I didn't want to use editTodo function which you created in TodoWrapper. And it works.
Typescript is standard in the industry now, I chose not to include it for this tutorial because its aimed mostly at beginners.
what version of NODE and NPM are you using?
cool video)
Tq sir usefull vedio
thanks man
No problem!
Hii sir, Your tutorial was simply superb and please make more videos on react course
Hey bro thanks, I'm gonna release a video this week.
Can you break down the customizations and theme you use for vscode? i've been trying to get a good one for ages.
the theme is ayu dark theme, if you don't have emmet also, you can download this extension: ES7+ React/Redux/React-Native
Thank you
Glad it helped!🙏
Good video!
Thanks!
super good video! would like it even better if I could see what you were typing all of the time. the autocomplete and vscode extension stuff was pretty distracting
when you need to delete all code in that css file you can press ctrl+a and ctrl+x to delete them easily ma bruda. thanks for da videos btw
Damn bro, didn't even know that 😂 thanks and I'm glad you enjoyed the video🙏
thank you
No problem!🙏
hi, I have a question. I'm wondering that how to use 'todo-input' or 'todo-btn' in className? I couldn't any doc for fontawesome. How did you do this appearance? I mean input and button are side by side
todo-input and todo-btn are just custom class names so that I can style them. Inputs and button are inline-block by default which means they don't start on a new line and can stand side by side.
hey how would i make the Add Task Button go under the text bar but still above the line of the shadowed box?
Try giving the button a display of block
I have an issue in this part: const [todos, setTodos] = useState([])
const addTodo = todo => {
setTodos([...todos, {id: uuidv4(), task: todo, completed: false, isEditing: false}])
console.log(todos);
}
In my browser it doesn't logs the updated todos. Instead it just shows an empty array whenever i click the addTask button
please add the todos in localstrorage and retrive using useEffect
here is snapshot
const [todos, setTodos] = useState([]);
useEffect(() => {
const savedTodos = JSON.parse(localStorage.getItem("todos")) || [];
setTodos(savedTodos);
}, []);
const addTodo = (todo) => {
const newTodos = [ ...todos,{id:uuidv4(),task:todo,completed:false,isEditing:false}]
setTodos(newTodos);
localStorage.setItem('todos', JSON.stringify(newTodos));
console.log(newTodos)
};
same for the edit,delete :)
Keep console.log(todos) outside } and check
How do i get my vs code to auto suggest and import automatically the components like when he typed "TodoWrapper" it auto suggested it (didnt show for me) and then he chose it and the import { TodoWrapper } from './compnents/TodoWrapper'; appeared at the top?
I went to read about it. You should download the ES7+ React/Redux/React-Native snippets extension.
Please take a moment and explain all the styles and the approach you took to style the app.
very good bro
Thanks man 🙏
Good !
Thanks 🙏
Man what can i do for the css things that you'd pastade there?
Where can i find the codes?
The github link in the description
Good
la forma como se crea el id se incrementa ?
I am making this using react+vite , in my case it's not functioning i.e I am unable to add the task to my todo list using user input. What should I do, Pls help me clearing my doubt
Using video shouldn't make a difference. Post your code for me to look at.
IT HAS BEEN ABOUT 4DAYS WATCHING AND LEARN MOST VALUABLE UNDERSTANDING CONCEPT OF REACT SUCH MANUPILATION ARRAY IN REACT THROUGH THIS VIDEO I HAVE LEARN A LOT AND READY FOR MY REACT LEARNING SKILLL
Wonderful doubt , But there is problem in this code when i refresh the to do list in my browser the changes that I made(for example added the list of tasks) does not remain same, it vanishes with the reload of page. Can you please help me with this?
To save the todos you either need to have a database where they are stored or you need to use localstorage. In the github link in the description, I have attached a file called todolistwrapperlocalstorage with localstorage functionality.
Do I need to download any extensions to be able to use emmet's shortcuts in React projects like he does in min 3:26?
should be default in vscode, if not maybe download ES7+ React/Redux/React-Native
it works,@@opeafolabi , thak u!
I have done everything u did in the tutorial and everything works well except the "Edit Todo" part, when I click the the update task button, it doesn't update the todo
Hit me up on Instagram with screenshot of EditTodoForm👍
can you add a json backend part to this so we can get back deleted notes ?
I plan to rebuild this in a future video using nodejs and mongodb 🙏
@@opeafolabi sounds great bro, looking forward to see that one as well, this one was great 😁
@@Peywan thanks bro, appreciate it fr 💯
@4:58 , where did you get the code to paste into App.css?
from the github repo, link is in the description
please make more videos /updated videos ;)
Thanks for the comment 🙏 I'll try to upload as much as I can.
Muito bom
How do I then deploy this using Netlify?
I can't get to the blank white page on the react app, when I delete the logo.svg I still get error messages on the react app. Not sure if i'm missing plugins or just doing something wrong.
what is the error message?
module logo.svg missing, module index.css missing
@@kingosterval6279 it might be because they are still being imported in App.js. check the top of the App.js file.
Hi, can you do the expressjs version please QQ ,I will be very grateful to you
Hey mann, could you add localstorage as well ? It will help a lot, thanks
In the github repo, there is a component called TodoWrapperLocalStorage which shows the todolist with localstorage added.
@@opeafolabi Oh man thanks I will check it. I appreciate it.🙂
I know you are not really focusing on the styles but it would help if you just pause over all the styles for a second so we can see and for those who want to copy can be able to copy. And also everytime you copy from a different screen please pause a bit so we can see the resources
Okay understood, you're 100% right. Didn't realise my pacing was too quick, appreciate the feedback 👍
Can u make a video like this project with context or redux . U can good explain bro love it, break a leg
Appreciate it 🙏 I'm looking to do another todo list app in a future video with context + dark mode and drag and drop.
@@opeafolabi fab😍
Toggle Part was interesting
Can you please make weather app using react js or next js
Noted, will look to make this in a future project🙏
why we have used the task={todo} in edit todo form in editToDo form in todowrapper
We use it to be able to get the task name and the task id. In EditTodoForm, We are using the task name in usestate and using the task id so that we can edit the todo.
Updating todo was not clear. Where does the property "isEditing" come from? A todo object has isCompleted but not isEditing.
The property isEditing allows us to know if the current todo is being edited. So if isediting is true.
can you explain what have you done at 4:56/31:12?
4:56, I was just pasting the css cose