UI framework vs Styled-components to make UI from scratch in React?

Question

I jumped into React recently, so I'm very confused about many things. One of them is about how most of people design UI in React.

Before jumping in, I used Bootstrap to design UI of my website by using pre-made components such as buttons, modal views, navigations, and so on. But, figured out I can't use it anymore in React, but I can use React-Bootstrap instead. Is React-Bootstrap still the most popular UI framework in React as well? I'm asking that because I found some other UI frameworks such as Semantic UI or Material UI for React.

Also, I found styled-components. However, styled-components makes me feel like I need to make every component by myself to use which sounds like taking too long time.

As a very beginner, I'm curious about how people usually work on UI in React?

Answer 1

Firstly, There is no clear answer for the problem. In general purpose of styled-components not mean don't use another ui framework. And the companies solve the problems which is spesific with their Engineering Team. They have their own architecture though. But the alone programmers are choose some open source solutions.

Well, Some people use together or alone. It's totally about your project or your style of architecture. But still i would say some stuffs for giving point of view.

In the other hand; the UI Frameworks are solve modular problems. An example: You cannot create a modal with only css even styled-components. you know, you need JavaScript for that.

To use both:

• You can use on Elements Semantic-UI(ReactJS or direct element with the className),
• You can use styled-components instead of css file for spesific part of your project. As e.g: Main, Aside, Article, Post, TopNavigation etc.
• If you prefer to use the styled-components, also you can use same components in React Native. (There is no css file support for React Native. You'll need inline CSS)
• To use only div instead of the spesific component, you'll confused after project being bigger. I would recommended you to create for each meaningful Element.
• You can combine the open source community UI parts with your own CSS.
• You won't need a CSS(Less, Sass) file when you use styled-components. That's mean, you'll work only on your JS files instead CSS files, so you can do dynamic things in your components. styled-components supports almost all CSS features.

To use standalone Semantic-UI:

I prefer Semantic-UI-React instead of ReactJS bootstrap frameworks.

• You cannot use the CSS of Semantic-UI-React in React Native. You should choose which is another solution or actually make your own your components architecture.
• You are ready to go with every project with Semantic-UI-React for web/mobile site.
• You have to learn basics of less-lang.
• You can change everything from your theme files which variables.

Lastly,

• If you have big project or goal though; nevertheless, i think you should use a UI Framework in learning and adaptive process.
• If you are still not sure what you should do you then, you have to try all of them to find your own architecture.
• I think in learning process, you have to concern about ReactJS needs(Redux, Router etc.) before CSS.

---

It's my first answer at Stackoverflow. Hopefully, the answer will help you for your concern.