All You Need To Know React With Practical Project

Learn React by building real-world applications with React, React hooks & integrating RESTful APIs

What you'll learn

Master the entire modern frontend stack: React, APIs integration, React hooks

Learn about the React core functionality

Learn React beautiful mechanism such as Context API, Props drilling, Render props

Realize the power of building reusable components

Create real life project

Becoming proficient in integrating RESTful APIs with React

Authentication including password reset and authorization by protected route

Avoid useless coding - Learn what's important

Requirements

Basic of Javascript

General knowledge of how the web works is recommended but not a must-have

Absolutely no understanding of React or frontend development is required, I take you from beginner to intermediate developer

Description

Do you want to build fast and powerful frontend applications with JavaScript? Would you like to become a more complete and in-demand developer?Then Reactjs is the hottest technology for you to learn right now, and you came to the right place to do it!This is a project based course where we build an extensive, in-depth frontend application. We will start from scratch and end up with a professional project. We will dive deep into React, React hooks, APIs integration. Here is some of what you will learn in this course and project:Reactjs core functionalityHow React worksVirtual DOMRendering JSX element Component, State & PropsReact FormControlled form vs Uncontrolled form Rendering list & keyProps drillingContext APIRender PropsReact hooksCustom hooksHandling CSS with ReactReact routingAuthentication and Protected routeList searching and PaginationRecover password by emailVerify user emailHTTP EssentialsPostman ClientIntegrating RESTful APIsWeb development is evolving, in the past, server-side rendering handled all views and templates, but with the emergence of frontend frameworks like React, Angular, and Vue, projects are now divided into backend and frontend components. The backend manages database interactions and serves JSON, while the frontend fetches data and creates the user interface. This course focuses on the entire frontend aspect, enabling you to construct robust application and giving you the freedom to choose your backend technologies.Our curriculum goes beyond typical React tutorials, as we cover advanced topics like authentication, roles, permissions, password reset mechanisms, verify user email, and many more. By the end of this course, you'll have a deep understanding of what it takes to be a proficient frontend engineer.

Overview

Section 1: Introduction

Lecture 1 Course Overview

Lecture 2 What is React

Lecture 3 What is Virtual DOM

Lecture 4 Install Nodejs on Windows OS

Lecture 5 Install Nodejs on Mac OS

Lecture 6 Install Nodejs on Linux OS

Lecture 7 Setup a React Project

Section 2: JSX Element and Rendering JSX Element

Lecture 8 What is JSX Element

Lecture 9 JSX More Detail

Lecture 10 Rendering JSX Element

Section 3: Component and Props

Lecture 11 What is Component

Lecture 12 What is Props

Lecture 13 Export and Import Component

Lecture 14 Root Component

Lecture 15 Children Property

Lecture 16 Class Based Component

Section 4: State and Life Cycle Method

Lecture 17 What is State

Lecture 18 More About State

Lecture 19 Component Did Mount

Lecture 20 Update State

Lecture 21 Component will Unmount

Lecture 22 State in Functional Component

Lecture 23 Event Handler

Lecture 24 Passing Parameter to Event Handler

Section 5: Conditional Rendering List and Key

Lecture 25 What is Conditional Rendering

Lecture 26 Conditional Rendering More Detail

Lecture 27 List

Lecture 28 List Key Props

Lecture 29 Counter App

Section 6: React Form

Lecture 30 Controlled Form vs Uncontrolled Form

Lecture 31 Input Element

Lecture 32 Textarea Input Element

Lecture 33 Select Element

Lecture 34 Checkbox Input Element

Lecture 35 Radio Input Element

Lecture 36 Submit Input

Lecture 37 Registration Form

Section 7: Higher Order Component

Lecture 38 What is Higher Order Component

Lecture 39 How to Create Higher Order Component

Lecture 40 How to Use Higher Order Component

Section 8: Render Props Pattern

Lecture 41 What is Render Props

Lecture 42 Render Props Example

Lecture 43 Render Props Variation

Section 9: Context API

Lecture 44 Props Drilling

Lecture 45 What is Context API

Lecture 46 Create Custom Context

Lecture 47 How to Use Context

Lecture 48 Built in Context

Lecture 49 useContext Hook

Section 10: React Hook

Lecture 50 React Hook Introduction

Lecture 51 What is useEffect Hook

Lecture 52 Timer Example

Lecture 53 Cleanup Function

Lecture 54 Fetch Data from API Request

Lecture 55 React Memo and useCallback Hook

Lecture 56 useMemo Hook

Lecture 57 useRef Hook

Lecture 58 useReducer Hook

Lecture 59 Complex Counter

Lecture 60 Fetch Post List Example

Lecture 61 Fetch Post List by useReducer Hook

Lecture 62 Custom Hook

Section 11: React CSS

Lecture 63 React Stylesheet

Lecture 64 CSS Style in Html

Lecture 65 Inline CSS

Lecture 66 CSS Module

Lecture 67 Dynamic CSS

Section 12: React Router

Lecture 68 What is React Router

Lecture 69 Route Configuring

Lecture 70 Nav Link

Lecture 71 Active Link

Lecture 72 Navigate Programmatically

Lecture 73 Not Found Route

Lecture 74 Dynamic Route

Lecture 75 Url Params

Lecture 76 Search Params

Lecture 77 Nested Route

Lecture 78 Relative Link

Lecture 79 Source Code

Section 13: React Blog Project

Lecture 80 Project Requirement Analysis

Lecture 81 Initiating Nodejs Project

Lecture 82 MongoDB Install on Windows OS

Lecture 83 MongoDB Install on Mac OS

Lecture 84 MongoDB Install on Linux OS

Lecture 85 Add MongoDB Database Reference to Nodejs Project

Lecture 86 Setup Email Credentials

Lecture 87 Aws S3 Bucket Setup

Lecture 88 Install Postman Software

Lecture 89 Start Server

Lecture 90 Initiating React App

Lecture 91 Project Layout and Routing

Lecture 92 Signup Form

Lecture 93 Signup Form Validation

Lecture 94 Signup API Integration

Lecture 95 Signup Functionality Testing

Lecture 96 Base Url

Lecture 97 Toast Message

Lecture 98 Signin API Integration

Lecture 99 Store Information to Local Storage

Lecture 100 Auth Context

Lecture 101 Logout Functionality

Lecture 102 Category Module All Pages

Lecture 103 Add Category

Lecture 104 Add Token to Request Headers

Lecture 105 Category List

Lecture 106 Category List Pagination

Lecture 107 Search Category

Lecture 108 Update Category

Lecture 109 Delete Confirmation Modal

Lecture 110 Delete Category

Lecture 111 Post Module All Pages

Lecture 112 Add New Post

Lecture 113 Upload File

Lecture 114 Post List

Lecture 115 Post Detail

Lecture 116 Post Update

Lecture 117 Post Delete

Lecture 118 Home Page

Lecture 119 Update Profile

Lecture 120 Change Password

Lecture 121 Verify User

Lecture 122 Multi User Role

Lecture 123 Recover Password

Lecture 124 Wrapup

Section 14: What Next

Lecture 125 What Next

Take this course if you're a backend developer looking to go into frontend development using the most complete course on the market,Everyone who's interested in building modern, scalable and high-performing web applications,Programmers who want to learn the most in demand skills of a frontend developer,Any frontend developer who wants to learn React