How to use React with Firebase and Redux

Learn how to work with a React Web Template by creating a functional authentication using Redux and Firebase.
Rating: 3.9 out of 5 (127 ratings)
9,278 students
How to use React with Firebase and Redux
Rating: 3.9 out of 5 (127 ratings)
9,283 students
Usage of a React Web Template
Usage of a Reactstrap Web Template
Routing for Authentication
Add Redux to a React project
Create Redux Store
Create Redux Actions
Create Redux Reducers
Create a Firebase account
Create a Firebase project
Add Firebase to a React and Redux project
Connect Redux Actions with Firebase
Make Authentication with Firebase
Insert in Firebase Realtime Database

Requirements

  • Beginner level of React
  • Beginner level of Redux
Description

Hello guys, our colleague who is the Head of the ReactJs Department at Creative Tim has created this nice tutorial. In this tutorial, he is showing you guys how to work with React, Firebase and Redux. You'll learn how to make functional login and register pages, and also how to make inserts in the Firebase database.

Who this course is for:
  • Beginner level of React that want to create a functional React app
  • Beginner level of Redux that want to create a functional Redux app
  • Beginner level of React or Redux that want to create a functional React app
  • Beginner level of React or Redux that want to create a functional Redux app
  • Beginner level of React and Redux that want to create a functional React app
  • Beginner level of React and Redux that want to create a functional Redux app
  • Beginner level of React that want to see how a React app should be integrated with Firebase
  • Beginner level of Redux that want to see how a Redux app should be integrated with Firebase
Course content
7 sections • 22 lectures • 37m total length
  • Introduction
    00:34
  • Getting started with a React Design System
    01:13
  • Adding Redux with Actions, Reducers and Store to this starter template
    01:48
  • Create the addStatCardAction
    02:16
  • Create the getAllStatCardsAction
    00:54
  • Create the loginAction
    00:49
  • Create the registerAction
    00:46
  • Create the statCardReducer
    01:20
  • Create the authReducer
    01:09
  • Create the rootReducer
    00:51
  • Create the store
    01:06
  • Connect to Redux the index file
    01:02
  • Connect to Redux the Auth file
    01:23
  • Connect to Redux the Admin file
    01:51
  • Connect to Redux the Login file
    02:43
  • Connect to Redux the Register file
    02:23
  • Connect to Redux the Header file
    05:36
  • Setting Firebase
    02:34
  • Connecting registerAction with Firebase
    02:48
  • Connecting loginAction with Firebase
    01:26
  • Connecting getAllStatCardsAction with Firebase
    01:07
  • Connecting addStatCardAction with Firebase
    01:34

Instructor
Premium Bootstrap Themes
Creative Tim
  • 3.8 Instructor Rating
  • 374 Reviews
  • 16,062 Students
  • 2 Courses

Fully coded UI Tools to create web apps

UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.


Area of expertise

- Create UI Frameworks

We have created the tools that will help you in your next project. From plugins to complex kits, we've got you covered in all areas regarding front-end development.

- Share Freebies

Everything that we used to create our products can be downloaded for free under MIT License. People have already trusted and used them in thousands of sites.

- Power Hackathons

We've sponsored many hackathons around the world with the tools that they need to make awesome web applications. Our UI tools go hand in hand with startups.


Our technologies

Our products are built on top of modern frameworks. Having the coded and the designed versions for the same framework, your designers and developers will talk the same language.


Solutions for you

Creating your web design from scratch with dedicated designers can be very expensive. Using our solutions you don't have to worry about design. Save time and money by focusing on the business model.


UI Kits & Example Pages

The easiest way to get started is to use one of our pre-built example pages. From landing pages to e-commerce or blog pages, you will be able jump start your development. Show your clients a quick prototype that can be made in minutes!


Pre-Made Sections & Elements

Build pages in no time using pre-made sections and elements! From headers to footers, you will be able to choose the best combination for your project.


Easy to Use Admin Templates

Every element that you need in a product comes built in as a component. All components fit perfectly with each other and can take variations in colour.


Fully Coded Dashboards

Using the our Admin Dashboards will save you large amount of time. You don't have to worry about customizing the basic Bootstrap 4 design or generating new components.