O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Hands-On Application Development with React and Bootstrap

Hands-On Application Development with React and Bootstrap

by Bruce M. Van Horn II
Publisher: Packt Publishing
Release Date: January 2019
ISBN: 9781789531381
View table of contents
Start watching

Video Description

Build fluid reactive and responsive web sites with React and Bootstrap

About This Video

  • Create real-time responsive web apps from scratch using the create-react-app tool with Bootstrap
  • Step-by-step, build a site that contains all the most popular Bootstrap 4 UI elements and React, using the ES6 syntax
  • Combine React component architectures and state management with the popular Bootstrap 4 framework and get on the cutting edge of modern web development

In Detail

React is one of the most popular front-end JavaScript library for interactive web applications. Bootstrap 4 is a free HTML, CSS, and JavaScript framework that allows developers to build responsive, mobile-first websites. Integrating Bootstrap with React allows web developers to write much cleaner code, thus reducing the time spent on the frontend. In this course, the author, Bruce Van Horn, will help you gain a thorough understanding of the Bootstrap framework and will show you how to build impressive web apps. You will build a website with UI elements such as image galleries and custom pricing/shopping tools along with Bruce. He will show you how to use HTML, ES6, CSS, React, and Bootstrap 4 to build your own dynamic website.

By the end of the course, you will be able to build real-time responsive web apps using React and Bootstrap and will have learned to use the ES6 Syntax.

All the code and supporting files for this course are available at https://github.com/PacktPublishing/Hands-on-Application-Development-with-React-and-Bootstrap

Downloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Chapter 1 : Getting Started With Create-React-App
    1. Course Overview 00:01:33
    2. Prerequisites and Software 00:03:48
    3. Exercise Files 00:02:00
    4. Previewing the Finished App 00:07:19
  2. Chapter 2 : Laying the Foundation: Building Out the Navigation
    1. Install and Run Create-React-App 00:07:09
    2. Introduction to JSON Server 00:08:07
    3. Using Faker to Generate Random Test Data 00:07:24
    4. React Component State 00:04:25
    5. React’s Component Life Cycle 00:08:39
    6. Creating a React Component with ES6 00:09:04
    7. Fetching Data with Axios 00:09:19
    8. Testing Our Code 00:03:02
    9. Reviewing the Site’s Structure 00:02:42
    10. Adding the Navbar Placeholder 00:05:32
    11. Stubbing the Home Component 00:05:04
    12. Stubbing the Image Carousel 00:06:12
    13. Stubbing the Vehicle Browser 00:05:47
    14. Creating the Footer 00:07:45
    15. Introduction to React Router 00:04:26
    16. Working with React Router 00:06:24
  3. Chapter 3 : Creating Your Own React ES6 Components
    1. Reactstrap Overview 00:06:56
    2. Adding a ReactstrapNavbar 00:09:20
    3. Changing the Navbar Sample Code 00:04:23
    4. Adding Font Awesome 00:09:05
    5. Introduction to React Properties 00:04:19
    6. Making the Navbar Data-Driven 00:10:19
    7. Adding an Image Carousel 00:03:07
    8. Copying the Asset Files 00:02:09
    9. Using React Router with Properties 00:06:03
    10. Data-Driven Site Carousel 00:07:13
    11. Using Layout Components to Build the Vehicle Browser 00:10:18
    12. Making the Vehicle Browser Data-Driven 00:11:58
  4. Chapter 4 : UX Made Easy with Nested Components
    1. Forms versus Input Groups 00:02:23
    2. Stubbing the Dealer Locator Component 00:10:57
    3. Working with Input Groups 00:08:44
    4. Input Group Events Handlers 00:05:19
    5. The Table Component 00:11:20
    6. Working with Lists 00:10:16
    7. List Items with Badges 00:09:19
    8. Adding an Inquiry Form - Part 1 00:04:34
    9. Adding an Inquiry Form - Part 2 00:11:00
    10. Posting with Axios -Part 1 00:06:18
    11. Posting with Axios -Part 2 00:09:11
  5. Chapter 5 : Building and Publishing Your ES6 React App with Babel
    1. Create the Vehicle Detail Component - Part 1 00:08:38
    2. Create the Vehicle Detail Component - Part 2 00:06:25
    3. The Build and Price Component (Tabs) - Part 1 00:09:03
    4. The Build and Price Component (Tabs) - Part 2 00:06:45
    5. Collapsing Media Container - Part 1 00:09:13
    6. Collapsing Media Container - Part 2 00:06:50
    7. Pick a Model - Part 1 00:09:05
    8. Pick a Model - Part 2 00:06:20
    9. Color Picker 00:22:01
    10. Engine Picker Dropdown - Part 1 00:05:49
    11. Engine Picker Dropdown -Part 2 00:12:42
    12. Modals 00:08:39
    13. Cleaning Up Warnings 00:03:31
    14. Production Build and Conclusion 00:08:15