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 5
Building and Publishing Your ES6 React App with Babel
Content Locked
Section 14
Production Build and Conclusion
Since our project is written in ES6, and because not every browser supports all of ES6 yet, we need a way to generate a minified and optimized version of our site for consumption by a wide audience. - Open the terminal - Run the build command - Examine the build file that is generated
Previous Section
End of Chapter 5
Next Chapter