Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can we use pure Bootstrap with React.js?

I would like to convert websites from PSD prototype to HTML/CSS/Bootstrap and then move on to JavaScript development and using React.js and some JavaScript coding.

Is it possible to use pure Bootstrap with React.js without using React-Bootstrap?

Also is it possible HTML/CSS Freelancer to do React-Bootstrap as a mockup only and then find a JavaScript developer to do the advance work like React.js and JS development?

I would like to develop app for Desktop using Electron and Hybrid App using same code base as possible.

like image 588
I'll-Be-Back Avatar asked Jun 24 '16 14:06

I'll-Be-Back


People also ask

Can you use regular Bootstrap With React?

Bootstrap can be used directly on elements and components in your React app by applying the built-in classes as you would any other class.

Is React Bootstrap same as Bootstrap?

React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery. As one of the oldest React libraries, React-Bootstrap has evolved and grown alongside React, making it an excellent choice as your UI foundation.

Is Bootstrap or ReactJS better?

Bootstrap vs React Comparison at a Glance. While React is known for enhancing user experience by loading web pages faster, Bootstrap helps to build mobile-friendly websites, CSS designing, HTML layouts, and JavaScript functions perform well.


1 Answers

In theory, yes. Since ReactComponent render themselves as html, you can just put the right css classes and there you go. That's totally fine for the css part of bootstrap.

BUT, all the javascript stuff done by the bootstrap library that modify the DOM will be in "conflict" with the virtual DOM of React. One way to avoid that is to never rerender a react component for which its inner html is modified by bootstrap (by setting shouldComponentUpdate() { return false }). Doing this way, you can think of React as just a template library to generate some HTML markup, and letting bootstrap actively modify this markup for you but's it's not what React is made for.

The whole point of React is the ability to see your UI as a function of your state : view = f(state) at any given moment. That's why react-bootstrap reimplements all DOM modifications in a React way.

like image 128
Pierre Criulanscy Avatar answered Sep 18 '22 01:09

Pierre Criulanscy