React Course | Create A Todo App With React JS and Firebase | React Project For Beginners скачать в хорошем качестве

React Course | Create A Todo App With React JS and Firebase | React Project For Beginners

🎁 Join my channel to get access to perks:    / @codeexplained   📜 Description In this course I will walk you through all the steps needed from start to finish to code a To Do App using React JS and Firebase. I will explain the logic behind each line of code before typing the code, I'm going to use diagrams and animations so you can follow up easily and have a better understanding of what's going on behind the scenes of our App/Code. In our To Do App the user can add a to do by filling a form (Controlled component) that has an input for the to do text, an input for date and time (We wi use the date and time pickers from Material UI), and he/she can select the project he/she wants to add the to-do to. The user can filter the todos by date (Today, Next 7 days, All days) or by project, se when he/she clicks on project, only the to dos under that project will appear. The user can add, remove or edit a to do. When editing a to do the user won't need to hit a "save button" to save the changes cause the changes ei be saved automatically. The user can add, remove, rename a project. When removing a project, all the todos under that project will be removed. When the user completes a to do, we show a line through the text of the to do and show a Circle Check Icon instead of a Circle (We are going to use the icons from react bootstrap icons). When a to do is completed, the user can repeat the to do next day. We will add some animations (transitions) to our App, using react spring library. 🕔 Timeline : 00:00:00 - Introduction 00:08:05 - Set Up Our React Project 00:12:16 - Create a Functional Component 00:24:29 - Style a React App 00:38:23 - Create a Modal 00:55:27 - Controlled Component 01:18:05 - Array map() in React 01:31:43 - Projects Component 01:52:30 - Add New/Rename Project 02:14:19 - Todos Component 02:22:41 - Todo Component 02:37:06 - Edit a Todo 02:55:38 - React Context API 03:16:09 - useEffect hook & TodoForm Update 03:43:20 - Firebase Firestore & Custom Hooks 04:15:24 - Run Effect Once & Firestore quota exceeded FIX 04:23:12 - moment JS, random color & Add Data To Firestore 04:45:50 - Next 7 days component 05:04:15 - Filter todos 05:19:22 - Delete Todo/Project from firestore database 05:33:40 - Rename a Project 05:48:30 - Check And Repeat a Todo 06:12:22 - Edit a Todo 06:38:22 - Animations With React Spring 07:05:16 - Deploy Our React App 🌍 Social Media Links. ◾ Facebook :   / code.explained.official   ◾ Twitter :   / code_explained   ◾ Instagram :   / code.explained.official   ◾ GitHub : https://github.com/CodeExplainedRepo 💲 Suppport the Channel Paypal : https://paypal.me/CodeExplained Buy Me a Coffee: https://www.buymeacoffee.com/CodeExpl...