When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

SkillShare logo

React. js Academy for Beginners with Firebase

Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.

     0 |
  • Reviews ( 0 )
Free

This Course Includes

  • iconskillshare
  • icon0 (0 reviews )
  • icon6 hours 32 minutes
  • iconenglish
  • iconOnline - Self Paced
  • iconcourse
  • iconSkillShare

About React. js Academy for Beginners with Firebase

Welcome to the course

What we will be building

What you will need for this course

Create React App

Project files & folders

A closer look at components

Components in action

First look at state and JSX

Component lifecycle and looping

Passing data as props

Passing methods as props

Prop type validation

Controlled components

Uncontrolled components and refs

Create new card form

Setting up React router

Passing props to a router component

URL parameters

Using withRouter and push

Passing state via router

Setting up Firebase

Pushing data to Firebase

Reading data from Firebase

The where & orderBy methods

Deleting cards and lists from Firebase

Deleting boards

Updating data in Firebase

Edit card modal

Updating the card text

Setting the labels

Text area auto resize

First look at onSnapshot

Working with document changes

Realtime cards with updates

React Context API

Firebase Authentication and set up

User sign up

Logging in and out

Listening for auth changes

Conditional rendering

Rendering boards based on user

Redirecting and error messages

Roles & permissions

Building for production

Deploying to Netlify

Thank you

What You Will Learn?

  • React is one of the most popular and in demand technology in modern web development!.
  • This course is designed to teach you everything you need to know to build modern applications using React..
  • Using a component based approach, React allows you to build interactive user interfaces using Javascript..
  • This course is completely project based and everything you learn will be instantly put into practice into one big project..
  • We will be building a Trello inspired project which will allow us to take advantage of React's features including:.
  • Scaffolding projects using Create React App.
  • React file and folder structure 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.
  • Prop validation.
  • Styling components.
  • Forms and inputs using controlled and uncontrolled components.
  • Setting up React router.
  • Passing router props.
  • URL Parameters.
  • Using withRouter and push.
  • Using the router to pass state.
  • Context API.
  • This course is designed for beginners to React, or if you have tried it before and not quite managed to grasp it..
  • Although HTML, CSS and some basic Javascript experience will help you get the most out of this course..
  • However we don't stop there! Even thought React handles our user interface, most apps also need a backend too..
  • We make use of Firebase to provide a realtime database to our project..
  • This will allow us to not only store our data, but also to keep subscribed to any database changes as they happen, along with the following:.
  • Setting up a Firestore database.
  • Pushing and reading data from our database.
  • Updating and deleting data.
  • Sorting and filtering data.
  • Realtime data using onSnapshot.
  • Handling document changes.
  • We also use Firebase to handle authentication. Users can sign up, log in and out, allowing users to have their own personal boards which only they can see and edit..
  • We take advantage of React's Context API to pass the users auth state throughout our application, and handle conditional rendering..
  • To round things off we look at how to build our project for production, and then deploy for the rest of the world to see!.
  • So, if you are looking to learn React, along with building a fun project, enrol in this course and I will see you in class!.