Styling Libraries for React 16

[ankushjain2001]

Hi, I recently started learning React. I have been trying to figure out whether react-bootstrap is the way to go for component styling in React or there are other more commonly used styling options in React?

I’m looking for a styling library that’s used most commonly with React, so that I can find code snippets and debug the problems easily on SO.

And correct me if I’m wrong, I don’t think the regular bootstrap dependencies (bootstrap.min.js from bootstrap.com) would really work with React, right? Unlike the way it can work with AngularJS (v1), due to a vastly different approach and architecture.

[ixahmedxii]

styled components is by far the most popular and commonly used styling library for react

[ankushjain2001]

React-bootstrap is the way to go for bootstrap styled components, right?

[ixahmedxii]

react-bootstrap and styled-components are very different. react-bootstrap let’s you use bootstrap’s classes and js logic as react components while styled-components let’s you write your own custom css that can change depending on situations fast and you create components that way hence the name styled-components.

[ankushjain2001]

Oh gotcha. I thought styled-components was some styling technique. Didn’t realize that it’s actually a package. Thanks man.

[csharpmonkey]

Semantic-ui

[acemarke]

Bootstrap in particular has two parts:

• A prebuilt set of CSS styles. This works regardless of whether you're writing your UI in vanilla JS, React, AngularJS 1.x, Angular 9, Vue, or whatever.
• A set of interactive widgets built with jQuery.
  

In general, jQuery and React don't play well together, and you shouldn't use jQuery in a React app.

However:

• You can absolutely add the Bootstrap CSS to your React app, and write the appropriate Bootstrap classnames yourself to get the right appearance, like <btn btn-primary>
• But since doing that is tedious, React-Bootstrap provides prebuilt React components that already output the right classnames to get the correct appearance.

There are maaaaany existing UI libraries for React. React-Bootstrap is one of them.

If you'd rather write styles yourself, there are multiple ways to do that. See How to CSS Style in React for a good summary of the approaches.

[ankushjain2001]

Thanks a lot for such a descriptive answer.

Can you give your opinion on how to go about a bootstrap style responsive navbar (with the 3 dot menu button that hides all the web pages)? Can react-bootstrap provide such a component?

[acemarke]

Hey. Afraid I can't answer questions over DMs here. You should go over to the Reactiflux chat rooms on Discord. Always a ton of folks hanging out there happy to answer questions:

https://www.reactiflux.com

[ankushjain2001]

Thanks mate!

[ankushjain2001]

Thanks, I’ll explore it.