Overview

Learn Modern React

Learn everything about React Components, React's top-level APIs, and JSX to create modern frontend applications.

Packed with Exercises

You will have plenty of time to apply your learnings in exercises after each chapter of the book. Lots of additional content awaits you.

Beginner Friendly

Step by step we will explore the concepts of React and how to use them in modern client applications to power our frontend.

Up-To-Date

All the recent React best practices will be included in this React course to get you up to speed to the recent trends.

Real World Application

You will build a real world application with features such as client-side filtering, server-side filtering and pagination.

Advanced Concepts

Lots of advanced concepts such as higher-order components, render props, and React's context will be covered in this course.

Syllabus

Before React
Web Applications 101
JavaScript Fundamentals
How to learn a framework
Why frameworks?
How to learn React
React on MacOS
React on Windows

React with Webpack
JavaScript Project Setup
Webpack Project Setup
Webpack with Babel
React with Webpack
Webpack with ESLint
React with ESLint
Webpack with Images
Webpack with Fonts
Webpack with SVGs
Webpack with CSS Modules
Advanced Webpack
Babel Module Resolver

React Hooks
React Hooks Introduction
React's useState Hook
React's useReducer Hook
React's useEffect Hook
React's useReducer Hook
React's useRef Hook
React's useMemo Hook
React's useCallback Hook

Custom Hooks
Custom Hooks in React

Context API
React Context
React's useContext Hook

State Management
State in React
Lift State
Derive State from Props
Computed Properties
useState vs useReducer
Global State
Mimic Redux
Redux vs useReducer
useState Callback

Working with APIs
Fetching Data

Components
Function Components
Props
Element vs Component
Component Composition
Composition over Configuration
Reusable Components
Controlled Components
Memoized Components

Class Components
Component Types
Migration
Data Fetching
Alternative Syntax

Lists in React
List Components
List Key
Add Item to List
Update Item in List
Remove Item in List
Scroll to Item

UI Components
Button in React
Checkbox in React
Radio Button in React
Dropdown in React
React Slider
React Range

Concepts
Forms
Conditional Rendering
Event Handlers
Event Bubbling
Render Props (1)
Render Props (2)
Render Props (3)
Higher-Order Components
Slot Pattern
Prevent Default

Styling
Styling Strategies and Approaches
Styled Components
CSS Modules
Semantic UI

Testing
Testing in React
Jest
Snapshot Test: Difference
Snapshot Test: Shallow
Jest & Enzyme
Cypress

Organization
Folder/File Organization

Tables in React
React Table Library Introduction
React Table as Tree View
React Table with Select
React Table with Sort
React Table with Resize
React Table with Filter
React Table with Search
React Table with Pagination
React Table with Theming
React Table with fixed Header
React Table with fixed Column
React Table with Double Click
React Table with server-side Data

React Router
React Router Introduction
Nested Routes in React Router
Descendant Routes in React Router
Search Params in React Router
Redirect with React Router
Private Routes in React Router
Authentication with React Router
Lazy Loading with React Router

React Ecosystem
React Libraries
Why Redux
Why Firebase
Why GraphQL
Why Gatsby
Browser Storage
i18n in React

React Freelancer
Freelance React Developer Checklist

Web Components
Web Components
With React

Docker
Docker Installation
Docker with create-react-app
Docker with React/Webpack