Trang chủ

Web Development

React JS

React Front To Back

React Front To Back

Loại khoá học: Web Development

Learn modern React by building 4 projects including a Firebase 9 app and a full stack MERN app

50.000 VND

1.699.000 VND

Đầy Đủ Bài Giảng

Học Online Tiện Lợi

Kích Hoạt Nhanh 2-5 Phút

Thanh toán tự động

Được phép tải xuống

Mô tả

This course is for anyone that wants to learn React and also for React developers looking to build some projects and sharpen their skills.

The first project (Feedback App) is structured in a way so I can explain the fundamentals such as components, hooks, props, state, etc in a way that beginners can understand. The second project (Github Finder) will show you how to work with 3rd party APIs and the third project (House Marketplace) is a larger app that uses Firebase 9 and includes authentication, Firestore queries, file storage and more.

The final project has been added! It is a fullstack MERN support ticket system that uses Redux and Redux Toolkit.

Here are some of the things you will learn in this course:

React fundamentals including components, props, hooks, state, etc

React hooks such as useState, useEffect, useContext, useReducer, useRef, etc

Creating custom hooks

React Router v6 (latest version)

How to handle global state with context, reducers and hooks

Firebase 9 authentication, queries, storage

Deploying React apps to Vercel & Netlify

Basic Animation with Framer Motion

Implement Leaflet maps and Swiper sliders

Fullstack MERN (MongoDB, Express, React, Node.js)

REST API creation

Redux

Redux Toolkit

Authentication with JWT

Much More...

This course has been completely re-done with new projects and concepts from the old course. I have a few React courses and this is the one that I always suggest people start with before moving on to the MERN courses

Bạn sẽ học được gì

Learn modern React by building 4 projects

Suitable For Both Beginners & Intermediate React Developers

Feedback app with in depth explanation of React fundamentals

Build a house marketplace with React and Firebase 9

Learn React hooks and how to create custom hooks

Learn how to use context and reducers to manage global state

Build a Fullstack MERN support ticket system with Redux Toolkit

Yêu cầu

You should know JavasScript pretty well before learning React or any framework

Nội dung khoá học

20 sections

Introduction

5 lectures

Welcome To The Course!

01:54

What Is React?

08:31

Environment Setup

05:50

Code Repos

01:59

Links & Resources

00:29

React Basics & JSX

6 lectures

Feedback Project Intro

02:49

Create React App

07:01

Initializing React

07:12

Intro To JSX

07:05

Dynamic Values & LIsts in JSX

05:23

Conditionals in JSX

05:08

Components, Props & State

7 lectures

Creating Your First Component & Props

08:00

Adding Styles To A Component

05:34

State & useState Hook

08:21

Managing Global State

08:28

Card Component & Conditional Styles

10:15

Events & Prop Drilling

10:18

FeedbackStats Component & Reactivity

07:31

Forms, Validation & Simple Animation

6 lectures

Form Input & State

06:02

Custom Button Component

05:27

Real-Time Validation

04:31

Rating Select Component

07:07

Add Feedback

07:20

Fade Animation With Framer Motion

03:51

Creating Routes & Links

5 lectures

Creating Routes (React Router 5)

08:21

Upgrading To React Router 6

02:32

Creating Links (v5 & v6)

05:12

NavLink & useParams

06:39

Navigate & Nested Routes

06:51

Context API, useContext Hook & Deployment

7 lectures

Create a Context & Provider

06:34

Get Global State With The useContext Hook

04:41

Moving Functions To Context

07:24

Edit Feedback Event

05:46

Side Effects With useEffect

07:32

Update Feedback Item

05:13

Deploy To Netlify

05:22

APIs & HTTP Requests

7 lectures

APIs & Requests Explained

06:25

Setting Up JSON-Server Mock Backend

07:46

Run Client & Server With Concurrently

02:36

Fetch Data From JSON-Server Backend

04:55

Spinner Component

05:33

Add Feedback & Setting a Proxy

05:25

Update & Delete From JSON-Server

04:16

GitHub Finder Project Start

5 lectures

GitHub Finder Project Intro

02:34

Setup Tailwind & Daisy UI

08:25

Navbar Component

09:05

Footer Component

03:32

Pages & Routes

07:38

Working With The GitHub API

10 lectures

Github API & Getting Token

07:06

UserList Component

10:15

Loading Spinner

03:07

Display Users

06:48

Setup Github Context

09:17

Reducers & useReducer Hook

09:16

Clean Up Fetch Users

03:42

User Search Component

10:26

Search Users

04:31

Clear Users

03:26

User Profile & Alerts

7 lectures

Alert Context & Reducer

08:08

Alert Component

07:42

Get Single User

09:38

User Profile Top

11:31

User Profile Stats

08:43

Get User Repos

10:05

Repo Items

08:24

Refactoring Context & Actions

4 lectures

Move SearchUsers To Actions File

06:19

Move getUser To Actions File

07:47

Cleaning Up Our Actions & Axios

07:51

Deploy To Vercel

02:29

More Advanced React Hooks

8 lectures

Section Intro

00:45

useRef Example 1 - Create DOM Reference

08:19

useRef Example 2 - Get Previous State

05:15

useRef Example 3 - Memory Leak Error Fix

09:43

useMemo Example

10:43

useCallback Example

07:11

Custom Hook 1 - useFetch

09:11

Custom Hook 2 - useLocalStorage

15:09

House Marketplace Project Start

6 lectures

House Marketplace Project Intro

04:40

App & FIrebase Setup

06:56

Enable Authentication & Create Rules

07:54

Dummy Data & Indexes

11:48

Pages & Routes

06:47

Navbar Component

10:02

Firebase Authentication & Profile

10 lectures

Sign In & Sign Up Forms

14:55

Register User

05:28

Save User To Firestore

04:51

User Sign In

08:25

Alerts With React Toastify

04:54

User Logout

05:37

Display & Update User Details

13:24

PrivateRoute Component & useAuthStatus Hook

14:50

Forgot Password Page

09:15

Google OAuth

13:59

Get & Create Listings

10 lectures

Explore Page

04:59

Fetch Listings From Firebase

15:06

Listing Item Component

11:43

Offers Page

03:29

Start Create Listing Page

12:47

Create Listing Form

17:37

Get Coords With Geocoding API

16:33

Uploading Images To FIrebase

11:51

Save Listings To Firestore

08:02

Quick Note & Change

02:05

Single Listings, Map, Slider & Edit

12 lectures

Fetch Single Listing

08:03

Listing Details

10:56

Contact Landlord Page

12:29

Leaflet Map

07:29

Listings Page Slider

07:01

Explore Slider

13:28

Profile Listings & Delete

12:42

Load More Pagination

08:27

Edit Listing Icon

05:20

Edit Listing

12:41

Clear Up Console Warnings

03:36

Deploy To Vercel

03:17

MERN Project Start, API & Backend Authentication

11 lectures

Project Intro

01:59

What Is The MERN Stack?

04:29

MongoDB Setup

05:07

Server File Stucture

05:50

Basic Express Server Setup

06:24

Add Routes & Controller

05:57

Error & Exception Handling

11:42

Connect To The Database

06:00

Register User

10:04

Login & Create JWT

09:13

Protect Routes & Authentication

13:23

Frontend Authentication

8 lectures

Frontend Folder Setup

09:01

Header & Initial Pages

08:02

Home, Login & Register UI

15:05

Redux Setup & Auth Slice

08:41

Hook Register Form To Redux

09:39

Register User

21:00

Logout User

08:12

User Login

07:53

Tickets Functionality

11 lectures

Ticket Model & Routes

11:07

Get & Create Tickets (Backend)

06:21

Single Ticket, Update & Delete (Backend)

09:20

Route Guard

09:59

New Ticket Form

08:34

Add Tickets To Redux

05:07

Create Ticket Functionality

16:10

Fetch Tickets From Backend

08:51

Listing Tickets In UI

06:41

Single Ticket Display

15:21

Close Ticket Functionality

09:43

Notes Functionality & Deploy

6 lectures

Notes Backend

13:30

Fetch Notes Through Redux

08:57

Display Notes

07:53

Note Form Modal

10:18

Submit a Note

05:30

Deploy To Heroku

12:05

Đánh giá của học viên

Chưa có đánh giá

Course Rating

5

0%

4

0%

3

0%

2

0%

1

0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Email

Nội dung

Khoá học liên quan

Laravel 10 - Build News Portal and Magazine Website (2024)

Laravel 10 - Build News Portal and Magazine Website (2024)

Shopify Theme Development: Create Shopify Themes [2023]

Shopify Theme Development: Create Shopify Themes [2023]

100 Days of Code: The Complete Python Pro Bootcamp

100 Days of Code: The Complete Python Pro Bootcamp

Master NestJS a Node.js Framework 2024

Master NestJS a Node.js Framework 2024

Spring Framework 5: Beginner to Guru

Spring Framework 5: Beginner to Guru

Ultimate Unity Overview (70+ Tools and Features Explained!)

Ultimate Unity Overview (70+ Tools and Features Explained!)

The Git & Github Bootcamp

The Git & Github Bootcamp

Clean Code

The Complete Oracle SQL Bootcamp (2024)

The Complete Oracle SQL Bootcamp (2024)

Khóa học Xử lý Dữ liệu cho Data Warehouse (Phần Cơ Bản)

Khóa học Xử lý Dữ liệu cho Data Warehouse (Phần Cơ Bản)

Framework Python với Selenium 3.x

Framework Python với Selenium 3.x

Html Css 21 Ngày: Tạo giao diện website chuyên nghiệp từ đầu

Html Css 21 Ngày: Tạo giao diện website chuyên nghiệp từ đầu

The Complete Java Development Bootcamp

The Complete Java Development Bootcamp

Trở thành Quality Control (QC) / Tester (kiểm thử phần mềm)

Trở thành Quality Control (QC) / Tester (kiểm thử phần mềm)

The Complete 2024 Web Development Bootcamp

The Complete 2024 Web Development Bootcamp

Build a Backend REST API with Python & Django - Advanced

Build a Backend REST API with Python & Django - Advanced

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi