Trang chủ

Other IT & Software

React JS

Build Web Apps with React & Firebase

Build Web Apps with React & Firebase

Loại khoá học: Other IT & Software

Learn React from the ground up to make dynamic websites (includes Context, Hooks, Reducers, Routing, Auth, Databases)

50.000 VND

125 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ả

React is a hugely popular front-end library and React developers are always in hight demand in the web dev job market. In this course you'll learn how to use React from the ground-up to create dynamic & interactive websites, and by the time you finish you'll be in a great position to succeed in a job as a React developer. You'll also have 4 full React projects under your belt too, which you can customize and use in your portfolio!

Throughout the course you'll learn exactly what React is and why it's such a popular choice to make interactive & dynamic websites. You'll learn how to set up a React website from scratch, how to create React components, how to use state to manage component data & how to work with interactive events such as click events & form submissions.

You'll also get hands-on practise with the React Router (which is used in React to create website with "multiple pages") and you'll see how these are actually known as Single Page Applications (or SPA's for short).

We'll dive into React Hooks such as useState, useEffect, useParams & useHistory and use them to help us create 4 full React projects from scratch - a memory game, a recipe website, a finance tracker & a project management application.

You'll also learn some more avanced topics such as the React Context API to handle global state & reducers (including the useReducer hook) to help manage more complex state.

Once you've mastered React, we'll take our websites to the next level by integrating them with Firebase - a backend as a service. You'll learn how to add services such as a real-time database & authentication into your React sites as well as how to allow end-users to upload files from their computers with the help of Firebase Storage. Finally, I'll teach you how to build & deploy your React sites to the web using Firebase Hosting.

By the end of the course you'll have a solid understanding of React & be able to make your own production-ready websites!

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

Learn how to create modern & dynamic React websites from the ground up

Learn about Components, Props, Hooks, Context, State, Reducers & the React Router

Learn how to implement a database, authentication & file uploads with React & Firebase

Create & deploy fully fledged user-based React websites

Yêu cầu

Basic knowledge of JavaScript, HTML & CSS

Nội dung khoá học

20 sections

Introduction & Setup

6 lectures

Welcome to the Course

02:56

React at a Glance

04:04

What You Should Already Know

01:18

Environment Setup

03:07

Using the Course Files

01:37

Extra Resources & Tutorials

00:14

React Basics

5 lectures

Using React with a CDN

05:07

Making a React Component

04:39

JSX & Templates

03:50

Template Expressions & Variables

04:45

Click Events & Event Handlers

06:07

Using Create-React-App

5 lectures

Making a React Site (create-react-app)

03:56

Project Structure Walkthrough

07:23

Running the Application

04:35

Using Images

03:33

Using Stylesheets

03:18

Intro to State & useState

7 lectures

Why We Need State

07:13

Using the useState Hook

06:51

How State & Rendering Works

04:50

Outputting Lists

08:18

Using the Previous State

09:36

Conditional Templates

06:53

useState Limitations

01:35

Components & Props

10 lectures

Using Mutliple Components

01:38

Creating a Title Component

05:30

Intro to Props

05:51

React Fragments

03:47

Children Prop (Making a Modal Component)

07:45

Functions as Props

04:55

CHALLENGE - Showing the Modal

02:28

Portals

03:50

CHALLENGE - Reusable Event List Component

06:53

Class Components Overview

02:46

Styling React Applications

6 lectures

Using Global Stylesheets

03:09

Component Stylesheets

06:37

Using Inline Styles

03:20

Dynamic Inline Styles

02:36

Conditional CSS Classes

02:46

CSS Modules

06:22

User Input & Events

7 lectures

Forms & Labels in React

07:15

The onChange Event

06:16

Controlled Inputs

05:35

Submitting Forms (onSubmit)

06:20

Adding Events to the Event List

06:35

Using the useRef Hook

06:32

Select Boxes

05:21

Fetching Data & useEffect

11 lectures

New Project & JSON Server

07:00

Why We Need useEffect

08:18

Fetching Data with useEffect

07:48

The useEffect Dependency Array

09:24

useCallback for Function Dependencies

08:29

Creating a Custom Fetch Hook

14:03

Adding a Loading/Pending State

04:24

Handling Errors

08:42

Why We Need a Cleanup Function

04:39

Aborting Fetch Requests

05:44

useEffect Gotcha - Infinite Loops

06:15

PROJECT BUILD - Memory Game

11 lectures

Project Preview & Setup

05:42

Setting up & Shuffling Cards

08:05

Creating a Card Grid

04:18

CHALLENGE - Creating a Card Component

04:10

Making Card Choices

05:56

CHALLENGE - Comparing Choices

07:14

Adding a 'matched' Property to Cards

05:57

Flipping Cards

08:57

Flipping Animation (CSS)

02:19

Making Cards "disabled"

05:03

Finishing Touches

03:51

The React Router

10 lectures

Multi-Page React Sites

05:39

React Router Setup

06:58

Switch & Exact Match

06:02

Links & Nav Links

07:14

Fetching Data

07:24

Route Parameters

06:35

The useParams Hook

06:50

Programmatic Redirects

05:40

Redirect Component

02:28

Query Parameters

05:22

PROJECT BUILD - Recipe Directory

14 lectures

Project Preview & Setup

06:38

Router & Pages Setup

06:18

Making a Navbar Component

04:53

Fetching Data

04:40

Recipe List Component

09:45

CHALLENGE - Fetching a Single Recipe

05:17

Recipe Details Template

05:03

Making a "Create Recipe" Form

08:40

Adding Multiple Ingredients

12:34

Making a POST Request

12:33

CHALLENGE - Redirecting the User

03:42

Making a Search Bar Component

07:12

Search Results Page

08:16

Finishing Touches

03:21

React Context & Reducers

9 lectures

Prop Drilling

02:35

What is the Context API?

02:54

Creating a Context & Provider

07:34

Accessing Context Values

03:39

Creating a Custom Context Hook

05:48

Reducers & useReducer

13:57

Making a Color Theme Selector

10:36

Light & Dark Mode Selector

12:22

Styling Light & Dark Modes

06:40

Firebase Firestore

10 lectures

What is Firebase?

03:31

Firestore Databases

05:03

Connecting to Firebase

07:10

Fetching a Firestore Collection

11:47

Fetching a Firestore Document

09:37

Adding Firestore Data

05:52

Deleting Firestore Data

05:35

Real-Time Collection Data

07:47

Updating Documents

04:40

Real-Time Document Data

04:30

PROJECT BUILD - Finance Tracker (with Firebase Authentication)

30 lectures

Project Preview & Setup

03:17

CHALLENGE - Creating Pages & Routes

05:16

Creating a Navbar

04:43

Making the Login Form

07:19

CHALLENGE - Making the Signup Form

04:54

Firebase Setup

03:48

Firebase Authentication Setup

04:02

Creating a Signup Hook

11:14

Using the Signup Hook

09:09

Creating an Auth Context

11:39

Dispatching a Login Action

06:07

Creating a Logout Hook

06:31

Using the Logout Hook

04:48

Adding Cleanup Functions

08:14

Creating a Login Hook

04:48

Using the Login Hook

03:57

Conditionall Showing User Content

08:06

Firebase Auth State Changes

09:28

Waiting Until Auth is Ready

04:22

Route Guarding

06:00

Making a Transaction Form

12:14

Creating a useFirestore Hook

13:02

Adding Firestore Documents

10:57

Firestore Timestamps

03:41

Using the useFirestore Hook

09:36

Creating a useCollection Hook

11:19

Listing Transactions

07:54

Firestore Queries

10:29

Ordering Firestore Queries

06:08

Deleting Transactions

08:35

Firestore Rules

4 lectures

What Are Firestore Rules?

04:56

The Firebase CLI

05:43

Securing Collection Data

06:15

Deploying Firestore Rules

03:47

Building & Deploying

4 lectures

Building a React App

02:10

Deploying to Firebase

03:09

Updating the Site & Re-Deploying

01:57

Rolling Back Deployments

01:21

PROJECT BUILD - Project Management Site

43 lectures

Project Preview & Setup

06:25

Firebase Setup

06:41

Firebase Init (Rules, Hosting & Storage)

02:40

Re-using Firebase Hooks & Auth Context

05:53

Router & Pages Setup

06:53

Navbar Component

07:04

Sidebar Component

11:58

Creating a Signup Page

07:21

Handling File Inputs

13:46

Firebase Storage Setup

02:40

Uploading Profile Images

10:47

Signing a User Up

04:36

Creating User Documents

10:35

Logging Users Out

06:23

Making a Login Page

04:16

CHALLENGE - Logging Users In

05:06

Redirects & Route Guards

08:59

CHALLENGE - Conditional Navbar Links

03:44

User Avatar Component

07:06

Fetching Users

08:45

Showing Users Online

04:14

Making the "Create Project" Form

08:59

Using React-Select

05:31

Assigning Users

11:28

Setting Form Errors

07:27

Creating a Project Object

11:22

CHALLENGE - Saving New Projects

06:05

Fetching Projects

07:43

Making a Project List / Grid

09:38

Making a useDocument Hook

07:27

Project Details Page (fetching a project)

09:07

Project Summary Component

08:04

Making a Comments Form

10:12

Updating Firestore Documents

07:11

Adding Comments

04:46

Listing Comments

06:57

Completing / Deleting Projects

09:32

Making a Filter (part 1)

10:01

Making a Filter (part 2)

04:59

Making a Filter (part 3)

10:54

Adding Firestore Rules

11:20

Final Touches

03:47

Deploying the App

04:20

React with Firebase Version 9

16 lectures

Intro & Starter Project

09:12

Firebase Config File

04:33

Getting Documents

08:15

Real-Time Collection Data

08:39

Adding Data

03:33

Deleting Data

03:19

Setting Up Firebase Auth

01:08

Signing Users Up

06:53

Logging Users Out

03:17

Logging Users In

04:07

Adding Auth Context

07:30

Dispatching Actions

06:14

Route Guards & Redirects

04:54

Assigning Users to Books

04:31

Firestore Queries

06:20

Firebase Further Reading

01:29

React Router Version 6

6 lectures

Introduction to React Router 6

13:58

The Route Component

07:40

Redirects & useNavigate

07:53

Nested Routes

10:37

Refactoring the Recipe Site

09:34

Refactoring the Project Management Site

12:36

Extra Resources & JavaScript Helper Videos

10 lectures

Extra JavaScript Lessons

00:37

Destructuring

07:00

Import & Exports

05:04

Filter & Map Methods

06:22

Spread Syntax

02:13

Template Strings

02:10

Arrow Functions

02:46

Fetch API and Promises

05:26

Async & Await

03:01

More Tutorials

00:18

Đá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

Cấu trúc dữ liệu và giải thuật Thực chiến với LeetCode

Cấu trúc dữ liệu và giải thuật Thực chiến với LeetCode

Flutter and Nodejs Course | Job App With Chatting

Flutter and Nodejs Course | Job App With Chatting

MATLAB/SIMULINK Bible | Go From Zero to Hero + ChatGPT!

MATLAB/SIMULINK Bible | Go From Zero to Hero + ChatGPT!

[NEW] Building Microservices with Spring Boot & Spring Cloud

[NEW] Building Microservices with Spring Boot & Spring Cloud

Full Stack: React and Java Spring Boot - The Developer Guide

Full Stack: React and Java Spring Boot - The Developer Guide

[NEW] Full-Stack Java Development with Spring Boot 3 & React

[NEW] Full-Stack Java Development with Spring Boot 3 & React

Laravel 10 Build Complete Learning Management System LMS A-Z

Laravel 10 Build Complete Learning Management System LMS A-Z

Practical AutoLISP Programming - Beginner to Advanced

Practical AutoLISP Programming - Beginner to Advanced

Learn to build an e-commerce store with .Net, React & Redux

Learn to build an e-commerce store with .Net, React & Redux

RESTful Web API - The Complete Guide (.NET7 API) Part 2

RESTful Web API - The Complete Guide (.NET7 API) Part 2

RESTful Web API - The Complete Guide (.NET7 API) Part 1

RESTful Web API - The Complete Guide (.NET7 API) Part 1

Clean Code

NestJS Zero to Hero - Modern TypeScript Back-end Development

NestJS Zero to Hero - Modern TypeScript Back-end Development

Working with Vue 3 and Go (Golang)

Working with Vue 3 and Go (Golang)

Apache Kafka Series - Kafka Connect Hands-on Learning

Apache Kafka Series - Kafka Connect Hands-on Learning

JDBC Servlets and JSP - Java Web Development Fundamentals

JDBC Servlets and JSP - Java Web Development Fundamentals

Đă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