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
- Chapter 1 : Getting Started With Create-React-App
-
Chapter 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
-
Chapter 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
- Chapter 4 : UX Made Easy with Nested Components
-
Chapter 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
Product information
- Title: Hands-On Application Development with React and Bootstrap
- Author(s):
- Release date: January 2019
- Publisher(s): Packt Publishing
- ISBN: 9781789531381
You might also like
video
MERN Stack Front To Back: Full Stack React, Redux and Node.js
Build and deploy a social network with Node.js, Express, React, Redux and MongoDB. Learn how to …
video
CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox)
Work through real-world projects and learn how to create modern, responsive websites using CSS Grid and …
video
Learning React
Build beautiful, modern, and modularized UIs with React’s latest version About This Video Understand the core …
video
Docker for the Absolute Beginner - Hands-On
Learn Docker with Hands-On Coding Exercises About This Video The course introduces Docker and its key …