30+ React Projects, Learn React JS by Building 30+ Web Apps

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: How to get the most out of this course ?

Lecture 3: Course Resources and Useful Links

Chapter 2: Optional Env Setup & React Crash Course inkl Project

Lecture 1: Setting up the React Development Env.

Lecture 2: Node.js and npm resources

Lecture 3: React Crash Course

Chapter 3: P01 E-signature-App

Lecture 1: Project overview

Lecture 2: Create Title component and general styling in React

Lecture 3: Learn how useState works and manipulate name and date

Lecture 4: Finished project files

Chapter 4: P02-Randomize-colors

Lecture 1: Project overview

Lecture 2: Using events and functions

Lecture 3: Finished project files

Chapter 5: P03-Like my photo

Lecture 1: Project overview

Lecture 2: Card design

Lecture 3: Install and use React Icons to the project

Lecture 4: React useState to like on click and double Click

Lecture 5: Finished project files

Chapter 6: P04- Testimonials

Lecture 1: Project overview

Lecture 2: Resources

Lecture 3: Create a React Button components

Lecture 4: Get Post/Users/Comments using React useState and useEffect Hooks

Lecture 5: Finished project files

Chapter 7: P05- Alerts

Lecture 1: Project overview

Lecture 2: Create a Alert component

Lecture 3: Automatically close alert with delay using time trigger

Lecture 4: Finished project files

Chapter 8: P06-Temperature-controller

Lecture 1: Project overview

Lecture 2: Design the Controller component

Lecture 3: Change temperature using the React useState Hook

Lecture 4: Finished project files

Chapter 9: P07-Dark-mode

Lecture 1: Project overview

Lecture 2: Create a Blog component

Lecture 3: Dark mode using useContext

Lecture 4: Finished project files

Chapter 10: P08-Slide-to-unlock

Lecture 1: Project overview

Lecture 2: Create the UI

Lecture 3: Create Lock screen

Lecture 4: Creating the Lock screen state

Lecture 5: Lock the screen

Lecture 6: Toggle Lock and Unlock Screen

Lecture 7: Finished project files

Chapter 11: P09-Slider App

Lecture 1: Project overview

Lecture 2: Create the Slider Component

Lecture 3: useState hook to manipulate the Circle using the slider Component

Lecture 4: Finished project files

Chapter 12: P10-Hidden-search-bar

Lecture 1: Project overview

Lecture 2: Create the search component and general styling

Lecture 3: Show search bar

Lecture 4: Auto focus on the input using useRef Hook

Lecture 5: Finished project files

Chapter 13: P11-Magic Popup

Lecture 1: Project overview

Lecture 2: Create a Popup component

Lecture 3: Trigger a popup and close it

Lecture 4: Time Triggered popup

Lecture 5: Finished project files

Chapter 14: P12- Project Progress tracker

Lecture 1: Project overview

Lecture 2: Ui design and input outo focus with useRef and useEffect

Lecture 3: Create a Progressbar component

Lecture 4: Add multiple Progress Bars using map method

Lecture 5: Manipulate each Progress bars data with useState

Lecture 6: Random Progress Bar data with useEffect

Lecture 7: Finished project files

Chapter 15: P13-Dialog-box

Lecture 1: Project overview

Lecture 2: Dialog Box component UI design

Lecture 3: Hello Dialog Box component

Lecture 4: Unsubscribe Dialog Box component

Lecture 5: Bounce animation effect

Lecture 6: Finished project files

Chapter 16: P14-Filter-contacts-app

Lecture 1: Project overview

Lecture 2: UI design and Autofocus using useRef and useEffect

Lecture 3: Import data from JSON file

Lecture 4: Create a Contact component

Lecture 5: Filer contacts

Lecture 6: Finished project files

Chapter 17: P15- Simple Form Registration with Validation

Lecture 1: Project overview

Lecture 2: Form Ui

Lecture 3: Handle inputs and Registrations

Lecture 4: Input fields individual validation

Lecture 5: Form Submission and Validation

Lecture 6: Finished project files

Chapter 18: P16-Notes-app

Lecture 1: Project overview