React JS Course: Build and Deploy To-Do List Project | Step-by-Step Free React Tutorial 2024

Welcome to the React JS Course! In this tutorial, we will guide you through creating and deploying a functional and stylish To-Do List application using #ReactJS. Whether you're new to React or looking to brush up on your skills, this tutorial has you covered.
What You'll Learn:
- Setting Up the Project: Learn how to set up a React environment using Vite.
- State Management: Learn to manage and update the state to handle user inputs and application logic.
- Event Handling: Master the basics of handling user events in React.
- Styling Components: Add CSS to make your To-Do List look clean and professional.
- Persisting Data: Implement local storage to save your tasks between sessions.
- Component Structure: Understand how to break down the application into reusable components.
- Deploying to GitHub Pages: Deploy the App created with Vite JS to GitHub Pages
Who Is This Tutorial For?
- Beginners: No prior knowledge of React is needed. We'll start from scratch and guide you through each step.
- Intermediate Developers: Enhance your React skills with practical, hands-on experience.
- Advanced Developers: Get a refresher on the fundamentals while creating a useful project.
Resources:
Source Code: github.com/DzmitryUr/to-do-list
Deployed To-Do List App: dzmitryur.github.io/to-do-list/
React Documentation: react.dev/
⌚️Timestamps:
0:08 What is React JS?
2:02 Creating React Project with Vite JS
3:43 Run and check the App created with Vite
4:10 Structure of the React Project created with Vite
6:29 'Hello World' Project in React JS + Vite
9:10 What is JSX in React? The basic JSX Rules
11:07 Converting JSX into JavaScript code with React.createElement()
14:40 Simple JSX for To-Do List App
17:50 What is a Component in React? Types of Components
18:50 Creating Functional Component
23:43 Props in React. Key Features of Props
26:05 Object Destructuring in Functional Components
26:58 What Are React Hooks? The basic Rules of React Hooks
27:45 The ‘useState’ Hook
28:40 Input and Button elements in JSX
33:07 Store and change the input's value with the 'useState' hook
35:15 onClick Event Handler for the Button
37:40 Conditional Rendering in React
39:55 Data Structure for the To-Do List App. Array of objects in React JS
41:16 Adding the new todo object to the state array
43:55 Rendering an array of objects in JSX with JS map function
47:21 Removing an object by ID from the array using JS filter function
54:15 Adding checkbox element and event handlers to JSX
55:15 Searching for a todo object by ID in the array and modifying it
1:01:57 Deploying Vite App to GitHub Pages
1:06:28 Check the Deployed App on GitHub Pages
1:08:21 What is useEffect hook in React? Syntax and Key Concepts of the useEffect hook in React?
1:09:54 What is localStorage in JavaScript? JSON methods stringify() and parse()
1:10:46 Saving todos into localStorage using hook useEffect
1:13:02 Displaying todos from localStorage
1:17:31 What is Code Refactoring? Dividing Code into Small Components. Lifting State Up
1:18:40 Creating separate Component for adding todos
1:25:15 Creating ToDo Component for each todo row
1:28:25 Testing and debugging the To-Do List Application
If you find this video helpful, please give it a thumbs up 👍, leave a comment below 💬, and subscribe to my channel for more content on web development!
Happy Coding!
#ReactCourse #ReactJSTutorial #JavaScript #WebDevelopment #Frontend #reactjsforbeginners #reactjstutorialforbeginners #reactjscourse #reactjsproject #useEffect #localStorage #JSON #ReactJSCourse #Refactoring #DataStructures #ToDoListApp #CodingTutorial #reacthooks #jsx #vitejs

[@vahidmardani3885]

Like it

[@DevWebApp]

⏱ Timestamps:
0:08 What is React JS?
2:02 Creating React Project with Vite JS
3:43 Run and check the App created with Vite
4:10 Structure of the React Project created with Vite
6:29 'Hello World' Project in React JS + Vite
9:10 What is JSX in React? The basic JSX Rules
11:07 Converting JSX into JavaScript code with React.createElement()
14:40 Simple JSX for To-Do List App
17:50 What is a Component in React? Types of Components
18:50 Creating Functional Component
23:43 Props in React. Key Features of Props
26:05 Object Destructuring in Functional Components
26:58 What Are React Hooks? The basic Rules of React Hooks
27:45 The ‘useState’ Hook
28:40 Input and Button elements in JSX
33:07 Store and change the input's value with the 'useState' hook
35:15 onClick Event Handler for the Button
37:40 Conditional Rendering in React
39:55 Data Structure for the To-Do List App. Array of objects in React JS
41:16 Adding the new todo object to the state array
43:55 Rendering an array of objects in JSX with JS map function
47:21 Removing an object by ID from the array using JS filter function
54:15 Adding checkbox element and event handlers to JSX
55:15 Searching for a todo object by ID in the array and modifying it
1:01:57 Deploying Vite App to GitHub Pages
1:06:28 Check the Deployed App on GitHub Pages
1:08:21 What is useEffect hook in React? Syntax and Key Concepts of the useEffect hook in React?
1:09:54 What is localStorage in JavaScript? JSON methods stringify() and parse()
1:10:46 Saving todos into localStorage using hook useEffect
1:13:02 Displaying todos from localStorage
1:17:31 What is Code Refactoring? Dividing Code into Small Components. Lifting State Up
1:18:40 Creating separate Component for adding todos
1:25:15 Creating ToDo Component for each todo row
1:28:25 Testing and debugging the To-Do List Application

[@GoldBigger]

Like it