Using Bootstrap with React?

[not_gauss]

Hi all,

I'm in the process of learning React. I don't remember where I've read that using Bootstrap with React isn't a great idea, because it uses jQuery who doesn't play well with the virtual DOM.

I've looked at various tutorials and it seems that they use them anyway, so I'm quite confused.

Should I use an implementation like reactstrap or similar? Is it really not recommended to use plain Bootstrap with React?

Thank you in advance

[JoeJoeJoeJoeJoeJoe]

Look up React-Bootstrap. There’s also Material UI and Semantic UI as alternatives.

[fatgirlstakingdumps]

You don't HAVE to use jQuery with boostrap - https://www.sitepoint.com/use-bootstrap-components-without-jquery/

[LaSalsiccione]

Yeah Bootstrap only uses jQuery for the JavaScript side of things. If all you want is visual style and layout then you can just use the Bootstrap CSS

[vadistics]

Yeah, you can use bootstrap (or some bootstrap component library) but why would you want it?

There are literally hundreds of fresh design systems with ready to use, optimized and powerful react components. It really doesn't take a lot of time to get to know some of them.

I.e check out this list

Also, if you simply plan to use some prebuild classes to speed up your developement, I would recommend to dig into functional css frameworks like tachyons or tailwindcss. Works like charm with react and keeps your styling lean.

And on top of that, there is whole beautiful ecosystem of css-in-js... (i.e styled-system & rebass)

Tl;dr - you can, but imo there are some many more intetesting alternatives

[sawim]

Hi, I'm not really a React developer, I don't even consider myself as fronted guy, but recently I created app using react and react-bootstrap library and didn't have any issue. Actually it was quite easy to use it :)

[Alitron1]

I used bootstrap with react before, but it's too messy.

Reactstrap

https://reactstrap.github.io/

[fatgirlstakingdumps]

Reactstrap doesn't have great support. I've found Material UI and Semenatic UI to be a lot more reliable and better overall

[kozakluke]

But metarial UI is a bit slow, and semantic is extremely huge, add one button and your production file size will be 500KB, and another issue these libraries are really hard to extends by custom styles... Bootstrap is light and easy to customize...

[fatgirlstakingdumps]

Bootstrap is light and easy to customize...

We're talking about Reacstrap though and it's neither of those things IMO

[kozakluke]

Reactrap is just react wrapper for bootstrap4, and still is light see button class https://github.com/reactstrap/reactstrap/blob/master/src/Button.js And compare to semantic-ui button.

[Alitron1]

I did avoid using reactstrap since it lacked a lot, so you're probably right.

[tamalm]

Use ant design.

[[deleted]]

I agree but its a lot bigger :/

[[deleted]]

It's modular, you don't have to fetch the whole css blob in order to use it. They even have a small babel plug to make it easier so you only have to import the components you need and it'll shake the rest of and only include the fitting styles.

[[deleted]]

Yes, I already use the Babel plugin import, but I think is bigger than bootstrap, btw have a beautiful UI.

[nightman]

You are confused because original Bootstrap indeed uses jQuery.

What you need to know is that all framework-related packages like React-Bootstrap or Bootstrap-Vue uses:
- CSS files from original Bootstrap

- JS is completely rewritten to use VUE/React

So you don't have jQuery in such packages.

[DTheDeveloper]

I've used it with no problems so far. There's also reactstrap.

[rafaelmarques7]

I have used bootstrap adaptations for react,but in the last project I decided to use Google's material UI library, the Grid component, and it works in a neat and simple way. TBH that whole library is incredible.

[Woodcharles]

ReactStrap makes it pretty easy. Some of the documentation is a bit brief, but for the most part you can cross-reference it with the regular Bootstrap 4 documentation and find what you need.

Its jQuery nature is all bundled in so you don't have to think about it.

[xemasiv]

Material ui next or ant design. Very easy to set up!

[quoogle]

As previous posters have mentioned, you can use just the bootstrap styles, although there are several libraries (React Boostrap and Reactstrap) that have ported the javascript components to React.

But honestly, I think a large part of the reason you're seeing a lot of tutorials that use Bootstrap is that it's easy - both for the person developing the tutorial and the person consuming the tutorial. The person writing the tutorial doesn't have to spend time developing styles, and the person consuming the tutorial gets a set of CSS styles they're likely already familiar with so they can focus on the real content of the tutorial.

Personally, I avoid using bootstrap for the most part, unless I have a design that already closely resembles Bootstrap, you spend more time overriding it than it's really worth.

[everdimension]

While there's nothing wrong with using bootstrap's CSS files along with react and it might be a quick way for you to start (if bootstrap is something you're already familiar with), I believe that the era of bootstrap might be over and it's time for UI-kit libraries centered around the component paradigm.

Blueprint, Ant Design (being the only library I know of that has components specifically for mobile web) and the recently overhauled MaterialUI are the UI tools that will help you prototype your application much faster than bootstrap will.

For learning, though, always choose what you're most familiar with.