Getting Started
- Welcome To The Course!
- What is React.js?
- Why React Instead Of "Just JavaScript"?
- Building Single-Page Applications (SPAs) with React
- Exploring React.js Alternatives (Angular / Vue)
- Join our Online Learning Community
- About This Course & Course Outline
- The Two Ways (Paths) Of Taking This Course
- Getting The Most Out Of This Course
- Setting Up The Course Dev Environment (Code Editor)
JavaScript Refresher
- Module Introduction
- Understanding "let" and "const"
- Arrow Functions
- Exports and Imports
- Understanding Classes
- Classes, Properties and Methods
- The Spread & Rest Operator
- Destructuring
- Reference and Primitive Types Refresher
- Refreshing Array Functions
- Wrap Up
- Next-Gen JavaScript - Summary
- JS Array Functions
React Basics & Working With Components
- Module Introduction
- What Are Components? And Why Is React All About Them?
- React Code Is Written In A "Declarative Way"!
- Creating a new React Project
- The Starting Project
- Analyzing a Standard React Project
- Introducing JSX
- How React Works
- Building a First Custom Component
- Writing More Complex JSX Code
- Adding Basic CSS Styling
- Outputting Dynamic Data & Working with Expressions in JSX
- Passing Data via "props"
- Adding "normal" JavaScript Logic to Components
- Splitting Components Into Multiple Components
- Time to Practice: React & Component Basics
- The Concept of "Composition" ("children props")
- A First Summary
- A Closer Look At JSX
- Organizing Component Files
- An Alternative Function Syntax
- Learning Check: React Basics, Components, Props & JSX
- Module Resources
React State & Working with Events
- Module Introduction
- Listening to Events & Working with Event Handlers
- How Component Functions Are Executed
- Working with "State"
- A Closer Look at the "useState" Hook
- State can be updated in many ways!
- Adding Form Inputs
- Listening to User Input
- Working with Multiple States
- Using One State Instead (And What's Better)
- Updating State That Depends On The Previous State
- Handling Form Submission
- Adding Two-Way Binding
- Child-to-Parent Component Communication (Bottom-up)
- Lifting The State Up
- Time to Practice: Working with Events & State
- Controlled vs Uncontrolled Components & Stateless vs Stateful Components
- Learning Check: Working with Events & State
- Module Resources
Rendering Lists & Conditional Content
- Module Introduction
- Rendering Lists of Data
- Using Stateful Lists
- Understanding "Keys"
- Time to Practice: Working with Lists
- Outputting Conditional Content
- Adding Conditional Return Statements
- Time to Practice: Conditional Content
- Demo App: Adding a Chart
- Adding Dynamic Styles
- Wrap Up & Next Steps
- Fixing a Small Bug
- Learning Check: Outputting Lists & Conditional Content
- Module Resources
Styling React Components
- Module Introduction
- Setting Dynamic Inline Styles
- Setting CSS Classes Dynamically
- Introducing Styled Components
- Styled Components & Dynamic Props
- Styled Components & Media Queries
- Using CSS Modules
- Dynamic Styles with CSS Modules
- Module Resources
Debugging React Apps
- Module Introduction
- Understanding React Error Messages
- Analyzing Code Flow & Warnings
- Working with Breakpoints
- Using the React DevTools
