Hands-On Application Development with React and Bootstrap

Hands-On Application Development with React and Bootstrap

by Bruce M. Van Horn II
Released January 2019
Publisher(s): Packt Publishing
ISBN: 9781789531381

Explore a preview version of Hands-On Application Development with React and Bootstrap right now.

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from 200+ publishers.

Start your free trial

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
    2. Prerequisites and Software
    3. Exercise Files
    4. Previewing the Finished App
  2. Chapter 2 : Laying the Foundation: Building Out the Navigation
    1. Install and Run Create-React-App
    2. Introduction to JSON Server
    3. Using Faker to Generate Random Test Data
    4. React Component State
    5. React’s Component Life Cycle
    6. Creating a React Component with ES6
    7. Fetching Data with Axios
    8. Testing Our Code
    9. Reviewing the Site’s Structure
    10. Adding the Navbar Placeholder
    11. Stubbing the Home Component
    12. Stubbing the Image Carousel
    13. Stubbing the Vehicle Browser
    14. Creating the Footer
    15. Introduction to React Router
    16. Working with React Router
  3. Chapter 3 : Creating Your Own React ES6 Components
    1. Reactstrap Overview
    2. Adding a ReactstrapNavbar
    3. Changing the Navbar Sample Code
    4. Adding Font Awesome
    5. Introduction to React Properties
    6. Making the Navbar Data-Driven
    7. Adding an Image Carousel
    8. Copying the Asset Files
    9. Using React Router with Properties
    10. Data-Driven Site Carousel
    11. Using Layout Components to Build the Vehicle Browser
    12. Making the Vehicle Browser Data-Driven
  4. Chapter 4 : UX Made Easy with Nested Components
    1. Forms versus Input Groups
    2. Stubbing the Dealer Locator Component
    3. Working with Input Groups
    4. Input Group Events Handlers
    5. The Table Component
    6. Working with Lists
    7. List Items with Badges
    8. Adding an Inquiry Form - Part 1
    9. Adding an Inquiry Form - Part 2
    10. Posting with Axios -Part 1
    11. Posting with Axios -Part 2
  5. Chapter 5 : Building and Publishing Your ES6 React App with Babel
    1. Create the Vehicle Detail Component - Part 1
    2. Create the Vehicle Detail Component - Part 2
    3. The Build and Price Component (Tabs) - Part 1
    4. The Build and Price Component (Tabs) - Part 2
    5. Collapsing Media Container - Part 1
    6. Collapsing Media Container - Part 2
    7. Pick a Model - Part 1
    8. Pick a Model - Part 2
    9. Color Picker
    10. Engine Picker Dropdown - Part 1
    11. Engine Picker Dropdown -Part 2
    12. Modals
    13. Cleaning Up Warnings
    14. Production Build and Conclusion

Product information

  • Title: Hands-On Application Development with React and Bootstrap
  • Author(s): Bruce M. Van Horn II
  • Release date: January 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781789531381