Build an app with React, Redux and Firestore from scratch

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

6,062 students enrolled

Created by Neil Cummings

Last updated 6/2019

English

English [Auto-generated]

Preview this course

Build an app with React, Redux and Firestore from scratch

$132.99 $189.99 30% off

5 hours left at this price!

30-Day Money-Back Guarantee

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

Setting up the project

Preview 09:43

Visual Studio Code Extensions

Preview 07:37

Course Snippets

Preview 03:37

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

Controlled Forms

Preview 14:57

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

18 more sections

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

Featured review

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.