TOIT Training

Facebook X-twitter Linkedin Instagram
Menu
Intermediate
Firebase Courses

Build Websites with React and Firebase

Overview
Curriculum

 

This course covers the integration of React, a powerful front-end library, with Firebase, a comprehensive app development platform by Google. It emphasizes creating dynamic websites using React’s component-based architecture while leveraging Firebase for backend infrastructure, including real-time databases, authentication, and hosting services. The course demonstrates how to harness Firebase’s suite of tools to manage serverless application development, from setting up real-time data syncing with Firestore to implementing user authentication systems. Participants learn to utilize Firebase functions to extend their applications and integrate with cloud services, combining the robust user interface capabilities of React with the scalable backend solutions offered by Firebase for a full-stack development experience.

Curriculum

  • 17 Sections
  • 157 Lessons
  • 0m Duration
Expand All
Introduction & Setup
6 Lessons
  1. Welcome to the Course
  2. React at a Glance
  3. What You Should Already Know
  4. Environment Setup
  5. Course Files
  6. Extra Resources & JavaScript Help
React Basics
5 Lessons
  1. Using the React CDN
  2. Creating a React Component
  3. JSX Templates
  4. Template Expressions
  5. Click Events
Using Create-React-App
5 Lessons
  1. Making a React Site
  2. Project Structure
  3. Running the Application
  4. Using Images
  5. Using Stylesheets
Intro to State & useState
7 Lessons
  1. Why We Need State
  2. Using useState
  3. How State & Rendering Works
  4. Outputting Lists
  5. Using Previous State
  6. Conditional Templates
  7. Rules of useState
 Components and Props
10 Lessons
  1. Multiple Components
  2. Making a Title Component
  3. Props
  4. React Fragments
  5. Children Props
  6. Functions as Props
  7. CHALLENGE – Showing the Modal
  8. Portals
  9. CHALLENGE – Event List Component
  10. Class Components (an Overview)
Styling React Applications
6 Lessons
  1. Using a Global Stylesheet
  2. Component Stylesheets
  3. Inline Styles
  4. Dynamic Inline Styles
  5. Conditional CSS Classes
  6. CSS Modules
User Input & Events
7 Lessons
  1. Forms & Labels in React
  2. The onChange Event
  3. Controlled Inputs
  4. Submitting a Form
  5. Adding a New Event to the State
  6. The useRef Hook
  7. Select Boxes
Fetching Data & useEffect
11 Lessons
  1. New Project & JSON Server Setup
  2. Why We Need useEffect
  3. Fetching Data with useEffect
  4. The Dependency Array
  5. Function Dependencies & useCallback
  6. Making a Custom Fetch Hook
  7. Adding a Loading State
  8. Handling Errors
  9. Why We Need Cleanup Functions
  10. Aborting Fetch Requests (Cleanup Function)
  11. useEffect Gotcha
PROJECT BUILD - Memory Game
11 Lessons
  1. Project Preview & Setup
  2. Shuffling Cards
  3. Creating a Card Grid
  4. CHALLENGE – Creating a Card Component
  5. Making Card Choices
  6. CHALLENGE – Comparing Card Choices
  7. Matching Cards
  8. Flipping Cards
  9. Flipping Animation
  10. Disabling Card Selections
  11. Final Touches
The React Router
9 Lessons
  1. Multipage React Sites
  2. React Router & Pages Setup
  3. Switch & Exact Matches
  4. Links & NavLinks
  5. Fetching Data
  6. Route Parameters
  7. The useParams Hook
  8. Programmatic Redirects
  9. Query Parameters
PROJECT BUILD - Recipe Directory
14 Lessons
  1. Project Preview & Setup
  2. Pages & Routes
  3. Navbar Component
  4. Fetching Recipe Data
  5. Recipe List Component
  6. CHALLENGE – Fetching a Single Recipe
  7. Recipe Details Template
  8. Making a Form for Creating Recipes
  9. Adding Ingredients
  10. Making a POST Request
  11. CHALLENGE – Redirecting the User
  12. Making a Searchbar
  13. Search Results Page
  14. Finishing Touches
React Context & Reducers
9 Lessons
  1. Prop Drilling
  2. What is the Context API
  3. Creating a Context & Provider
  4. Accessing Context with useContext
  5. Creating a Custom Context Hook
  6. Reducers & useReducer
  7. Making a Theme Color Selector
  8. Making a Light & Dark Mode
  9. Styling the Light & Dark Modes
Firebase Firestore
10 Lessons
  1. What is Firebase
  2. Firestore Databases
  3. Connecting to Firebase
  4. Fetching a Firestore Collection
  5. Fetching a Firestore Document
  6. Adding Firestore Documents
  7. Deleting Documents
  8. Realtime Collection Data
  9. Updating Documents
  10. Realtime Document Data
PROJECT BUILD - Finance Tracker
28 Lessons
  1. CHALLENGE – Pages & Routes
  2. Login Form
  3. CHALLENGE – Signup Form
  4. Firebase Setup
  5. Firebase Authentication Setup
  6. Creating a Signup Hook
  7. Using the useSignup Hook
  8. Creating an Auth Context
  9. Dispatching a Login Action
  10. Creating a useLogin Hook
  11. Using the useLogout Hook
  12. Cleanup Function
  13. Creating a useLogin Hook
  14. Using the useLogin Hook
  15. Conditionally Showing User Content
  16. Firebase Auth State Changes
  17. Waiting for Auth to be Ready
  18. Route Guards
  19. New Transaction Form
  20. Creating a useFirestore Hook
  21. Adding New Documents
  22. Firestore Timestamps
  23. Using the useFirestore Hook
  24. Creating a useCollection Hook
  25. Listing Transactions
  26. Firestore Queries
  27. Ordering Queries
  28. Deleting Transactions
 Firestore Rules
4 Lessons
  1. What Are Firestore Rules
  2. The Firebase CLI
  3. Securing Collections
  4. Deploying Firestore Rules
 Building & Deploying
4 Lessons
  1. Building a React App
  2. Deploying to Firebase
  3. Redeploying
  4. Rolling Back Deployments
 PROJECT BUILD - Project Management Site
11 Lessons
  1. Project Preview & Setup
  2. Firebase Project Setup
  3. Firebase Init
  4. Reusing Firebase Hooks
  5. Router & Pages Setup
  6. Navbar Component
  7. Sidebar Component
  8. Making a Signup Form
  9. Handling File Input Changes
  10. Firebase Storage Setup
  11. Uploading Images

Deleting Course Review

Are you sure? You can't restore this back

Course Access

This course is password protected. To access it please enter your password below:

Buy for group

Build Websites with React and Firebase
No groups Found

You don't have any groups yet

Create a group and add group members. Sync Group(s)
Choose Group(s)
Sync Group(s)
    Create a new group Go to Checkout