ES6 Primer (Optional) - Prefer const and let over var
- Arrow functions
- Modules
- Object.assign()
- Template literals
- The spread operator and Rest parameters
- Enhanced object literals
- Default arguments
- Destructuring assignments
Your first React Web Application - Setting up your development environment
- JavaScript ES6 /ES7
- Getting started
- Whats a component
- Our first component
- Building the App
- Making the App data-driven
- Your apps first interaction
- Updating state and immutability
- Refactoring with the Babel plugin transform-class-properties
JSX and the Virtual DOM - React Uses a Virtual DOM
- Why Not Modify the Actual DOM
- What is a Virtual DOM
- Virtual DOM Pieces
- ReactElement
- JSX
- JSX Creates Elements
- JSX Attribute Expressions
- JSX Conditional Child Expressions
- JSX Boolean Attributes
- JSX Comments
- JSX Spread Syntax
- JSX Gotchas
- JSX Summary
Components - A time-logging app
- Getting started
- Breaking the app into components
- The steps for building React apps from scratch
- Updating timers
- Deleting timers
- Adding timing functionality
- Add start and stop functionality
- Methodology review
Advanced Component Configuration with props, state, and children- ReactComponent
- props are the parameters
- PropTypes
- Default props with getDefaultProps()
- context
- state
- Stateless Components
- Talking to Children Components with props.children
Forms- Forms 101
- Text Input
- Remote Data
- Async Persistence
- Redux
- Form Modules
Unit Testing & Jest - Writing tests without a framework
- What is Jest
- Using Jest
- Testing strategies for React applications
- Testing a basic React component with Enzyme
- Writing tests for the food lookup app
- Writing FoodSearch.test.js
Routing- Whats in a URL
- React Routers core components
- Building the components of react-router
- Dynamic routing with React Router
- Supporting authenticated routes
Intro to Flux and Redux - Why Flux
- Flux is a Design Pattern
- Flux implementations
- Redux & Reduxs key ideas
- Building a counter
- The core of Redux
- The beginnings of a chat app
- Building the reducer()
- Subscribing to the store
- Connecting Redux to React
Intermediate Redux- Using createStore() from the redux library
- Representing messages as objects in state
- Introducing threads
- Adding the ThreadTabs component
- Supporting threads in the reducer
- Adding the action OPEN_THREAD
- Breaking up the reducer function
- Adding messagesReducer()
- Defining the initial state in the reducers
- Using combineReducers() from redux
React Hooks - Motivation behind Hooks
- How Hooks Map to Component Classes
- Using Hooks Requires react 'next'
- useState() Hook Example
- useEffect() Hook Example
- useContext() Hook Example
- Using Custom Hooks
Using Webpack with Create React App - JavaScript modules
- Create React App
- Exploring Create React App
- Webpack basics
- Making modifications
- Hot reloading; Auto-reloading
- Creating a production build
- Ejecting
- Using Create React App with an API server
- When to use Webpack/Create React App
Using GraphQL - Your First GraphQL Query
- GraphQL Benefits
- GraphQL vs. REST
- GraphQL vs. SQL
- Relay and GraphQL Frameworks
- Chapter Preview
- Consuming GraphQL
- Exploring With GraphiQL
- GraphQL Syntax 101 .
- Complex Types
- Exploring a Graph
- Graph Nodes ; Viewer
- Graph Connections and Edges
- Mutations
- Subscriptions
- GraphQL With JavaScript
- GraphQL With React
, Your first React Web Application
Setting up your development environment
JavaScript ES6 /ES7
Next.js Introduction
Getting started
Functional Components
What's a component
Functional components - Motivation behind Hooks
Our first component
Building the App
Props - Making the App data-driven
Events - Your app's first interaction with useEffect() Hook
State - Updating state with useState() Hook
JSX and the Virtual DOM
React Uses a Virtual DOM
Why Not Modify the Actual DOM
What is a Virtual DOM
Virtual DOM Pieces
ReactElement
JSX
JSX Creates Elements
JSX Attribute Expressions
JSX Conditional Child Expressions
JSX Boolean Attributes
JSX Comments
JSX Spread Syntax
JSX Gotchas
Forms
Forms 101
Text Input
Multiple fields
Validation
Routing
What's in a URL
React Router's core components
Building the components of react-router
Advanced Component Configuration with context
Context - Provider/Consumer
useContext() Hook Example
Unit Testing & Jest
Writing tests without a framework
What is Jest
Using Jest
Testing strategies for React applications
React Testing Library
Debugging React
Using React Developer Tools
Using Visual Studio Code
OPTIONAL - Using the Chrome Debugger
React Custom Hooks
Writing and Using Custom Hooks
REST
REST Basics
Using fetch
Using Axios
A larger Component React Application:
A time-logging app
Getting started
Breaking the app into components
The steps for building React apps from scratch
Step 2: Build a static version of the app
Step 3: Determine what should be stateful
Step 4: Determine in which component each piece of state should live
Step 5: Hard-code initial states
Step 6: Add inverse data flow
Updating timers
Deleting timers
Adding timing functionality
Add start and stop functionality
Methodology review
Flux and Redux Basics
Why Flux
Flux is a Design Pattern
Flux implementations
Redux's key ideas
Building a counter
The core of Redux
The beginnings of a chat app
Building the reducer()
Subscribing to the store
Connecting Redux to React
Intermediate Redux
Building the redux store
Representing messages as objects in state
Introducing chat threads for the chat application
Adding the ThreadTabs component
Supporting threads in the reducer
Adding another action to the reducer
Bonus Content / Time Permitting
ES6 Primer
Prefer const and let over var
Arrow functions
Modules
Object.assign()
Template literals
The spread operator and Rest parameters
Enhanced object literals
Default arguments
Destructuring assignments
Using Vite:
Using Vite to create the TypeScript React application
Start it up and watch it run
Unique features of Vite
Why combine TypeScript and Vite
Benefits of using React with Vite
Creating a Vite project
Project structure
Running the application
Building a blog application
Creating the blog data
Creating a blog component
Adding authentication with Okta to the application
Performance comparison: CRA vs. Vite
Legacy Class Components:
Class components
Props €œ this.props vs props
How Hooks Map to Component Classes
Events €œ Class component lifecycle
State €œ this.state object and this.setState()
Download Overview