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.
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
Understand React basics and setup
Create and render React components
Utilize JSX for templates and expressions
Handle events in React (eg, click events)
Manage state with the useState hook
Implement conditional rendering in React
Build multi-component hierarchies
Pass and receive props in components
Style components using various methods in React
Manage forms, inputs, and events
Fetch data and use the useEffect hook
Configure and use React Router for navigation
01. Introduction & Setup
- Welcome to the Course
- React at a Glance
- What You Should Already Know
- Environment Setup
- Course Files
- Extra Resources & JavaScript Help
02. React Basics
- Using the React CDN
- Creating a React Component
- JSX Templates
- Template Expressions
- Click Events
03. Using Create-React-App
- Making a React Site
- Project Structure
- Running the Application
- Using Images
- Using Stylesheets
04. Intro to State & useState
- Why We Need State
- Using useState
- How State & Rendering Works
- Outputting Lists
- Using Previous State
- Conditional Templates
- Rules of useState
05. Components and Props
- Multiple Components
- Making a Title Component
- Props
- React Fragments
- Children Props
- Functions as Props
- CHALLENGE – Showing the Modal
- Portals
- CHALLENGE – Event List Component
- Class Components (an Overview)
06. Styling React Applications
- Using a Global Stylesheet
- Component Stylesheets
- Inline Styles
- Dynamic Inline Styles
- Conditional CSS Classes
- CSS Modules
07. User Input & Events
- Forms & Labels in React
- The onChange Event
- Controlled Inputs
- Submitting a Form
- Adding a New Event to the State
- The useRef Hook
- Select Boxes
08. Fetching Data & useEffect
- New Project & JSON Server Setup
- Why We Need useEffect
- Fetching Data with useEffect
- The Dependency Array
- Function Dependencies & useCallback
- Making a Custom Fetch Hook
- Adding a Loading State
- Handling Errors
- Why We Need Cleanup Functions
- Aborting Fetch Requests (Cleanup Function)
- useEffect Gotcha
09. PROJECT BUILD - Memory Game
- Project Preview & Setup
- Shuffling Cards
- Creating a Card Grid
- CHALLENGE – Creating a Card Component
- Making Card Choices
- CHALLENGE – Comparing Card Choices
- Matching Cards
- Flipping Cards
- Flipping Animation
- Disabling Card Selections
- Final Touches
10. The React Router
- Multipage React Sites
- React Router & Pages Setup
- Switch & Exact Matches
- Links & NavLinks
- Fetching Data
- Route Parameters
- The useParams Hook
- Programmatic Redirects
- Redirect Component
- Query Parameters
11. PROJECT BUILD - Recipe Directory
- Project Preview & Setup
- Pages & Routes
- Navbar Component
- Fetching Recipe Data
- Recipe List Component
- CHALLENGE – Fetching a Single Recipe
- Recipe Details Template
- Making a Form for Creating Recipes
- Adding Ingredients
- Making a POST Request
- CHALLENGE – Redirecting the User
- Making a Searchbar
- Search Results Page
- Finishing Touches
12. React Context & Reducers
- Prop Drilling
- What is the Context API
- Creating a Context & Provider
- Accessing Context with useContext
- Creating a Custom Context Hook
- Reducers & useReducer
- Making a Theme Color Selector
- Making a Light & Dark Mode
- Styling the Light & Dark Modes
13. Firebase Firestore
- What is Firebase
- Firestore Databases
- Connecting to Firebase
- Fetching a Firestore Collection
- Fetching a Firestore Document
- Adding Firestore Documents
- Deleting Documents
- Realtime Collection Data
- Updating Documents
- Realtime Document Data
14. PROJECT BUILD - Finance Tracker
- Project Preview & Setup
- CHALLENGE – Pages & Routes
- Navbar Component
- Login Form
- CHALLENGE – Signup Form
- Firebase Setup
- Firebase Authentication Setup
- Creating a Signup Hook
- Using the useSignup Hook
- Creating an Auth Context
- Dispatching a Login Action
- Creating a useLogin Hook
- Using the useLogout Hook
- Cleanup Function
- Creating a useLogin Hook
- Using the useLogin Hook
- Conditionally Showing User Content
- Firebase Auth State Changes
- Waiting for Auth to be Ready
- Route Guards
- New Transaction Form
- Creating a useFirestore Hook
- Adding New Documents
- Firestore Timestamps
- Using the useFirestore Hook
- Creating a useCollection Hook
- Listing Transactions
- Firestore Queries
- Ordering Queries
- Deleting Transactions
15. Firestore Rules
- What Are Firestore Rules
- The Firebase CLI
- Securing Collections
- Deploying Firestore Rules
16. Building & Deploying
- Building a React App
- Deploying to Firebase
- Redeploying
- Rolling Back Deployments
17. PROJECT BUILD - Project Management Site
- Project Preview & Setup
- Firebase Project Setup
- Firebase Init
- Reusing Firebase Hooks
- Router & Pages Setup
- Navbar Component
- Sidebar Component
- Making a Signup Form
- Handling File Input Changes
- Firebase Storage Setup
- Uploading Images
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
Understand React basics and setup
Create and render React components
Utilize JSX for templates and expressions
Handle events in React (eg, click events)
Manage state with the useState hook
Implement conditional rendering in React
Build multi-component hierarchies
Pass and receive props in components
Style components using various methods in React
Manage forms, inputs, and events
Fetch data and use the useEffect hook
Configure and use React Router for navigation
COURSE OUTLINE
01. Introduction & Setup
- Welcome to the Course
- React at a Glance
- What You Should Already Know
- Environment Setup
- Course Files
- Extra Resources & JavaScript Help
02. React Basics
- Using the React CDN
- Creating a React Component
- JSX Templates
- Template Expressions
- Click Events
03. Using Create-React-App
- Making a React Site
- Project Structure
- Running the Application
- Using Images
- Using Stylesheets
04. Intro to State & useState
- Why We Need State
- Using useState
- How State & Rendering Works
- Outputting Lists
- Using Previous State
- Conditional Templates
- Rules of useState
05. Components and Props
- Multiple Components
- Making a Title Component
- Props
- React Fragments
- Children Props
- Functions as Props
- CHALLENGE – Showing the Modal
- Portals
- CHALLENGE – Event List Component
- Class Components (an Overview)
06. Styling React Applications
- Using a Global Stylesheet
- Component Stylesheets
- Inline Styles
- Dynamic Inline Styles
- Conditional CSS Classes
- CSS Modules
07. User Input & Events
- Forms & Labels in React
- The onChange Event
- Controlled Inputs
- Submitting a Form
- Adding a New Event to the State
- The useRef Hook
- Select Boxes
08. Fetching Data & useEffect
- New Project & JSON Server Setup
- Why We Need useEffect
- Fetching Data with useEffect
- The Dependency Array
- Function Dependencies & useCallback
- Making a Custom Fetch Hook
- Adding a Loading State
- Handling Errors
- Why We Need Cleanup Functions
- Aborting Fetch Requests (Cleanup Function)
- useEffect Gotcha
09. PROJECT BUILD - Memory Game
- Project Preview & Setup
- Shuffling Cards
- Creating a Card Grid
- CHALLENGE – Creating a Card Component
- Making Card Choices
- CHALLENGE – Comparing Card Choices
- Matching Cards
- Flipping Cards
- Flipping Animation
- Disabling Card Selections
- Final Touches
10. The React Router
- Multipage React Sites
- React Router & Pages Setup
- Switch & Exact Matches
- Links & NavLinks
- Fetching Data
- Route Parameters
- The useParams Hook
- Programmatic Redirects
- Redirect Component
- Query Parameters
11. PROJECT BUILD - Recipe Directory
- Project Preview & Setup
- Pages & Routes
- Navbar Component
- Fetching Recipe Data
- Recipe List Component
- CHALLENGE – Fetching a Single Recipe
- Recipe Details Template
- Making a Form for Creating Recipes
- Adding Ingredients
- Making a POST Request
- CHALLENGE – Redirecting the User
- Making a Searchbar
- Search Results Page
- Finishing Touches
12. React Context & Reducers
- Prop Drilling
- What is the Context API
- Creating a Context & Provider
- Accessing Context with useContext
- Creating a Custom Context Hook
- Reducers & useReducer
- Making a Theme Color Selector
- Making a Light & Dark Mode
- Styling the Light & Dark Modes
13. Firebase Firestore
- What is Firebase
- Firestore Databases
- Connecting to Firebase
- Fetching a Firestore Collection
- Fetching a Firestore Document
- Adding Firestore Documents
- Deleting Documents
- Realtime Collection Data
- Updating Documents
- Realtime Document Data
14. PROJECT BUILD - Finance Tracker
- Project Preview & Setup
- CHALLENGE – Pages & Routes
- Navbar Component
- Login Form
- CHALLENGE – Signup Form
- Firebase Setup
- Firebase Authentication Setup
- Creating a Signup Hook
- Using the useSignup Hook
- Creating an Auth Context
- Dispatching a Login Action
- Creating a useLogin Hook
- Using the useLogout Hook
- Cleanup Function
- Creating a useLogin Hook
- Using the useLogin Hook
- Conditionally Showing User Content
- Firebase Auth State Changes
- Waiting for Auth to be Ready
- Route Guards
- New Transaction Form
- Creating a useFirestore Hook
- Adding New Documents
- Firestore Timestamps
- Using the useFirestore Hook
- Creating a useCollection Hook
- Listing Transactions
- Firestore Queries
- Ordering Queries
- Deleting Transactions
15. Firestore Rules
- What Are Firestore Rules
- The Firebase CLI
- Securing Collections
- Deploying Firestore Rules
16. Building & Deploying
- Building a React App
- Deploying to Firebase
- Redeploying
- Rolling Back Deployments
17. PROJECT BUILD - Project Management Site
- Project Preview & Setup
- Firebase Project Setup
- Firebase Init
- Reusing Firebase Hooks
- Router & Pages Setup
- Navbar Component
- Sidebar Component
- Making a Signup Form
- Handling File Input Changes
- Firebase Storage Setup
- Uploading Images
