Intro to React
Jumpstart your journey into modern web development with this comprehensive introduction to React, covering everything from fundamental concepts to building and deploying your first application.
...
Share
React Fundamentals and Setup
Unit 1: Intro to React
What is React?
React's Place
React Under the Hood
JSX Introduction
Hello World in React
Unit 2: Setting Up Your Environment
Node.js & npm: Why?
Code Editor Setup
Create React App
Exploring CRA Structure
First App Customization
Components, JSX, Props, and State
Unit 1: React Components - The building Blocks
Components: An Intro
Functional Components
Class Components
Func vs Class: Showdown
Component Composition
Unit 2: JSX - Powering the View
JSX: A Quick Look
JSX Expressions
JSX and Attributes
JSX: Conditionals
JSX Gotchas
Unit 3: Props - Data Flowing Down
Props: Passing Data
Props are Read-Only
Prop Validation
Destructuring Props
Children Prop
Unit 4: State - Component Memory
State: Intro
useState Hook
Updating State Correctly
Multiple State Variables
State in Class
Unit 5: Events and Conditional Rendering
Handling Events
Event Arguments
`this` in Event Handlers
Conditional Rendering
Lists and Keys Revisited
Hooks, Lists, and Lifecycle Methods
Unit 1: Diving into React Hooks
Intro to React Hooks
The useState Hook
The useEffect Hook
useContext Hook
useRef Hook
Unit 2: Rendering Lists with Keys
Rendering Lists
Keys: The Magic Ingredient
Unique Key Generation
Filtering Lists
Sorting Lists
Unit 3: Component Lifecycle Methods
Lifecycle Intro
Mounting Phase
Updating Phase
Unmounting Phase
Lifecycle in Practice
Unit 4: Building Custom Hooks
Custom Hooks Intro
Creating a Custom Hook
useFetch Hook
useLocalStorage Hook
Sharing Logic
Routing, Data Fetching, and Styling
Unit 1: React Router Fundamentals
Intro to React Router
Setting Up React Router
Defining Routes
Navigation with Links
Route Parameters
Unit 2: Fetching Data from APIs
Intro to Data Fetching
Fetching with 'fetch'
Async/Await Explained
Axios: A Better 'fetch'?
Displaying Fetched Data
Unit 3: Styling React Components
Inline Styles
CSS Stylesheets
CSS Modules
Styled Components Intro
Styled Components: Usage
Unit 4: Handling API Errors
Why Error Handling?
Try...Catch Blocks
Catching Fetch Errors
Axios Error Handling
User Feedback on Errors
Testing and Modern React Practices
Unit 1: React Component Testing
Testing Intro & Setup
Writing Your First Test
Testing Props & State
Mocking and Spying
Async Tests
Unit 2: Server Components
Intro to Server Comp
Building a Server Comp
When to use which?
Interactive Elements
Data Mutations
Unit 3: React Ecosystem & Deployment
Staying Current
Exploring New Features
Deployment Overview
Deploying to Netlify
Deploying to Vercel
Capstone Project: Building a React Application
Unit 1: Project Scoping and Setup
Project Ideation
Tech Stack Decisions
Project Setup
Wireframing the App
Data Model Design
Unit 2: Component Architecture and Development
Component Breakdown
Building Components
State Management
API Integration
Styling the App
Unit 3: Testing, Optimization, and Deployment
Unit Testing Time
Performance Tuning
Accessibility Audit
Building for Prod
Deployment Day