Home Courses Instructor Labs

React.js for Beginners with Firebase

(28 Ratings) 1764 Students Enrolled
Created By Keshava Reddy Last Updated Wed, 11-Mar-2020 English
  • Course Duration
    7 Hours
  • Mode of Training
    Self-Paced
  • Lessons
    45 Lessons
  • Validity
    Life Time
$ 89.99 $ 9.99 89% off 100% Money Back Guarantee
12k+ satisfied learners Read Reviews
What Will I Learn?
  • Learn how to setup a react project
  • Learn how to setup react router
  • Setting up a Firebase Database
  • Building the project for production
  • Project deployment
  • Learn all the React basics along with the project!

Requirements
  • Basic knowledge in HTML & CSS
  • Basic Javascript knowledge
  • Basics of web development
+ View More
Description

React is one of the most popular and highly in demand technology for web development. This helps you to create a modern web applications.

This provides you a component based approach, which allows you to build  interactive user interfaces using Javascript. You will be learning this course along with the better hands on implementing them in the project.

In this course, we will be building a Trello inspired project in which we will be using most of the React features such as:

  • Scaffolding project using Create React app
  • Folder structure and React file
  • Components in reach and how to use them
  • Writing JSX
  • Class based and function components
  • Managing state
  • Looping through the data
  • How to use props to pass data and methods to components
  • Validating prop
  • Styling components
  • Forms and inputs using controlled and uncontrolled components
  • Setting up react router
  • Passing router props
  • URL parameters
  • Using the router to pass state
  • The context API

The basic knowledge of HTML and CSS will give you the good understandings to learn this course. We use Firebase to provide a realtime database to our project.

Firebase will not only allow you to store the data but also to keep subscribed to any database changes as they happen, along with the following:

  • To setup a Firebase database
  • Pushing and reading data from the database
  • Updating and deleting data
  • Sorting and Filtering data
  • Handling the document changes
  • To handle authentication using Firebase

Finally, after building the project for production and then deploy it for the rest of the world to see!

If you are looking to learn React along with the project, then this course is for you!! All the best.

Curriculum For This Course
45 Lessons 7 Hours
  • What we will be building 00:03:56 Preview
  • What you will need for this course 00:02:07
  • Create React App 00:04:14 Preview
  • Project files folders 00:11:36
  • A closer look at components 00:03:29
  • Components in action 00:11:48
  • 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
  • Controlled components 00:15:52 Preview
  • Uncontrolled components and refs 00:09:33
  • Create new card form 00:06:22
  • 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
  • Setting up Firebase 00:10:23
  • Pushing data to Firebase 00:14:22
  • Reading data from Firebase 00:15:28
  • The where order By methods 00:17:30
  • Deleting cards and lists from Firebase 00:08:41
  • Deleting boards 00:14:39
  • Updating data in Firebase 00:09:41
  • Edit card modal 00:13:37
  • Updating the card text 00:09:04
  • Setting the labels 00:08:07
  • Text area auto resize 00:05:58
  • First look at on Snapshot 00:06:34
  • Working with document changes 00:03:51
  • Real time cards with updates 00:07:08
  • 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
  • Building for production 00:03:03
  • Deploying to Netlify 00:04:49
  • Thank you 00:01:35

React.js for Beginners with Firebase