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

Channel: [ Ссылка ]
Website: [ Ссылка ]
FaceBook: [ Ссылка ]
Twitter: [ Ссылка ]
GitHub: [ Ссылка ]
#ReactJS #React #JS #JavaScript #App #ToDoListApp #reactproject #WebStylePress #webdevelopment #ReactToDoList

свернуть