Скачать или смотреть React To Do List App Tutorial (V1) | React JS Project for Beginners

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 ⭐⭐
   • React ToDo List Tutorial (v2) | Refactored...  

⭐ 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) ⭐⭐
https://github.com/webstylepress/to-d...

⭐⭐ Project Files with Single Component ⭐⭐
https://github.com/webstylepress/to-d...

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

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

⭐ ReactJS Apps / Projects
   • ReactJS Apps / Utilities  

⭐ ReactJS Playground
   • ReactJS Playground  

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

Channel:    / webstylepress  
Website: https://www.webstylepress.com
FaceBook:   / webstylepress  
Twitter:   / webstylepress  
GitHub: https://github.com/webstylepress
#ReactJS #React #JS #JavaScript #App #ToDoListApp #reactproject #WebStylePress #webdevelopment #ReactToDoList