Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Hands-On Application Development with React and Bootstrap
  • Table Of Contents Toc
  • Feedback & Rating feedback
Hands-On Application Development with React and Bootstrap

Hands-On Application Development with React and Bootstrap

By : Bruce M. Van Horn II
Buy this Video
close
close
Hands-On Application Development with React and Bootstrap

Hands-On Application Development with React and Bootstrap

By: Bruce M. Van Horn II
Buy this Video

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
Table of Contents (5 chapters)
close
close
close
1
Getting Started With Create-React-App
Icon
Course Overview
Icon
Prerequisites and Software
Icon
Exercise Files
Icon
Previewing the Finished App
2
Laying the Foundation: Building Out the Navigation
chevron up
Icon
Install and Run Create-React-App
Icon
Introduction to JSON Server
Icon
Using Faker to Generate Random Test Data
Icon
React Component State
Icon
React’s Component Life Cycle
Icon
Creating a React Component with ES6
Icon
Fetching Data with Axios
Icon
Testing Our Code
Icon
Reviewing the Site’s Structure
Icon
Adding the Navbar Placeholder
Icon
Stubbing the Home Component
Icon
Stubbing the Image Carousel
Icon
Stubbing the Vehicle Browser
Icon
Creating the Footer
Icon
Introduction to React Router
Icon
Working with React Router
3
Creating Your Own React ES6 Components
Icon
Reactstrap Overview
Icon
Adding a ReactstrapNavbar
Icon
Changing the Navbar Sample Code
Icon
Adding Font Awesome
Icon
Introduction to React Properties
Icon
Making the Navbar Data-Driven
Icon
Adding an Image Carousel
Icon
Copying the Asset Files
Icon
Using React Router with Properties
Icon
Data-Driven Site Carousel
Icon
Using Layout Components to Build the Vehicle Browser
Icon
Making the Vehicle Browser Data-Driven
4
UX Made Easy with Nested Components
Icon
Forms versus Input Groups
Icon
Stubbing the Dealer Locator Component
Icon
Working with Input Groups
Icon
Input Group Events Handlers
Icon
The Table Component
Icon
Working with Lists
Icon
List Items with Badges
Icon
Adding an Inquiry Form – Part 1
Icon
Adding an Inquiry Form – Part 2
Icon
Posting with Axios –Part 1
Icon
Posting with Axios –Part 2
5
Building and Publishing Your ES6 React App with Babel
Icon
Create the Vehicle Detail Component – Part 1
Icon
Create the Vehicle Detail Component – Part 2
Icon
The Build and Price Component (Tabs) – Part 1
Icon
The Build and Price Component (Tabs) – Part 2
Icon
Collapsing Media Container – Part 1
Icon
Collapsing Media Container – Part 2
Icon
Pick a Model – Part 1
Icon
Pick a Model – Part 2
Icon
Color Picker
Icon
Engine Picker Dropdown – Part 1
Icon
Engine Picker Dropdown –Part 2
Icon
Modals
Icon
Cleaning Up Warnings
Icon
Production Build and Conclusion
You're currently viewing a free sample. Access the full title and Packt library for free now with a free trial.
Chapter: 2
Laying the Foundation: Building Out the Navigation
Icon This video is locked
Icon
Icon
0:00
2.0x
1.5x
1.25x
1.0x
0.5x
caption settings
caption off
Icon Icon
ShowHide Transcripts Icon
Section: 2
Introduction to JSON Server
We need a way where we can develop and test our data-driven application, but we don’t have time to build a back-end. - Install json-serverglobally if you didn’t in Section 1 - Copy the data files from the exercise assets folder into your app - Run JSON server and specify the port
Visually different images
CONTINUE WATCHING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Hands-On Application Development with React and Bootstrap
End of Section 2
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon