Build an app with React, Redux and Firestore from scratch
4.6 (1,105 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,062 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,105 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,062 students enrolled
Created by Neil Cummings
Last updated 6/2019
English
English [Auto-generated]
Current price: $132.99 Original price: $189.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 29 hours on-demand video
  • 2 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 253 lectures 28:45:28
+ Course introduction and getting started
11 lectures 01:09:48

Introducton to the course, what we are building, pre-requisites and is this course for you.

Preview 08:40

Exercise files are attached to this lesson

Preview 01:42
Reviewing the React project contents and startup
09:20
Hot Module Replacement
03:17
Folder Structure
10:11
Versions
05:38
Source control
05:12
Section 1 summary
04:51
+ React Concepts
6 lectures 20:54
Introduction
02:35
Why React?
04:05
React Concepts
03:26
Introduction to JSX
03:01
React Developer tools
01:58
Decisions decisions...
05:49
+ Thinking in React
12 lectures 01:24:27
Introduction
02:15
Breaking up the UI into a component hierarchy
06:31
Semantic UI Introduction
10:42
Building our first component
06:19
Adding the Navigation bar and styling
11:32
Adding the event list items component
08:55
Adding the Event Form
05:14
Passing down static props to components
10:28
Identifying state
03:53
Adding state to our application
06:02
Inverse data flow
08:45
Summary of section 3
03:51
+ Forms 101
5 lectures 37:11
Introduction
02:37
Uncontrolled Forms
04:30
Submitting form data
10:54
Summary of section 4
04:13
+ Creating a CRUD application in React
7 lectures 35:58
Introduction
01:02
Selecting event to open
10:20
React lifecycle method - componentDidMount
05:43
React Lifecycle method - Alternative to componentWillReceiveProps
05:56
Updating the events
05:27
Deleting the events
05:09
Summary of section 5
02:21
+ React Router 5
8 lectures 01:01:59
Introduction
06:58
Stateless functional components
06:53
Routing configuration
13:18
Adding a home page
06:48
Adding Signed in and Signed out menus to the nav bar
09:13
Using the withRouter Higher Order Component
02:59
Internal navigation for our application
11:54
Summary of section 6
03:56
+ Introduction to Redux
10 lectures 59:39
Introduction
05:54
React Redux
05:00
Creating a test area to practice concepts
02:56
Redux store configuration
09:22
Connecting the store to our application
05:01
Creating our first actions
10:35
Creating a root reducer
03:07
Improving the dev experience
05:12
Reducing boilerplate code
08:19
Summary of section 7
04:13
+ Converting our app to use Redux
14 lectures 01:30:37
Introduction
01:58
Creating actions for Events
03:52
Creating the Event reducer
07:03
Connecting the event dashboard to the store
02:40
Connecting the event actions to the event dashboard
06:24
Creating the event detailed page structure
09:46
Adding the Event detailed page header component
05:17
Adding the Event detailed page info, sidebar and chat
05:42
Adding static data for the event detailed page
07:40
Connecting the event detailed page to the store
04:52
Fixing the scroll issue on routing to a new page
05:53
Connecting the event form to the store
17:14
Connecting the event actions to the event form
09:13
Summary of section 8
03:03
+ Redux forms 101
12 lectures 01:22:17
Redux Forms introduction
04:50
Redux forms setup
08:41
Creating a reusable Text input field
06:50
Event form changes and cleanup
05:12
Creating a reusable Text area input field
02:53
Creating a reusable Select input field
07:16
Form submission in Redux forms
10:32
Introduction to Revalidate
04:13
Setting up validation for the event form
07:34
Creating a reusable Date input field
11:51
Hooking up the Date input to the event form
10:43
Summary of section 9
01:42
+ Adding Google maps integration into our application
9 lectures 01:17:28
Introduction
02:21
Getting our Google API Keys
08:47
Setting up Places Autocomplete
06:09
Creating a reusable Place Input field
12:33
Narrowing the venue results to the selected city
16:11
Setting up Google Maps + Google Maps Challenge
09:06
Google maps challenge solution
08:06
Adding a Map component to our application
13:01
Summary of section 10
01:14
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 and fully up to date as at June 2019***

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