Let's Dive In!
  • How to Get Help
  • Small Required Codepen Fix
  • Our First App
  • CodePen Solution and Blank White Screen Help
  • Critical Questions!
  • Installing Node JS
  • Generating a React Project
  • Why Create React App?
  • Exploring a Create-React-App Project
  • Starting and Stopping a React App
  • Javascript Module Systems
  • Displaying Content with Functional Components
  • Link to Completed Github Repo
  • Common Questions About My Environment
Building Content with JSX
  • What is JSX?
  • Converting HTML to JSX
  • Inline Styling with JSX
  • Converting Styling to JSX Format
  • Class vs ClassName
  • Referencing JS Variables in JSX
  • Values JSX Can't Show
  • Finding Forbidden Property Names
  • Exercise Introduction
  • Test Your Knowledge: JSX Interpolation
  • JSX Exercise Solution
Communicating with Props
  • Three Tenets of Components
  • Application Overview
  • Getting Some Free Styling
  • Naive Component Approach
  • Specifying Images in JSX
  • Duplicating a Single Component
  • Extracting JSX to New Components
  • Component Nesting
  • React's Props System
  • Passing and Receiving Props
  • Passing Multiple Props
  • Passing Props - Solutions
  • Component Reuse
  • Implementing an Approval Card
  • Showing Custom Children
  • Component Reuse
  • Exercise - Props
  • Test Your Knowledge: Props
  • Props Exercise Solution
  • Exercise - Children
  • Test Your Knowledge: Children Through Props
  • Children Exercise Solution
Structuring Apps with Class-Based Components
  • Class-Based Components
  • Application Overview
  • Scaffolding the App
  • Getting a Users Physical Location
  • Resetting Geolocation Preferences
  • Handling Async Operations with Functional Components
  • Refactoring from Functional to Class Components
State in React Components
  • The Rules of State
  • Initializing State Through Constructors
  • Updating State Properties
  • App Lifecycle Walkthrough
  • Handling Errors Gracefully
  • Conditionally Rendering Content
Understanding Lifecycle Methods
  • Introducing Lifecycle Methods
  • Why Lifecycle Methods?
  • Refactoring Data Loading to Lifecycle Methods
  • Alternate State Intialization
  • Passing State as Props
  • Determining Season
  • Ternary Expressions in JSX
  • Showing Icons
  • Extracting Options to Config Objects
  • Adding Some Styling
  • Showing a Loading Spinner
  • Specifying Default Props
  • Avoiding Conditionals in Render
  • Breather and Review
  • Class-Based Components
  • Exercise Solution - Class-Based Components
  • Updating Components with State
  • Updating Components with State
Handling User Input with Forms and Events
  • App Overview
  • Component Design
  • Adding Some Project Structure
  • Showing Forms to the User
  • Adding a Touch of Style
  • Creating Event Handlers
  • Alternate Event Handler Syntax
  • Uncontrolled vs Controlled Elements
  • More on Controlled Elements
  • Handling Form Submittal
  • Understanding 'this' In Javascript
  • Solving Context Issues
  • Communicating Child to Parent
  • Invoking Callbacks in Children
Making API Requests with React