• Post category:StudyBullet-17
  • Reading time:11 mins read

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 will 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

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:


Get Instant Notification of New Courses on our Telegram channel.


  • Reactjs core functionality
  • How React works
  • Virtual DOM
  • Rendering JSX element
  • Component, State & Props
  • React Form
  • Controlled form vs Uncontrolled form
  • Rendering list & key
  • Props drilling
  • Context API
  • Render Props
  • React hooks
  • Custom hooks
  • Handling CSS with React
  • React routing
  • Authentication and Protected route
  • List searching and Pagination
  • Recover password by email
  • Verify user email
  • HTTP Essentials
  • Postman Client
  • Integrating RESTful APIs

Web 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.

English
language

Content

Introduction

Course Overview
What is React
What is Virtual DOM
Install Nodejs on Windows OS
Install Nodejs on Mac OS
Install Nodejs on Linux OS
Setup a React Project

JSX Element and Rendering JSX Element

What is JSX Element
JSX More Detail
Rendering JSX Element

Component and Props

What is Component
What is Props
Export and Import Component
Root Component
Children Property
Class Based Component

State and Life Cycle Method

What is State
More About State
Component Did Mount
Update State
Component will Unmount
State in Functional Component
Event Handler
Passing Parameter to Event Handler

Conditional Rendering List and Key

What is Conditional Rendering
Conditional Rendering More Detail
List
List Key Props
Counter App

React Form

Controlled Form vs Uncontrolled Form
Input Element
Textarea Input Element
Select Input Element
Checkbox Input Element
Radio Input Element
Submit Input
Registration Form

Higher Order Component

What is Higher Order Component
How to Create Higher Order Component
How to Use Higher Order Component

Render Props Pattern

What is Render Props
Render Props Example
Render Props Variation

Context API

Props Drilling
What is Context API
Create Custom Context
How to Use Context
Built in Context
useContext Hook

React Hook

React Hook Introduction
What is useEffect Hook
Timer Example
Cleanup Function
Fetch Data from API Request
React Memo and useCallback Hook
useMemo Hook
useRef Hook
useReducer Hook
Complex Counter
Fetch Post List Example
Fetch Post List by useReducer Hook
Custom Hook

React CSS

React Stylesheet
CSS Style in Html
Inline CSS
CSS Module
Dynamic CSS

React Router

What is React Router
Route Configuring
Nav Link
Active Link
Navigate Programmatically
Not Found Route
Dynamic Route
Url Params
Search Params
Nested Route
Relative Link
Source Code

React Blog Project

Project Requirement Analysis
Initiating Nodejs Project
MongoDB Install on Windows OS
MongoDB Install on Mac OS
MongoDB Install on Linux OS
Add MongoDB Database Reference to Nodejs Project
Setup Email Credentials
Aws S3 Bucket Setup
Install Postman Software
Start Server
Initiating React App
Project Layout and Routing
Signup Form
Signup Form Validation
Signup API Integration
Signup Functionality Testing
Base Url
Toast Message
Signin API Integration
Store Information to Local Storage
Auth Context
Logout Functionality
Category Module All Pages
Add Category
Add Token to Request Headers
Category List
Category List Pagination
Search Category
Update Category
Delete Confirmation Modal
Delete Category
Post Module All Pages
Add New Post
Upload File
Post List
Post Detail
Post Update
Post Delete
Home Page
Update Profile
Change Password
Verify User
Multi User Role
Recover Password
Wrapup

What Next

What Next