Chat App with React and Firebase

Real Time Data with React8 H 30 M

Just you? Training a whole team? There's an ITProTV plan that fits.

Start Training Today
  • Chat App with React and Firebase
    • Overview
    • Setting Up a React App
    • Building the Signup Component
    • Building the Login Component
    • Setting Up Firebase
    • Signing Up with Firebase
    • Logging In with Firebase
    • Adding Some Style
    • Adding Some Style Part 2
    • Building the Sidebar Component
    • Building the RoomList Component
    • Building the RoomList Component Part 2
    • Building the RoomList Component Part 3
    • Persisting the Login
    • Building the Chat Panel
    • Building the Chat Panel Part 2
    • Building the Chat Panel Part 3
    • Toggling the Startup and Login Components
    • Add a Room
    • Add a Room Part 2
    • Add a Room Part 3
    • Deploying to Firebase


3 M

itprotv course thumbnailitprotv course thumbnailitprotv course thumbnail
  • Episode Description
  • Transcript

React and Firebase are two technologies that are becoming more and more mainstream. You may have heard of both, but how do the pieces fit together? Join us in this series as we take React and build a chat application that leverages Firebase for all of the backend services. You will discover building React components, using Firebase observers to sync data to your front-end application, the difference between Stateful and Stateless Functional Components, and much more. If you are looking to level up your understanding of React and Firebase, then we will see you there!

[SOUND] [MUSIC] Hello and thank you for joining us with this overview of Chat App with React and Firebase. And Justin Dennison is gonna be giving us all the information we need. Justin tell us about Chat App with React and Firebase. What is that? >> So ultimately I wanted to build something that brought together some of these new elements, but maybe some old elements that helped people understand how does everything come together. So ultimately our goal is to build a React application that simulates a chat application with rooms, and messages, and users, but instead of building our own authentication back end or having a different hosting service. I decided to go with Firebase, which is a product from Google that allows authentication, database, real-time database actually. It will tell you when things have changed, and you can put those out to all of the current users as well as a hosting service for your particular project. So it's kind of a backend as a service, as it will. Now our ultimate goal is to take that chat application and slowly weave in Firebase as we go along and this is a more traditional one using Create React App just building a straight one, no state management nothing like that. And then coming back deploying to Firebase and seeing how it all comes to fruition. >> Now who's this show targeted towards? >> So this show is someone who has definitely had at least a little bit of interaction with React. You don't have to be an expert, but you should know a fair amount of JavaScript, you need to know about node and MPM. You should already have a text editor set up. This is someone who has dabbled in web development, but wants to know a little more about these advanced features that come along with the Firebase platform. And they just really wanna level up so if you're brand new to HTML, CSS and JavaScript there maybe a fair amount of concepts where you're like I'm just having trouble. So definitely go check out some other things come back after that and hopefully you'll see how all of this comes together. >> Now Justin is there a certification available for this. >> So, these course are typically not certification driven. These are more of a I want to power up. I want to learn more. I want to see how these, these nuanced things come together to build a full fledged application. And that's my ultimate goal here is not driven by certification but it is something that essentially you gain knowledge that you wouldn't necessarily see in other contexts. So yeah, no certification, but a lot of information in order to be had in this course. >> And well worth your time to watch it. And what topics are covered in this show? >> So we're gonna Firebase, React, Create React App Build tools, how to manage your build server, how to design components, how to nest components. And as well as deployment and using the realtime database and authentication services within Firebase. >> Thank you, Justin. So make sure you watch every single episode of Chat app with reactive Firebase. You'll be glad you did. And thank you for watching DevProTV. [MUSIC]

Start training today

Just you? Check out our personal plans


$529 per seat/per year


Total seats


$349 per seat/per year


Total seats

Credit card required

This is for your account.
This is for your account.
We will contact you with this phone number about your trial.
We will contact you with this email about your trial.
What is the name of your company?
In which country is your company located?

Step 1 of 2

Get a demo or a start a team trial