I'm developing an app using react js. I just want to ask your opinion. Is it redundant to use MUI Component and React Bootstrap at the same time?
There's nothing stopping you from using both MUI and Bootstrap in your project but either one should be able to meet all your design requirements.
But in choosing both you would have to keep in mind two very different approaches to design. The MUI implementation varies quite a bit from React Bootstrap. Not sure what you are going for here, but in a very general sense I would stick with one for my project/purpose.
(Personally I prefer MUI)
I think both libraries are great, but generally the approach is to pick one to keep less dependencies in your package.json file. You have to keep single approach when it comes to styling for two reasons:
Consistency
Whoever reads your codebase will be able to comprehend easily.
P.S: I prefer MUI, you can customize your own design system by overriding MUI default theme
No, it's not redundant for your project. The amount of work that's been put into Material UI makes it a feasible choice for professional projects.
Also, if you are worried about libraries taking more bundle size then as per the Material UI documentation, you can reduce bundle size by importing your components in the following way: let's say you want the button component, so you import it like this import Button from '#material-ui/core/Button', instead of this import { Button } from '#material-ui/core'. With the former import you'll be importing the Button module only and leaving the rest of the modules alone. For further detail, visit this link: https://v3.material-ui.com/guides/minimizing-bundle-size/.
Hope you find this answer satisfactory!
Usually you pick one widgets library, but if you miss some components you can mix them too. According to mui documentation every component is self contained:
https://mui.com/material-ui/getting-started/usage/
If you are worried about inconsistencies in your widgets, mui now offers unstyled components as a standalone package:
https://mui.com/base/getting-started/overview/
For react-bootstrap the components can be customized in many ways, especially over global customization via sass variables:
https://react-bootstrap.github.io/getting-started/introduction/#installation
I wouldn't worry too much about dependencies as you usually have so many of them anyway and install new package for every use case.
In my current project for example I have react-bootstrap as the main UI-lib, but it has no date pickers nativly. So after a research I picked up the mui datepickers.
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 am building my first react website, and i wanted to ask what the best practice is when it comes to styling. Does it make more sense to make a different stylesheet for each component or it makes more sense to have the styles for all components in a single stylesheet.
It is best practice to have a common style sheet - styles used between components. In addition, anything component specific I would have in it's own style sheet to avoid polluting your shared style sheet.
From the official docs:
React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate *.css file as usual and refer to them using className.
For a review of React styling methods, take a look at this (slightly older) presentation by Max Stoiber - Styling React.JS applications. It's a couple of years old but worth a look.
CSS-in-JS has been the most appealing to me. There are numerous techniques/packages, so here is a useful comparison.
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.
I find that there are 2 UI components for React Native which are mostly used. I want to use one of them. Which one of them is more easy to use and customizable ?
Currently, there are 3 main UI libraries:
Shoutem UI Components
React Native Elements
Native Base components
Shoutem UI components are actually only one part of Shoutem UI Toolkit, which includes:
UI components - customizable set of components for RN applications
Theme - style your RN components on one place
Animation - set of declarative animations
UI components come with the predefined beautiful design, so creating good looking applications is as easy as simply c/p-ing the component's code. However, they can be fully customized with a theme from one place, so you can achieve the separation of concerns for your components. Animations can be used in similar matter, too.
To see which kind of UI components are there, include <Examples> components in your screen, as described here.
React Native Elements simplify the usage of common components in React Native. Native Base does that too, allows you to customize them and has a better documentation than React Native Elements.
Disclaimer: I work at Shoutem
All the above three libraries are good and serve their own purposes. It totally depends once after you use all of these.
NativeBase is a mobile application development framework; builds a layer on top of React Native that provides you with basic set of components for mobile application development which helps you to develop world-class application experiences on native platforms.
NativeBase gives you the potential of building applications that run on iOS and Android using a single codebase. It eases out your development.
Since NativeBase is built on top of React Native, hence with any component you can pass the style property which will be merged to the default style of that component. This also goes with the callback events. Highly customizable with the theme from one place.
All this is neatly documented by NativeBase. Docs of NativeBase gives you complete information about its usage with sample output, its replacing React Native element, how to style each component, how to customize theme for each component, many more.
Also that NativeBase is being rewritten to enhance its ease of use. To be released very soon.
Go ahead and try NativeBase!
Checkout the working demonstration of NativeBase components in one single kit NativeBase-KitchenSink.
Disclaimer: I work at NativeBase
Both are excellent. Shoutem has some pretty cool animation transitions. You can't go wrong with either. My advice is to review each and pick the one that either feels more right or matches your requirements best.
And don't forget to check out React Native Elements too
You can either use NativeBase or Shoutem UI. Both are slightly different than each other. NativeBase is designed over platform recommendations and inspired by Ionic whereas Shoutem has it's own fluent and clean design.
I've played around with native-base and Shoutem UI. Both of them fully customized.
I like Shoutem than the other because it has more feature, animation, extension, builder, etc. But unfortunately, Shoutem UI currently doesn't support the latest react-native (>0.40) and expo(> 15.0). So I hold my plan to use this for production.
I think this is because the latest RN deprecated NavigationExperimental and
Expo SDK use react-native-svg >= 5.2.0. CMIIW