Development
Web Development
React
Build an app with React, Redux and Firestore from scratch
4.6 (1,165 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,459 students enrolled

Build an app with React, Redux and Firestore from scratch

Learn how to build a web app with React, Redux and Firestore from beginning to publishing
4.6 (1,165 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,459 students enrolled
Created by Neil Cummings
Last updated 7/2020
English
English [Auto]
Preview this course
Build an app with React, Redux and Firestore from scratch
Current price: $132.99 Original price: $189.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 52 hours on-demand video
  • 8 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 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
Course content
Expand all 477 lectures 51:59:26
+ – React concepts
6 lectures 27:10
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 01:14:02
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 51:01
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 58:14
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 01:23:04
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 01:51:30
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 01:11:51
Introduction
07:14
Getting the Google API keys
07:06
Setting up places autocomplete
08:27
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 51:18
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
05:39
Summary of section 9
03:57
+ – Introduction to Firestore
16 lectures 01:51:37
Introduction
06:49
Setting up Firestore
06:28
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
Requirements
  • 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
Description

*** Re-recorded, rewritten and fully up to date as at  July 2020***

*** Please note that this is a 23 hour course (not 50) as there is still 28 hours of legacy content included in the total hours ***

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 Formik 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/intermediate 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.

Who this course is for:
  • Beginner developers who have familiarity with HTML, CSS and JS who want to learn about React and Redux
  • Beginner developers who want to learn about Firestore, Google's new database service
Featured review
Carlos Agustin Danna
Carlos Agustin Danna ( 100 courses, 13 reviews )
a year ago
First I want to say thanks to Neil, The course is great and it helped me lay down the basics of an application I want to build. This course is clearly for someone who coded before and knows the problems you face while building a real world application. I would not have recommended this to a complete beginner, apart from that the course was good with enough details to learn new things but not enough to overwhelm or bored the student. Again thank you Neil for the great course.