Danh mục
Development
Web Development Data Storage Git Automation Database Design Web Scraping
Business
Business Analysis Communication Project Management Sales Forecasting Business Strategy Operations Management Human Resources Oil and Gas Industry
Finance & Accounting
IT & Software
Office Productivity
SAP Word Excel PowerPoint Excel VBA SharePoint
Personal Development
Persuasion Notion Workspace Mind Mapping
Design
Design Sketching Typography Game Design Digital Art zBrush 3D Animation
Marketing
SEO Marketing Strategy YouTube Marketing Digital Marketing Facebook Marketing Growth Hacking Twitter Marketing Instagram Marketing
Lifestyle
Beer Brewing Beauty Home Repair Energy Healing Bartending Leather Crafting Makeup Artistry Hypnotherapy
Music
Piano Guitar Singing Music Production Acoustic Guitar Fingerstyle Guitar Music Theory Bass Guitar
Duocmmo Tedu Tin học văn phòng Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
React JS
Build an app with React, Redux and Firestore from scratch

Build an app with React, Redux and Firestore from scratch

Loại khoá học: Web Development

Learn how to build a web app with React, Redux and Firestore from beginning to publishing

image
50.000 VND
2.199.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

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

* Re-recorded, rewritten and fully up to date as at  September 2023*

This course has been completely rewritten and re-recorded from scratch using the tools and techniques available to us to build an application as at September 2023.   Please note that this is a 23 hour course (not 46 hours) as both the new version of the course and the previous (legacy) version of the course are available at this time.

Do you want to learn React and Redux in the context of building a complete application?   Do you want to learn about Firestore, the new Database offering from Google that provides 'live data' to our application?  Are you the type of learner who gets most out of actually building an application rather than watching endless slides about how something is supposed to work?  If so then this course is for you!

In this course we build a complete application from start to finish. 

Every line of code is demonstrated and explained.  We warm up by building a CRUD application in React, we then enhance it by adding Redux and following that we add in Firestore to provide the persistence layer for the application.

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

  • Setting up the developer environment

  • Creating a React application using the create-react-app utility from Facebook

  • Login and Register functionality using Firebase authentication

  • Adding social login for Facebook and Google into the application

  • Google maps and Places autocomplete integration

  • Photo uploading using drag and drop, with resizing and cropping of the images before upload

  • Adding a live chat system

  • Paging, Sorting and Filtering with Firestore

  • Infinite scroll for the pagination

  • Firestore database design

  • Creating reusable form components with React hook forms

  • Building a great looking application with Semantic UI

  • Many more things as well

Tools you need for this course

In this course all lessons are demonstrated using Visual Studio Code, a free (and really good) cross platform code editor.  You can of course use your preferred IDE or Code editor of choice and any operating system you like... well as long as it's either Max OSX, Windows or Linux.

Is this course for you?

This course is extremely practical.  About 90% of our time is spent actually building the application.  If you are the type of person who gets the most out of learning 'by doing', then this course will be for you.

Please note that we do not start from zero coding knowledge.   Whilst this is aimed at beginner level, you will need to have some basic javascript knowledge (not a lot is needed) or if you are coming from another programming language then you should be fine with this course.  It's designed to take you from beginner level to having the skills to build a much more significant application.

What do we do on this course

We are building a social events application, much like Facebook events or Meetup.   Building a social application gives us opportunity to build more than just a simple CRUD application.

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

Students will be able to create an application using React, Redux and Firestore by the end of this course.

Students will improve their javascript skills by taking this course

Yêu cầu

  • Students should be familiar with HTML, CSS and Javascript
  • A computer with either Windows, Mac OSX or Linux is required
  • We will make use of (free) Google services so a Google account is necessary

Nội dung khoá học

38 sections

Course introduction and getting started

7 lectures
Introduction
06:31
Setting up the project
08:17
Setting up the developer environment
04:15
Reviewing the project files
10:37
Folder structure
05:01
Souce control
09:21
Where to get course assets and source code
05:02

React concepts

6 lectures
Introduction to section 2
02:28
Why React?
04:07
React concepts
05:09
Intro to JSX
04:54
React dev tools
04:16
Decisions made on this course
07:05

React basics

12 lectures
Introduction to section 3
02:16
Breaking up the UI into components
04:09
Semantic UI introduction
08:47
Building our first component
07:11
Creating a nav bar
10:13
Creating event list items
08:40
Creating an event form
03:31
Passing down props to components
13:16
Using types with Typescript
09:06
React component state
10:11
The useEffect hook
06:33
Summary
02:21

CRUD operations in React

8 lectures
Introduction to section 4
03:19
Basic forms in react
11:21
Creating an event
10:22
Selecting events
07:36
Controlled components with keys
08:17
Updating events
06:19
Deleting events
04:33
Summary
01:40

React Router

11 lectures
Introduction to section 5
02:33
Adding some components to route to
02:33
Configuring the router
06:37
Cleaning up the app
06:07
Adding nav links and links
07:36
Styling the home page
06:53
Adding menus for the signed in user
06:24
Faking authentication
06:02
Event detailed page layout
04:55
Event detailed page content
10:10
Summary
01:35

Redux

11 lectures
Introduction to section 6
09:02
React and Redux
02:14
Setting up Redux
08:22
Creating a scratch component
05:11
Redux actions
04:51
Redux dev tools
03:44
Creating an event slice
04:00
Creating the event actions
04:53
Using the store to select a single event
07:16
Dispatching the create/update actions
08:28
Summary
03:36

React hook form

12 lectures
Introduction to section 7
03:03
Setting up React hook form
07:51
Adding validation
07:14
Cleaning up the form
03:06
The select input
11:13
Adding a datepicker
08:45
Re-enabling update and submit
05:52
Adding modals part 1
10:51
Adding modals part 2
03:49
Adding a login form
11:10
Adding an auth slice
08:02
Summary
02:07

Firestore

18 lectures
Introduction to section 8
06:49
Setting up Firebase Firestore
11:26
Setting up linting in our app
05:17
Adding data to firestore
12:04
Listening to the data
09:06
Shaping the firestore data
05:38
Adding loading indicators
04:40
Adding the create/update function to Firestore
10:24
Adding a toast library to show notifications
06:28
Getting an individual document
09:32
Deleting data from Firestore
06:36
Creating a generic redux slice
14:06
Creating a Firestore hook
14:45
Using the hook to get a single document
05:30
Updating the event form
07:06
Adding the Create/Update/Delete functions to the hook
08:19
Cancelling events
09:09
Summary
03:28

Firebase authentication

14 lectures
Introduction to section 9
02:31
Logging in
07:50
Shaping the data from Firestore
07:35
Persisting the authentication
09:53
Registering new users
07:28
Handling authentication errors
05:34
Storing profile data in a collection
06:34
Adding social login functionality
04:47
Adding a social login component
03:01
Social login actions
13:36
Adding an account page
11:54
Custom validation for the inputs
06:22
Adding the password change function
07:23
Summary
03:19

User profiles

14 lectures
Introduction to section 10
03:39
Adding a profile page
07:45
Adding the profile content
03:35
Creating a profile slice
07:13
Connecting the profile page to Firestore
04:54
Adding an about component
07:34
Adding a profile form
10:46
Adding a photos page
07:22
Adding photo upload
10:47
Handling the photo upload to Firebase storage
17:04
Listening to the photos collection
07:43
Setting the main photo
03:46
Deleting an image
04:51
Summary
02:11

Firestore relationships

14 lectures
Introduction to section 11
01:51
Firestore database design
11:08
Adding the attendence to events
10:18
Configuring the event detailed header
05:52
Adding the toggle attendence feature
07:09
Updating the sidebar
05:59
Adding a filter component
07:26
Updating the useFirestore hook
11:45
Adding the event filters
11:50
Resolving the filter issue
08:15
Adding the user profile events
06:58
Adding the events query for profiles
11:35
Making the filters sticky
07:03
Summary
03:07

Adding the chat feature

10 lectures
Introduction to section 12
01:34
Adding Firebase to the project
04:59
Adding a chat form
08:10
Posting the comment to Firebase
07:10
Listening to chat comments
07:41
Formatting the dates
05:47
Adding the reply function
07:04
Formatting the comments into a tree structure
09:47
Adding scroll to the chat
05:17
Summary
01:51

Adding a followers/following feature

10 lectures
Introduction to section 13
01:37
Setting up the follow feature
14:22
Listening to followers
02:23
Adding the profile components
11:19
Updating the following buttons
11:58
Batching updates in Firestore
11:23
Intro to security rules
13:12
Resolving the issue
10:20
Fixing the security rules and the rules simulator
11:32
Summary
01:42

Pagination in Firestore

9 lectures
Introduction to section 14
10:37
Implementing pagination part 1
08:04
Implementing pagination part 2
09:04
Implementing pagination part 3
09:09
Getting the data
11:20
Adding infinite scroll
06:03
Dealing with duplicate data
16:39
Challenge solution
14:01
Summary
01:37

Securing and publishing the app

14 lectures
Introduction to section 15
04:12
Anonymous access to the app
03:11
Creating an unauth component
05:01
Creating private routes
09:47
Updating the header and chat
04:36
Firestore security rules part 1
08:30
Firestore security rules part 2
11:09
Fixing the filters for anonymous users
05:29
Enabling App Check
12:41
Restricting the API Key
05:10
Publishing the app
07:46
Continuous integration
08:41
Adding a Pull request to test the preview URL
10:33
End of course summary
04:32

Appendix A - Google maps

11 lectures
Introduction to Appendix A
07:00
Enabling the maps APIs
08:02
Setting up Places Autocomplete
05:03
Using Places Autocomplete
07:59
Creating a place input
11:02
Creating a place input part 2
06:54
Narrowing down the place search results
12:15
Adding Google maps
04:34
Challenge solution
02:34
Adding maps to the event page
05:41
Deploying the changes to our app
03:22

Appendix B - Cloud functions

8 lectures
Introduction to Appendix B
04:20
Setting up cloud functions
10:59
Creating our own functions
10:44
Creating our own functions part 2
10:18
Creating our own functions part 3
08:15
Listening to the news feed
13:16
Listening to the news feed part 2
06:26
Publishing the changes to our production app
05:11

Legacy content - Where to get the previous version of this course

1 lectures
Where to access legacy content
01:19

Course introduction and getting started

8 lectures
Introduction
06:25
Setting up the project
06:21
Setting up the developer environment
10:58
React project contents
09:18
Hot Module Replacement
03:29
Folder structure
06:27
Source control
06:56
Course assets and source code
01:39

React concepts

6 lectures
Introduction
02:28
Why React
04:07
React concepts
05:09
Intro to JSX
04:15
React Dev tools
04:16
Decisions made on this course
06:55

Thinking in React

11 lectures
Introduction
02:17
Breaking up the UI into components
04:09
Intro to Semantic UI
12:00
Building our first component
03:51
Exports and imports
04:39
Navigation bar and styling
11:24
Event List Items
07:49
Creating an Event Form
04:08
Passing props down to child components
09:30
React component state
11:54
Summary of section 3
02:21

CRUD Operations in React

9 lectures
Introduction
03:19
Basic forms in React
11:08
Creating an event
07:22
Selecting an event to read
07:09
Controlled components with a key
05:58
Updating an event
05:30
Deleting an event
02:41
React class components
06:14
Summary of section 4
01:40

Routing in React

12 lectures
Introduction
04:20
Adding some additional components to route to
01:53
Routing configuration
06:13
Using NavLinks and Links
04:03
Home page styling
07:19
Adding menus for authenticated and unauthenticated users
05:24
Adding fake authentication
03:45
Using the useHistory hook
03:28
Event Detailed Page structure
05:33
Event Detailed Page content
07:34
Cleaning up the unused code
06:10
Summary of section 5
02:32

Introduction to Redux

14 lectures
Introduction
08:31
React-Redux
02:44
Setting up Redux
06:38
Adding a sandbox area for experimenting with the code
03:33
Redux Actions
06:07
Action Creators
03:34
Redux Dev Tools
04:35
Creating the event reducer
08:22
RRF 6-9 Creating a root reducer
03:31
Getting events from the redux store
10:31
Dispatching event actions
08:56
Clean up
06:37
Scroll to top
05:49
Summary of section 6
03:36

Forms revisited

17 lectures
Introduction
02:50
Setting up Formik
10:12
Formik with less code
05:07
Form validation
05:38
Creating a reusable text input
06:27
Cleaning up the form
04:40
Creating a reusable text area
02:06
Creating a reusable select input
07:39
Creating a reusable date input
10:17
Date-FNS
07:49
Formik props
05:05
Modals
09:41
Adding a Modal Manager
09:43
Creating the sign up form
08:46
Adding an auth reducer
05:13
Hooking up the sign up form
08:10
Summary of section 7
02:07

Google maps integration

10 lectures
Introduction
07:14
Getting the Google API keys
07:06
Setting up places autocomplete
09:26
Creating a custom place input
12:38
Using the place input
09:36
Narrowing the place input search results
05:56
Google maps react
06:03
Challenge solution
05:16
Adding the map to the Event Detailed Page
07:16
Summary of section 8
02:19

Asynchronous code

10 lectures
Introduction
04:44
Redux Thunk 101
06:36
Redux Thunk 102
07:47
Isolating the loading indicators
03:20
Adding toast notifications
04:51
Adding a mock API
07:09
Adding a loading component
03:16
Using placeholders to improve the UI
03:59
Adding an event filters component
06:03
Summary of section 9
03:57

Introduction to Firestore

16 lectures
Introduction
06:49
Setting up Firestore
09:26
Firestore document fields
11:55
Listening to Firestore data
06:56
Shaping the Firestore data
09:29
Restoring the loading indicator
03:31
Creating a custom hook
09:03
Adding a useFirestoreDoc hook
11:00
Handling not found documents
05:49
Adding an error component
05:01
Creating and updating events in Firestore
10:35
Creating and updating events in Firestore part 2
05:26
Deleting an event
03:45
Cancelling an event function
05:42
Adding a confirmation prompt
06:41
Summary of section 10
03:27

Authentication

16 lectures
Introduction
02:12
Logging in
06:51
Persisting the login
09:18
Signing out the user
04:00
Registering new users
07:01
Handling auth errors
06:20
Setting user profile data
05:01
Creating a social login component
03:46
Facebook login
06:16
Adding the facebook login method
11:19
Adding Google login
01:57
Adding an account page
09:10
Adding additional user info into the auth reducer
07:51
Adding a password change function
06:26
App initialization
08:12
Summary of section 11
03:19

User profiles

11 lectures
Introduction
01:07
Adding a profile page
07:47
Adding the profile content
03:11
Creating the redux actions
03:43
Connecting the profile page to the store
07:44
Adding an about page
06:03
Adding the profile form
06:19
Adding the update user actions
05:52
Initializing the app with the current user profile
05:43
Selecting other user profiles
05:31
Summary of section 12
01:34

Image upload

11 lectures
Introduction
02:44
Adding a profile photos page
04:27
Adding a photo upload widget
03:52
React dropzone
09:19
React cropper
12:12
Adding an upload image method
07:16
Using the upload method in the widget
12:59
Displaying the images
06:00
Setting the main photo
06:01
Deleting a photo
08:47
Summary of section 13
03:04

Firestore relationships

13 lectures
Introduction
01:53
Firestore Database design
11:08
Adding attendances to an event
05:29
Setting up the event detailed header
08:56
Adding the join event handler
03:42
Cancelling a user attendance
05:20
Adding the user nav links
05:05
Adding the filter functionality
08:16
Getting the filtered data
10:40
Adding the user event filters
06:59
Adding the user event query
03:40
Adding profile actions for user events
11:39
Summary of section 14
03:07

Adding chat with Firebase

10 lectures
Introduction
01:34
Setting up firebase
03:48
Setting up the chat form
06:56
Listening to the chat data
12:20
Displaying the comments
05:00
Improving the chat UI
07:43
Clearing the chat comments
04:47
Adding the reply functionality
09:07
Displaying the replies
10:17
Summary of section 15
01:52

Adding a following / followers feature

20 lectures
Introduction
01:51
Adding the firestore functions
08:12
Unfollow a user
04:07
Listening to the following data
03:17
Adding the following components
04:21
Listening to the followers data
09:18
Updating the following count
07:33
Updating the following user status
07:32
Clearing the followings
03:37
Firestore batches
09:22
Firestore batches part 2
08:13
Cloud functions introduction
04:28
Setting up cloud functions
07:22
Creating our own cloud functions
12:08
Firebase functions logs
05:37
Creating a personalized news feed
06:01
Adding functions for the feed
11:56
Listening to the news feed
09:16
Displaying the news feed events
09:50
Summary of section 16
03:39

Pagination and data consistency

10 lectures
Introduction
10:38
Implementing pagination
12:38
Improving the paging UI
04:08
Infinite scroll
04:57
Fixing the event detailed page
07:19
Fixing the event filters
06:09
Dealing with duplicate data
03:34
Implementing data consistency
11:04
Updating security rules
04:45
Summary of section 17
01:37

Securing the application

10 lectures
Introduction
02:12
Checking anonymous access
05:25
Creating a modal to prompt login
05:53
Creating a private route
04:50
Connecting the router to the store
08:06
Redirecting the user with connected router
03:22
Showing the modal on click
07:02
More on Firestore security rules
09:12
Restricting API Key usage
15:07
Summary of section 18
01:45

Optimizing and publishing the app

9 lectures
Introduction
02:33
Optimizing the events
09:26
Optimizing the events part 2
08:03
Optimizing the profiles
04:55
Building the application
04:47
Service worker
03:19
Publishing our app to Firebase
06:48
Resolving issues with the app and redeploying
12:01
End of course summary
02:38

Update Oct 2021 - React 17 & Firebase v9

2 lectures
Updating the Node Module packages to latest versions
14:02
Updating the Firestore and Firebase methods with the new modular imports
20:00

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

Khoá học liên quan

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

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

105 VND
50.000 VND
Shopify Theme Development: Create Shopify Themes [2023]

Shopify Theme Development: Create Shopify Themes [2023]

649.000 VND
50.000 VND
100 Days of Code: The Complete Python Pro Bootcamp

100 Days of Code: The Complete Python Pro Bootcamp

170 VND
50.000 VND
Master NestJS a Node.js Framework 2024

Master NestJS a Node.js Framework 2024

1.399.000 VND
50.000 VND
Spring Framework 5: Beginner to Guru

Spring Framework 5: Beginner to Guru

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

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

95 VND
50.000 VND
The Git & Github Bootcamp

The Git & Github Bootcamp

120 VND
50.000 VND
Clean Code

Clean Code

170 VND
50.000 VND
The Complete Oracle SQL Bootcamp (2024)

The Complete Oracle SQL Bootcamp (2024)

120 VND
50.000 VND
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)

185 VND
50.000 VND
Framework Python với Selenium 3.x

Framework Python với Selenium 3.x

1.099.000 VND
50.000 VND
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

65 VND
50.000 VND
The Complete Java Development Bootcamp

The Complete Java Development Bootcamp

125 VND
50.000 VND
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)

25 VND
50.000 VND
The Complete 2024 Web Development Bootcamp

The Complete 2024 Web Development Bootcamp

185 VND
50.000 VND
Build a Backend REST API with Python & Django - Advanced

Build a Backend REST API with Python & Django - Advanced

120 VND
50.000 VND
image

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