React.js Academy for Beginners with Firebase

Video description

Learn React by building a Trello-inspired application with a real-time database and authentication!

About This Video

Learn React using a hands-on, project-based approach by building a feature-rich app from scratch
Get to grips with Firebase and create a real-time database with authentication
Expand your core JavaScript and development knowledge using one of the most popular technologies in the industry

In Detail

React is one of the most …

React.js Academy for Beginners with Firebase

Video description

Learn React by building a Trello-inspired application with a real-time database and authentication!

About This Video

Learn React using a hands-on, project-based approach by building a feature-rich app from scratch
Get to grips with Firebase and create a real-time database with authentication
Expand your core JavaScript and development knowledge using one of the most popular technologies in the industry

In Detail

React is one of the most popular and in-demand technologies in modern web development. Using a component-based approach, React allows you to build interactive user interfaces using JavaScript.

This course is designed to teach you everything you need to know to build modern applications using React.

You’ll learn to build a Trello-inspired project that will enable you to take advantage of React's features:

Scaffolding projects using the Create React app
React file and folder structures and what they do
What components are and how to use them
Writing JSX
Class-based and function components
Managing state
Looping through data
Using props to pass data and methods to components

You won't stop there! Even though React handles the user interface for us, most apps also need a backend. You’ll use Firebase to provide a real-time database for your project. This will help you not only to store your data, but also to be subscribed to any database changes as they happen. You’ll learn how to do the following:

Set up a Firestore database
Push and read data from our database
Update and delete data
Sort and filter data
Work with real-time data using onSnapshot

This course will guide you in using Firebase to handle authentication. Users can sign up and log in and out, allowing them to have their own personal boards that only they can see and edit. You’ll also take advantage of React's Context API to pass the user's auth state throughout your application and handle conditional rendering. To round things off, you’ll look at how to build your project for production and then deploy it for the world to see!

Publisher resources

Download Example Code

Chapter 1 : Welcome and let’s get started!

Welcome to the course 00:02:40

What we will be building 00:03:56

What you will need for this course 00:02:08

Chapter 2 : Project setup & Components

Create React App 00:04:14

Project files & folders 00:11:36

A closer look at components 00:03:29

Components in action 00:11:48

Chapter 3 : Props, State & Looping

First look at state and JSX 00:11:10

Component lifecycle and looping 00:05:35

Passing data as props 00:15:03

Passing methods as props 00:16:00

Prop type validation 00:10:00

Chapter 4 : Forms, inputs and refs

Controlled components 00:15:52

Uncontrolled components and refs 00:09:33

Create new card form 00:06:22

Chapter 5 : Routing

Setting up React router 00:08:34

Passing props to a router component 00:03:37

URL parameters 00:06:45

Using with Router and push 00:07:36

Passing state via router 00:05:11

Chapter 6 : Setting up Firebase, reading & deleting data

Setting up Firebase 00:10:23

Pushing data to Firebase 00:14:22

Reading data from Firebase 00:15:28

The where & orderBy methods 00:17:30

Deleting cards and lists from Firebase 00:08:41

Deleting boards 00:14:39

Chapter 7 : Updating data and Modals

Updating data in Firebase 00:09:41

Edit card modal 00:13:38

Updating the card text 00:09:05

Setting the labels 00:08:07

Text area auto resize 00:05:58

Chapter 8 : Reading realtime data from Firebase

First look at onSnapshot 00:06:34

Working with document changes 00:03:51

Realtime cards with updates 00:07:08

Chapter 9 : User authentication and React context

React Context API 00:12:22

Firebase Authentication and set up 00:06:36

User sign up 00:05:06

Logging in and out 00:08:56

Listening for auth changes 00:03:31

Conditional rendering 00:14:08

Rendering boards based on user 00:05:02

Redirecting and error messages 00:11:31

Roles & permissions 00:10:27

Chapter 10 : Deployment

Building for production 00:03:03

Deploying to Netlify 00:04:49

Chapter 11 : Thank You

Thank you 00:01:35

Start your Free Trial

Self paced

Go to the Course
We have partnered with providers to bring you collection of courses, When you buy through links on our site, we may earn an affiliate commission from provider.