This course includes exposure to the MERN stack as well as Firebase, which provides a real-world learning experience for using React and leveraging your learning with four practical projects.
About This Video
In Detail
The course starts …
This course includes exposure to the MERN stack as well as Firebase, which provides a real-world learning experience for using React and leveraging your learning with four practical projects.
About This Video
In Detail
The course starts with React fundamentals including components, props, hooks, state, and so on. Then learn about React hooks such as useState, useEffect, useContext, useReducer, and useRef. Next, you will create custom hooks and see React Router v6.
Then, you will learn how to handle the global state with context, reducers, and hooks.
You will see Firebase 9 authentication, queries, storage, and deploy React apps to Vercel and Netlify. Basic animation with Framer Motion, implementing Leaflet maps and Swiper sliders, and working on full-stack MERN (MongoDB, Express, React, Node.js) are some of the highlights of this course.
All these concepts are explained practically with the help of four different apps/projects. If you have not used React before, the Feedback App project will help you learn the fundamentals of React. The GitHub Finder project further explores the management of the app-level state by introducing actions and reducers. You will work with third-party APIs.
The House Marketplace app will introduce you to Firebase and prepare you to learn a lot about its capabilities as a platform for user authentication, cloud file storage, and a dedicated NoSQL database. Finally, the final project (full-stack MERN support ticket system) is a full-fledged full-stack app that uses Redux and Redux Toolkit.
By the end of the course, you will have built four projects with all the concepts taught. You will also have gained enough confidence and skillset to kickstart your journey with React.
Audience
This course is for anyone who wants to learn React from scratch and become a React developer. Individuals who want to sharpen their skills as a React developer or who are looking to further their skills as a front-end developer will also benefit from this course.
You should have intermediate-level knowledge of JavaScript before learning React or any framework as some advanced JavaScript concepts are being used here.
Chapter 1 : Introduction to the Course
Welcome to the Course
What is React
Environment Setup
Code Repos
Chapter 2 : React Basics and JSX (JavaScript XML)
Introduction to Feedback Project
Create React App
Initializing React
Intro to JSX
Dynamic Values and Lists in JSX
Conditionals in JSX
Chapter 3 : Components, Props, and State
Creating Your First Component and Props
Adding Styles to a Component
State and useState Hook
Managing Global State
Card Component and Conditional Styles
Events and Prop Drilling
Feedback Stats Component and Reactivity
Chapter 4 : Forms, Validation, and Simple Animation
Form Input and State
Custom Button Component
Real-Time Validation
Rating Select Component
Add Feedback
Fade Animation with Framer Motion
Chapter 5 : Creating Routes and Links
Creating Routes (React Router 5)
Upgrading to React Router 6
Creating Links (v5 and v6)
NavLink and useParams
Navigate and Nested Routes
Chapter 6 : Context API, useContext Hook, and Deployment
Create a Context and Provider
Get Global State with the useContext Hook
Moving Functions to Context
Edit Feedback Event
Side Effects with useEffect
Update Feedback Item
Deploy to Netlify
Chapter 7 : APIs and HTTP Requests
APIs and Requests Explained
Setting Up JSON-Server Mock Backend
Run Client and Server with Concurrently
Fetch Data from JSON-Server Backend
Spinner Component
Add Feedback and Setting a Proxy
Update and Delete from JSON-Server
Chapter 8 : GitHub Finder Project Start
Introduction to GitHub Finder Project
Set Up Tailwind and Daisy UI
Navbar Component
Footer Component
Pages and Routes
Chapter 9 : Working with the GitHub API
GitHub API and Getting Token
UserList Component
Loading Spinner
Display Users
Set Up GitHub Context
Reducers and useReducer Hook
Clean Up Fetch Users
User Search Component
Search Users
Clear Users
Chapter 10 : User Profile and Alerts
Alert Context and Reducer
Alert Component
Get Single User
User Profile Top
User Profile Stats
Get User Repos
Repo Items
Chapter 11 : Refactoring Context and Actions
Move SearchUsers to Actions File
Move getUser to Actions File
Cleaning Up Our Actions and Axios
Deploy to Vercel
Chapter 12 : More Advanced React Hooks
Introduction to Section
useRef Example 1 - Create DOM Reference
useRef Example 2 - Get Previous State
useRef Example 3 - Memory Leak Error Fix
useMemo Example
useCallback Example
Custom Hook 1 - useFetch
Custom Hook 2 - useLocalStorage
Chapter 13 : House Marketplace Project Start
Introduction to House Marketplace Project
App and Firebase Setup
Enable Authentication and Create Rules
Dummy Data and Indexes
Pages and Routes
Navbar Component
Chapter 14 : Firebase Authentication and Profile
Sign In and Sign-Up Forms
Register User
Save User to Firestore
User Sign In
Alerts with React Toastify
User Logout
Display and Update User Details
PrivateRoute Component and useAuthStatus Hook
Forgot Password Page
Google OAuth
Chapter 15 : Get and Create Listings
Explore Page
Fetch Listings from Firebase
Listing Item Component
Offers Page
Start Create Listing Page
Create Listing Form
Get Coords with Geocoding API
Uploading Images to Firebase
Save Listings to Firestore
Quick Note and Change
Chapter 16 : Single Listings, Map, Slider, and Edit
Fetch Single Listing
Listing Details
Contact Landlord Page
Leaflet Map
Listings Page Slider
Explore Slider
Profile Listings and Delete
Load More Pagination
Edit Listing Icon
Edit Listing
Clear Up Console Warnings
Deploy to Vercel
Chapter 17 : MERN Project Start, API, and Backend Authentication
Introduction to Project
What Is the MERN Stack?
MongoDB Setup
Server File Structure
Basic Express Server Setup
Add Routes and Controller
Error and Exception Handling
Connect to the Database
Register User
Login and Create JWT
Protect Routes and Authentication
Chapter 18 : Front-End Authentication
Front-End Folder Setup
Header and Initial Pages
Home, Login, and Register UI
Redux Setup and Auth Slice
Hook Register Form to Redux
Register User
Logout User
User Login
Chapter 19 : Tickets Functionality
Ticket Model and Routes
Get and Create Tickets (Backend)
Single Ticket, Update, and Delete (Backend)
Route Guard
New Ticket Form
Add Tickets to Redux
Create Ticket Functionality
Fetch Tickets from Backend
Listing Tickets in UI
Single Ticket Display
Close Ticket Functionality
Chapter 20 : Notes Functionality and Deploy
Notes Backend
Fetch Notes through Redux
Display Notes
Note Form Modal
Submit a Note
Deploy to Heroku