React Front To Back by Udemy
Learn modern React by building 4 projects including a Firebase 9 app and a full stack MERN app
Course Highlights
- Learn modern React by building 4 projects
- Suitable For Both Beginners & Intermediate React Developers
- Feedback app with in depth explanation of React fundamentals
- Build a house marketplace with React and Firebase 9
- Learn React hooks and how to create custom hooks
- Learn how to use context and reducers to manage global state
- Build a Fullstack MERN support ticket system with Redux Toolkit
Skills you will learn!
Curriculum
5 Topics
Welcome To The Course!
What Is React?
Environment Setup
Code Repos
Links & Resources
6 Topics
Feedback Project Intro
Create React App
Initializing React
Intro To JSX
Dynamic Values & LIsts in JSX
Conditionals in JSX
7 Topics
Creating Your First Component & Props
Adding Styles To A Component
State & useState Hook
Managing Global State
Card Component & Conditional Styles
Events & Prop Drilling
FeedbackStats Component & Reactivity
6 Topics
Form Input & State
Custom Button Component
Real-Time Validation
Rating Select Component
Add Feedback
Fade Animation With Framer Motion
5 Topics
Creating Routes (React Router 5)
Upgrading To React Router 6
Creating Links (v5 & v6)
NavLink & useParams
Navigate & Nested Routes
7 Topics
Create a Context & 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
7 Topics
APIs & Requests Explained
Setting Up JSON-Server Mock Backend
Run Client & Server With Concurrently
Fetch Data From JSON-Server Backend
Spinner Component
Add Feedback & Setting a Proxy
Update & Delete From JSON-Server
5 Topics
GitHub Finder Project Intro
Setup Tailwind & Daisy UI
Navbar Component
Footer Component
Pages & Routes
10 Topics
Github API & Getting Token
UserList Component
Loading Spinner
Display Users
Setup Github Context
Reducers & useReducer Hook
Clean Up Fetch Users
User Search Component
Search Users
Clear Users
7 Topics
Alert Context & Reducer
Alert Component
Get Single User
User Profile Top
User Profile Stats
Get User Repos
Repo Items
4 Topics
Move SearchUsers To Actions File
Move getUser To Actions File
Cleaning Up Our Actions & Axios
Deploy To Vercel
8 Topics
Section Intro
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
6 Topics
House Marketplace Project Intro
App & FIrebase Setup
Enable Authentication & Create Rules
Dummy Data & Indexes
Pages & Routes
Navbar Component
10 Topics
Sign In & Sign Up Forms
Register User
Save User To Firestore
User Sign In
Alerts With React Toastify
User Logout
Display & Update User Details
PrivateRoute Component & useAuthStatus Hook
Forgot Password Page
Google OAuth
10 Topics
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 & Change
12 Topics
Fetch Single Listing
Listing Details
Contact Landlord Page
Leaflet Map
Listings Page Slider
Explore Slider
Profile Listings & Delete
Load More Pagination
Edit Listing Icon
Edit Listing
Clear Up Console Warnings
Deploy To Vercel
11 Topics
Project Intro
What Is The MERN Stack?
MongoDB Setup
Server File Stucture
Basic Express Server Setup
Add Routes & Controller
Error & Exception Handling
Connect To The Database
Register User
Login & Create JWT
Protect Routes & Authentication
8 Topics
Frontend Folder Setup
Header & Initial Pages
Home Login & Register UI
Redux Setup & Auth Slice
Hook Register Form To Redux
Register User
Logout User
User Login
11 Topics
Ticket Model & Routes
Get & Create Tickets (Backend)
Single Ticket Update & 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
6 Topics
Notes Backend
Fetch Notes Through Redux
Display Notes
Note Form Modal
Submit a Note
Deploy To Heroku
React Front To Back
Related React JS Courses
Thank You!
Your review has been submitted successfully.