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

Table of Contents

  1. Chapter 1 : Welcome and let's get started!
    1. Welcome to the course 00:02:40
    2. What we will be building 00:03:56
    3. What you will need for this course 00:02:08
  2. Chapter 2 : Project setup & Components
    1. Create React App 00:04:14
    2. Project files & folders 00:11:36
    3. A closer look at components 00:03:29
    4. Components in action 00:11:48
  3. Chapter 3 : Props, State & Looping
    1. First look at state and JSX 00:11:10
    2. Component lifecycle and looping 00:05:35
    3. Passing data as props 00:15:03
    4. Passing methods as props 00:16:00
    5. Prop type validation 00:10:00
  4. Chapter 4 : Forms, inputs and refs
    1. Controlled components 00:15:52
    2. Uncontrolled components and refs 00:09:33
    3. Create new card form 00:06:22
  5. Chapter 5 : Routing
    1. Setting up React router 00:08:34
    2. Passing props to a router component 00:03:37
    3. URL parameters 00:06:45
    4. Using with Router and push 00:07:36
    5. Passing state via router 00:05:11
  6. Chapter 6 : Setting up Firebase, reading & deleting data
    1. Setting up Firebase 00:10:23
    2. Pushing data to Firebase 00:14:22
    3. Reading data from Firebase 00:15:28
    4. The where & orderBy methods 00:17:30
    5. Deleting cards and lists from Firebase 00:08:41
    6. Deleting boards 00:14:39
  7. Chapter 7 : Updating data and Modals
    1. Updating data in Firebase 00:09:41
    2. Edit card modal 00:13:38
    3. Updating the card text 00:09:05
    4. Setting the labels 00:08:07
    5. Text area auto resize 00:05:58
  8. Chapter 8 : Reading realtime data from Firebase
    1. First look at onSnapshot 00:06:34
    2. Working with document changes 00:03:51
    3. Realtime cards with updates 00:07:08
  9. Chapter 9 : User authentication and React context
    1. React Context API 00:12:22
    2. Firebase Authentication and set up 00:06:36
    3. User sign up 00:05:06
    4. Logging in and out 00:08:56
    5. Listening for auth changes 00:03:31
    6. Conditional rendering 00:14:08
    7. Rendering boards based on user 00:05:02
    8. Redirecting and error messages 00:11:31
    9. Roles & permissions 00:10:27
  10. Chapter 10 : Deployment
    1. Building for production 00:03:03
    2. Deploying to Netlify 00:04:49
  11. Chapter 11 : Thank You
    1. Thank you 00:01:35

Product Information

  • Title: React.js Academy for Beginners with Firebase
  • Author(s): Chris Dixon
  • Release date: October 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781839216251