Book Image

Hands-On Application Development with React and Bootstrap [Video]

By : Content4 LLC
Book Image

Hands-On Application Development with React and Bootstrap [Video]

By: Content4 LLC

Overview of this book

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

Related Content you might be interested in

Current Title:

Small book image
Hands-On Application Development with React and Bootstrap [Video]
Content4 LLC
Jan, 2019 | 6 hours 53 minutes
No titles found
Table of Contents (5 chapters)
Free Chapter
1
Getting Started With Create-React-App
Course Overview
Prerequisites and Software
Exercise Files
Previewing the Finished App
2
Laying the Foundation: Building Out the Navigation
Install and Run Create-React-App
Introduction to JSON Server
Using Faker to Generate Random Test Data
React Component State
React’s Component Life Cycle
Creating a React Component with ES6
Fetching Data with Axios
Testing Our Code
Reviewing the Site’s Structure
Adding the Navbar Placeholder
Stubbing the Home Component
Stubbing the Image Carousel
Stubbing the Vehicle Browser
Creating the Footer
Introduction to React Router
Working with React Router
3
Creating Your Own React ES6 Components
Reactstrap Overview
Adding a ReactstrapNavbar
Changing the Navbar Sample Code
Adding Font Awesome
Introduction to React Properties
Making the Navbar Data-Driven
Adding an Image Carousel
Copying the Asset Files
Using React Router with Properties
Data-Driven Site Carousel
Using Layout Components to Build the Vehicle Browser
Making the Vehicle Browser Data-Driven
4
UX Made Easy with Nested Components
Forms versus Input Groups
Stubbing the Dealer Locator Component
Working with Input Groups
Input Group Events Handlers
The Table Component
Working with Lists
List Items with Badges
Adding an Inquiry Form – Part 1
Adding an Inquiry Form – Part 2
Posting with Axios –Part 1
Posting with Axios –Part 2
5
Building and Publishing Your ES6 React App with Babel
Create the Vehicle Detail Component – Part 1
Create the Vehicle Detail Component – Part 2
The Build and Price Component (Tabs) – Part 1
The Build and Price Component (Tabs) – Part 2
Collapsing Media Container – Part 1
Collapsing Media Container – Part 2
Pick a Model – Part 1
Pick a Model – Part 2
Color Picker
Engine Picker Dropdown – Part 1
Engine Picker Dropdown –Part 2
Modals
Cleaning Up Warnings
Production Build and Conclusion
Chapter 4
UX Made Easy with Nested Components
Content Locked
Section 3
Working with Input Groups
We’d like to use a “fancy” text box component for our search that includes a button with an icon. - Review the code sample on the reactstrap site - Copy the markup needed to make our “fancy” text box - Alter the mark-up to suit our requirements
Previous Section
End of Section 3
Next Section