Hands-On Application Development with React and Bootstrap

Course Curriculum

Chapter 1: Getting Started With Create-React-App

Lecture 1: Course Overview

Lecture 2: Prerequisites and Software

Lecture 3: Exercise Files

Lecture 4: Previewing the Finished App

Chapter 2: Laying the Foundation: Building Out the Navigation

Lecture 1: Install and Run Create-React-App

Lecture 2: Introduction to JSON Server

Lecture 3: Using Faker to Generate Random Test Data

Lecture 4: React Component State

Lecture 5: React’s Component Life Cycle

Lecture 6: Creating a React Component with ES6

Lecture 7: Fetching Data with Axios

Lecture 8: Testing Our Code

Lecture 9: Reviewing the Site’s Structure

Lecture 10: Adding the Navbar Placeholder

Lecture 11: Stubbing the Home Component

Lecture 12: Stubbing the Image Carousel

Lecture 13: Stubbing the Vehicle Browser

Lecture 14: Creating the Footer

Lecture 15: Introduction to React Router

Lecture 16: Working with React Router

Chapter 3: Creating Your Own React ES6 Components

Lecture 1: Reactstrap Overview

Lecture 2: Adding a ReactstrapNavbar

Lecture 3: Changing the Navbar Sample Code

Lecture 4: Adding Font Awesome

Lecture 5: Introduction to React Properties

Lecture 6: Making the Navbar Data-Driven

Lecture 7: Adding an Image Carousel

Lecture 8: Copying the Asset Files

Lecture 9: Using React Router with Properties

Lecture 10: Data-Driven Site Carousel

Lecture 11: Using Layout Components to Build the Vehicle Browser

Lecture 12: Making the Vehicle Browser Data-Driven

Chapter 4: UX Made Easy with Nested Components

Lecture 1: Forms versus Input Groups

Lecture 2: Stubbing the Dealer Locator Component

Lecture 3: Working with Input Groups

Lecture 4: Input Group Events Handlers

Lecture 5: The Table Component

Lecture 6: Working with Lists

Lecture 7: List Items with Badges

Lecture 8: Adding an Inquiry Form – Part 1

Lecture 9: Adding an Inquiry Form – Part 2

Lecture 10: Posting with Axios -Part 1

Lecture 11: Posting with Axios -Part 2

Chapter 5: Building and Publishing Your ES6 React App with Babel

Lecture 1: Create the Vehicle Detail Component – Part 1

Lecture 2: Create the Vehicle Detail Component – Part 2

Lecture 3: The Build and Price Component (Tabs) – Part 1

Lecture 4: The Build and Price Component (Tabs) – Part 2

Lecture 5: Collapsing Media Container – Part 1

Lecture 6: Collapsing Media Container – Part 2

Lecture 7: Pick a Model – Part 1

Lecture 8: Pick a Model – Part 2

Lecture 9: Color Picker

Lecture 10: Engine Picker Dropdown – Part 1

Lecture 11: Engine Picker Dropdown -Part 2

Lecture 12: Modals

Lecture 13: Cleaning Up Warnings

Lecture 14: Production Build and Conclusion