React Todo List App Tutorial - React JS Project Tutorial for Beginners

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

Follow me on Instagram 👇

Music from #Uppbeat (free for Creators!):
License code: I33Z7GWLMFPMGVXJ

#reactjs #reactjsforbeginners #reactjstutorial

[opeafolabi]

Let me know what video topics you guys want next 🙏

[MariaClara-ruhn]

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

[ichiroutakashima]

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.

[Innopro_tech]

This is very good,
But not organized.
Someone can easily get lost.

[aydynbai]

3:27 "rafc".
"Code" -> "Preferences" -> "Configure User Snippets" -> "New Global Snippets File" - <any-name> :
{
"React Component with Filename": {
"prefix": "rafc",
"body": [
"import React from 'react';",
"",
"export const ${TM_FILENAME_BASE} = () => {",
" return (",
" <div>${TM_FILENAME_BASE}</div>",
" );",
"};"
],
"description": "Creates a React component with the filename as the component name"
}
}

[sucesssoulman]

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.

[needlesandpins]

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

[ethioanonymous]

its nice tytor ....iam confused on how you set the id i get error...

[robkhold]

Thanks! I'd like links or code for the npm:s for the icons etc. I'd prefer you made the app without all this extra stuff. :)

Of course this whole uuid is making things unnecessary complicated for beginners...Just causing trouble.

[magdykishk]

Somehow you managed to confuse me in the first 10 seconds of the video I still don't understand how can a person eat milk?

[zenel]

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

[sergekamga]

Updating todo was not clear. Where does the property "isEditing" come from? A todo object has isCompleted but not isEditing.

[gourmetpro]

you didnt explain how you put a delete mark on the text when clicking on the text tho

[orion]

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.

[itssacmac]

From where he got that CSS 4:54, i mean how would i know the CSS style he used?

[cd]

I thank you very much that you care about local storage in source code, thank you very much

[vishwaroop]

i am getting an error when using the trash icon for deleting the task as it is not a function, can anyone help'

[snowphoenix]

ERROR in ./src/Components/Todo.js 5:0-66

[SamuelOguobi]

great lesson
but the github link isn't opening

[DaniyalMutahhar]

You did explained it well but for newbies, they want to make the ui of their starting apps to be cool, so it would have been great if you had provided the css also :) Just an opinion