React Todo List App Tutorial - React JS Project Tutorial for Beginners
ฝัง
- เผยแพร่เมื่อ 21 พ.ค. 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! 🙏
Staggering project my friend. For a rookie like me it was quite helpful to put all this into practice! Thanks a lot my friend
Excellent walk through!. I made sure I watched the ads completely to support.
thank you for that, much appreciated, glad it helped :)
The most effective beginner's tutorial I've seen so far.
where did he get the CSS, 4:54
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!
I like how simple and usefull this looks, im going for it.
Thanks a lot Ope for this tutorial, clear and effective👏
You're welcome, thanks for watching 🙏
awesome tutorial, simple but you covered all the use cases
thanks man!
OMG, Thanks a lot!! This is a good and complete tutorial. It works perfectly :D
Clear and Concise.Thank you
No worries! Glad it helped:)
Awesome Stuff and great work! everything worked perfectly
Appreciate it man! 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 🙏
thank you for the video, i feel like a mistake while doing it, but it still works as intended
Very helpful and well explained tutorial
Perfect tutorial. This video is useful for React beginner
Thanks, glad it helped!
really helped me to develop my react skills very valuable video
Nice work. Well explained.
Thank you for this lesson I really liked the way u r teaching us)
thank you so much this work is amazing God bless you
Thank you very much. It was interesting and helpful.
Glad you enjoyed it! Thanks for watching.
Love it man keep making this kind videos
Thanks! Appreciate the support!
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🙏
Thanks a lot Ope. I learned a lot.
Glad to hear that! Thanks for watching.
great tutorial, really helped me out
Glad it helped 👍
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
amazing video, thanks a lot!
Glad it helped!
That was great Man ....... i really appretiate your work, it really hels me to do my project
Glad to hear that 🙏
Amazing Tutorial thanks a lot 🙏
Appreciate it thanks 👍
Very nice!
very good explanation sir, thank you!
No worries!
best tutorial in my life!
wow, it's great to hear that! Thanks so much for watching🙏
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. 😂
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.
Nice one dude👍
Thanks ✌
I thank you very much that you care about local storage in source code , thank you very much
no worries 🙏
Thank you 👍
Thank you very much!!!
No worries 👍
Thank you very mucb.
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!
great
work👏👏
Thanks :)
I learn a lot
Thank you so much bro
No worries bro 👍
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
Thank you!
You're welcome bro 🙏
thanks lot ❤❤
This is the very good one but could you please also add the features like searching, last modified date in it...
great ...thanks
Glad you liked it!🙏
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
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.
Bro, awesome tutorial! Tell me please what color theme do you use for vscode?
I use a theme called ayu 👌
what version of NODE and NPM are you using?
Tq sir usefull vedio
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.
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
wow thank you sooo much
No problem 👍
From where he got that CSS 4:54 , i mean how would i know the CSS style he used?
Good video!
Thanks!
awesome
cool video)
Thank you
Glad it helped!🙏
thank you
No problem!🙏
very good bro
Thanks man 🙏
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.
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🙏
Good
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
Please take a moment and explain all the styles and the approach you took to style the app.
Good !
Thanks 🙏
Toggle Part was interesting
la forma como se crea el id se incrementa ?
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
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.
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
please make more videos /updated videos ;)
Thanks for the comment 🙏 I'll try to upload as much as I can.
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.
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!
Muito bom
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.🙂
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😍
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 💯
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 👍
@4:58 , where did you get the code to paste into App.css?
from the github repo, link is in the description
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.
OPE IS THE GOAT!
Appreciate it man 🙏
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
subscribed
Appreciate the support 🙏
@@opeafolabi upload more ser!
Will do 👍
Hi, can you do the expressjs version please QQ ,I will be very grateful to you
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.
How do I then deploy this using Netlify?
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 make a video on adding local storage to the app?
or please add it to the repo
I have added it to the repo titled TodoWrapperLocalStorage :)
@opeafolabi thankkk youuu!
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.
Hell, thank you for this. There is still something that confuses me, if a function was defined previously, on the onclick functions, why are they still called in an arrow function? can you just do onClick={handleClick} rather than onClick{()=>handleClick()} ? Anyone who can explain why that is would be very helpful, thank you
If you are calling a function as a prop, you have to use the arrow functions to invoke that function. In other situations however, they can be used interchangeably.
@@opeafolabi thanks for clearing that up🙏🏾
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.