React ToDo List Tutorial (V1) | Full React JS Project for Beginners from Scratch

A simple and most easy To Do List App using ReactJS. We will use bootstrap for basic styling. You can also use Reactstrap. We will use FontAwesome icons in this react js project. We will use function components and react hooks. We will also break down this app into child components. This is full React JS project for absolute beginners. A step by step beginner friendly To Do List App tutorial in ReactJS.

⭐⭐ React ToDo List App (v2) | Refactored & Improved ⭐⭐

⭐ Using this React JS App we can:
- Add new task or to do in to do list
- Mark task as completed (toggle task status)
- Delete Task
- Update (edit) task

We used create-react-app to create this app.

⭐You will learn:
- How to build a To Do List app in React JS
- How to add, edit delete records in state using React JS
- How to use bootstrap in React JS
- How to use FontAwesome in React JS app.
- How to manage state in React JS
- How to display records from state using map in React JS
- How to order records before render in React JS
- How to create functions, functional components, event handlers in React JS
- How to get value from an onChange event for input in React JS
- How to use form in React JS
and more...

⭐Issues Addressed:
- A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.
Solution: Use quotes in useState if it's empty

⭐Correction:
Don't use quotes for JavaScript Objects keys. Use quotes for keys in JSON Object.

⭐Requirements:
- NodeJS should be installed in your PC to build this app
- Terminal program (command prompt, power shell or git for windows)

TIMESTAMPS
00:00 INTRO
01:18 Install React JS Boilerplate
02:08 Run ReactJS App
02:50 Install Bootstrap & FontAwesome
06:07 Create Initial State for ToDo List
07:02 Create Temp State
07:54 Create Event Handler Functions
10:10 Display To Dos from State
13:22 CSS Styles For To Do List
15:00 Mark Done Functionality
16:10 Create Mark, Edit, Delete Icons
17:00 Style Icons
18:40 Record Sorting Before MAP
20:15 Create Add Task & Update Task Forms
21:12 Add New To Do (Task)
25:18 Delete Task Functionality
27:37 Toggle Task Status
30:07 Hide Edit Control for Completed Task
30:50 Update Task Functionality
41:18 Toggle (Add / Update) Forms
44:08 Cancel Update Functionality
45:37 Testing App Functionality
47:40 Breaking Down into Components
58:00 Corrections (JS Object in State / Keys in Quotes? & Typo)
1:00:20 OUTRO

⭐⭐ Project Files (V1) ⭐⭐

⭐⭐ Project Files with Single Component ⭐⭐

⭐ Node React JSON File Records Full Stack Local CRUD App Tutorial | React JS

⭐ Status Update App in ReactJS (Like Twitter Status Update) | React JS Tutorial

⭐ ReactJS Apps / Projects

⭐ ReactJS Playground

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#ReactJS #React #JS #JavaScript #App #ToDoListApp #reactproject #WebStylePress #webdevelopment #ReactToDoList

[webstylepress]

To Do List App Project in ReactJS is here. There are many ways to handle one thing and this app can be refactored. Functions to add, edit and delete can be shortened and refactored. Let me know in comments and I will create another video on how can we use easiest most, shortest most functions to add, edit delete stuff using React JS.

[mr.RAND]

5>1 && console.log("print: yes five is greater than 1"); 5<1 && console.log("this will not print");
Thank you now I understand the use of &&.

[ichiroutakashima]

Needed this tutorial, especially the EDIT function, most ToDo List app doesn't include such functions.

[Ribyum]

This worked perfectly, I found this tutorial to be much more in depth and easier to understand than others. Thank you! :)

[harshsinghaniya]

I had watched few more videos on this todo app but they way you explained things was very awesome. I got everything in one go from your video.
Thanks man!

[traezeeofor]

Thanks for this video. You can refactor a little so:

in addTask function:
remove let num = toDo.length + 1;
change to let num = Date.now();

So that num keys are always unique. As it is if you delete old item and create new item keys would be duplicated.

[jatinnagla]

I was able to create a complete react app with CRUD operation using this tutorial so I wanted to thank you for this video

[vovan]

Thank you for the video, I'm new to reactjs.

[oleeg]

really like your explanations, please do more videos like this base on a real project, very useful!

[ysaiaspaul]

Thanks for the tutorial, very useful and descriptive.

[pexuss]

Where is the link to a full stack todo list, this todo list app is perfect but do you have a project for full stack developers with managing state between frontend and database backend?

[綠豆-or]

react 18
Not friendly to newbies, thanks this video.

[sanashahin]

Video is good for the experienced but not for the newbie. You will need a guide to know about each step. If you are programmer then you can get the idea but for in depth detail you will definitely need someone to explain.

[yili]

Can you explain why update input has: <input
value={ updateData && updateData.title why can not have {updated data.title} only?