Building a React Component with Bootstrap
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
9 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Building a React Component with Bootstrap to your Wishlist.

Add to Wishlist

Building a React Component with Bootstrap

Optimize your websites and applications with React and Bootstrap
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
9 students enrolled
Created by Packt Publishing
Last updated 6/2017
Current price: $10 Original price: $125 Discount: 92% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Integrate Bootstrap with React
  • Easily interact with DOM on your web browser
  • Appreciate the advantages of using JSX
View Curriculum
  • A basic knowledge of any JavaScript MVC framework would also be helpful.

Bootstrap is one of the most popular front-end frameworks, and integrating it with React allows web developers to write much cleaner code. This video helps you gain a thorough understanding of the Bootstrap framework and shows you how to build impressive web apps. In this video, you will get an overview of the features of Bootstrap and ReactJS, along with the integration of React-Bootstrap components with ReactJS. You will understand the benefits of using JSX and the Redux architecture. The server-side rendering of React will also be shown.

All the concepts are explained by developing real-world examples. By the end of this video, you will be equipped to create responsive web applications using Bootstrap style and React-Bootstrap components with ReactJS, and will have an insight into appropriate best practices.

About the Authors

Harmeet Singh is a senior UI developer working for CIGNEX Datamatics with varied experience in UI. He hails from the holy city of Amritsar, India. His expertise includes HTML5, JavaScript, jQuery, Angular JS, and Node.js. His interests include music, sports, dancing, and adventure. Harmeet has given various presentations and conducted many workshops on UI development. On the academic front, Harmeet is a graduate in IT, and is a GNIIT diploma holder from NIIT, specializing in software engineering.

Mehul Bhatt has over 11 years of experience and serves as a user experience (UX) & user interface (UI) practice manager at CIGNEX Datamatics. As a manager, he handles a wide range of onshore and offshore teams. He hails from the princely state of Jamnagar, Gujarat, India. His expertise includes HTML5, CSS3, JavaScript, jQuery, application development, guiding and mentoring developers, and more, which helps clients to take their business to the next level in the open market.

Mehul has also won many awards for his excellence. His interests include learning new technologies, music, drama, sports, and exploring new places.

Mehul is Microsoft certified in HTML, CSS, and JavaScript. On the academic front, he holds a post graduate diploma in multimedia, specialized in web development, which gives him the skills to understand customer requirements and excel in the execution of the required performance with the best code quality standards.

He can be reached on Skype at mehul_multimedia.

Who is the target audience?
  • This video is for anybody who is interested in modern web development and has an intermediate-level knowledge of HTML, CSS, and JavaScript.
Compare to Other Bootstrap Courses
Curriculum For This Course
22 Lectures
Getting Started with React and Bootstrap
4 Lectures 15:33

This video gives an overview of the entire course.

Preview 02:40

Learn about ReactJS and set up the environment for creating an application.

Setting Up the Environment

The ability to install ReactJS and Bootstrap to build user-interface components.

Installing ReactJS and Bootstrap

Design one static login form and make your app a responsive grid system for different mobile devices’ static login form.

Static Form with React and Bootstrap
Building a Responsive Theme with React-Bootstrap and React
5 Lectures 18:58

The ability to use React-Bootstrap JS in which we have a collection of Bootstrap components rebuilt for React.

Preview 03:36

Reimplement of the bootstrap frontend reusable components in React.


The ability to create a two-column layout for the main content area and sidebar in our application to cover the whole area.

Bootstrap Grid System

Learn to include a few helper classes that we can use to adapt our layout.

Helper Classes

The ability to update and render your components when data changes.

React Components
6 Lectures 21:04

Ability to observe the syntax or structure of JSX.

Preview 02:33

Learn to provide a simple syntax structure, which is visually similar to a HTML structure.

Acquaintance or Understanding

The ability to use namespace in React using JSX namespace pattern.

Namespace Components

Learn to execute a script or written function in JSXTransformer.

JSX Transformer

The ability to allocate the value of the displayStyle JavaScript variable to the element's style attributes.

JavaScript Expressions

Learn to change the value of a form input using the value attribute.

Example of a Dynamic Form with JSX
DOM Interaction with ReactJS
3 Lectures 14:40

The ability to translate your raw data into Rich HTML.

Preview 06:12

The ability to add some advanced features in our Add Ticket form to display the tickets on the UI.

Getting the Form Values on Submit

Learn to provide some helper classes to give you a better user experience.

Bootstrap Helper Classes
jQuery Bootstrap Component with React
4 Lectures 12:57

The ability to build a responsive theme with React-Bootstrap and React.

Preview 03:13

Learn about various life cycle components.

Component Lifecycle Methods

Learn about the alert message and have a brief knowledge of close handler function.

Component Integration

The ability to inject to display an alert on every event fired.

Bootstrap Modal
About the Instructor
Packt Publishing
3.9 Average rating
8,197 Reviews
58,910 Students
687 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.