I am just getting started with react and had a question regarding some of the UI libraries built for react.
Is it possible to include components from different libraries in my react project? For instance can I include a modal from bootstrap-react and a data table from semantic-ui-react? I believe this is possible, but are there any performance issues when doing this? Has anyone had any experience as such?
Any comments would be very helpful.
Thanks
Disclaimer: I have no personal experience of using components from multiple UI libraries in one project.
You can include components from multiple UI libraries as long as the components don't conflict (e.g., use of same CSS selectors with different expectations). There should not be a major performance impact due to using two UI libraries. After all, the UI libraries just manipulate the virtual DOM, like any React component.
Generally speaking, I would recommend against the use of multiple UI libraries in one project. By using one library only, you get consistent look and behavior, and you need to learn to master only one library, which likely makes you more productive.
Related
I was writing an application with MaterialUI components and have a lot of things so far. Then I found this great landing page/welcome page Landy that uses Antd, still, it would be the easiest for me to just use it.
Is there any problem with using two different design tools in one project? Does it make the website heavy? Can I optimize it somehow or should I migrate slowly to one of them?
don't worry about that, likely you have webpack , rollup, or any other tool that will execute a tree shaking for you so it will only import the used part and not the whole lib
Yeah it is ok to use as many libraries you want, but using too many libraries will make your code heavier, so it is recommended to use only 1 UI library
Yes, It is ok to use multiple frameworks in a single app. You can use antd or material-ui components with their import statement. Nothing to conflict each others.
I'm impressed by airframe and would be happy to implement a similar design for my website (using react). Naturally, using their components and styles it seemed easy. But it's not like react ui library, it's fully implemented demo website you edit for yourself.
It seems to be very hard to delete/edit things to get what I need than to implement from scratch... Also, I'll have a lot of code written with not my style, lots of redundant components and dependencies, foreign build system, you need to support lots of components, even basic, etc. How do you use templates?
My understanding of the vital difference between a library and a framework is whether my application code uses the package code or the package runs my application code - otherwise called "inversion of control".
It makes sense that react is a UI library since I can create a DOM interface (its representation).
But when I want to render it using react-dom, my application can only trigger a render (by calling ReactDOM.render(), state updates or forced updates) but it is upto react-dom to decide when to render it.
Since react-dom takes up the responsibility to render the UI, does it qualify as a framework? And if not, please give an explanation so I can clear my understanding of the topic.
PS: Perhaps SO is not the best place for this question. If you know a better on, do let me know.
ReactDom is not both of a library and a framework. A single piece of code or method cannot be considered as a library or framework. To be a library it contains many methods and to be a framework it contains many library.
So, you'll need to understand what is library and framework? And if you have a question on react itself as if it's a library or framework, then read these blogs: medium and dev.to - you'll find it stating react is a library.
But I would say it is a framework because it includes many library. And many other blogs indicates it as a framework as well. To conclude, this is huge opinion based result for what you understand it as a library or a framework.
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?
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.
I'm pretty new to development. Right now working on an webapp in my freetime.
Backend will be written in Python (here I have the best experience).
How good is the Idea to mixing React components:
like: https://github.com/brillout/awesome-react-components
My Idea was to use these components or let others create components for me (for example a slide show or whatever)
The question is, is this a good Idea? I'm worry that this might create a lot of overhead. For example one component is based on bootstrap and the other on foundation (As I said I'm not experienced web developer and can't judge if this can actualy really happen).
Thanks!
The idea of React components is to have the smallest piece of code you can define.
However, mixing different CSS frameworks, like Bootstrap or Foundation doesn't sound like the best idea. You can, of course mix ready-made components (like React-Bootstrap) with your own custom components, but ideally you would choose one framework and stick with it.
The good thing about React is that you can possibly switch between Frameworks without the need of refactoring everything.
Let's say, for instance, you have a custom component called Slider. If you later decide to use MaterialUI, depending on your configurations, you could just change the import from import Slider from "./Slider" to import Slider from "material-ui/Slider" and the rest of your code would be untouched.
Pick a CSS / UI framework and stick with it. These days I have been working with Semantic UI and they have good integration with React via http://react.semantic-ui.com/
It is awesome! :)
And in addition to that, you can also build your own custom components.
If you think adding a whole framework to your project is a lot of burden, then you can make everything your own from scratch. (Either (1) using the CSS framework classes for the components or (2) defining your own CSS classes)
And to conclude I also agree to not mix CSS frameworks as there might be conflicts! It's not fun! In my project, Bootstrap was conflicting with Semantic UI, so I just stuck with the latter.