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?
Related
I'm a new developer with about six months of experience in the backend side, some months ago I started a company with a business partner, we are developing a business intelligence solution, since then we was working at the back-end part, I have started at the front-end world about 1 month ago, I did a React course where I learned router, redux saga, hooks and other things as styled-components. Our intention is to recreate the front-end part of the system which current is a MVP did by one freelancer.
As I do not have any experience at the frontend, we are planning to use some React theme, this way we decrease the chance of doing wrong decisions during the development of the pages, as in the architecture side.
I'm searching for a dashboard theme based in React which I can edit to our needs, after talk with some friends with more experience, we decided build the pages using pure CSS together with styled-components because I'm a little familiar with it (at the React course I did some exercises with React and styled-components), also because it is easy to use, easy to future developers maintain, also for faster development, as will not need to create a design pattern from scratch and also some front-end developers told me they develop faster in pure CSS in comparison to use some UI framework. Also a reason to do not use UI frameworks is because our costumers use the solution more from mobile than desktop, then soon we will need to create the an app with React Native and styled-components are compatible with it, and Material UI and Bootstrap frameworks that are the most famous framework are not by compatible with React Native by default according the research I did.
The problem is I'm not finding a dashboard theme without UI framework, all the dashboard themes that I have found are UI frameworks as Material UI and Bootstrap, so I'm asking my self why I can't find dashboard themes using only styled-components, without UI frameworks, maybe because is not common and also is not a good practice create a system not using some UI framework? or it is normal and also is a good practice?
If yes, some suggestion where I can find it? Preferable open source. Other thing which I'm asking my self, why does not have or why is not popular open source themes at GitHub?
Design is ALOT of work
In my opinion it's probably a mistake to not use a design framework especially when you don't have extended knowledge and resources in design & UX. A design framework makes it alot easier to create a consistent, responsive and polished look especially if you are not a design professional / don't have someone exclusively working on design & UX. Design is alot of work especially when designing for mobile, users expect a certain amount of fluidity and animation that is time intensive and hard to get right when you are unexperienced. Talking about user expectations; this is is another reason why using a framework can be handy. If you use a framework that is well known you'll allready know how other apps using this framework are structured and it will be easier to find a structure for you own app. On the other hand users can transfer their knowledge about workflows from other apps that use a similiar style. Your app will be easier to use.
Development Time & Speed
Also I don't understand how not using a framework would save you time rather than cost you time. The only time thats ever going to be true is if you have design ideas so specific that you don't end up using any of the styles provided by the framework or you spend so much time customizing the styles of the framework that you could have done it from scratch aswell. In either of these cases you need a developer that is heavily / purely dedicated to design & UX and it doesn't sound like you would wanna do that.
Theme vs. Framework
Lastly you should ask yourself where you draw the line between framework and "theme", and why you are so eager to distinguish them. What would be the point of finding a "theme" and then manually applying the style to all your components rather than using a framework that allready provides you with components that are styled appropiately?
P.S.: afaik Material-Ui is definetly a thing for React Native and has a pretty big following too.
I am developing an app which already makes extensive use of React Testing Library.
We are adding new components utilizing Material-UI however it seems in many cases these components are not testable using this framework.
Here is one example I can provide of a test which breaks for no clear reason.
https://codesandbox.io/s/material-ui-menu-test-uik0w
After searching around it seems like, in general, many folks are experiencing issues using these two libraries together and I would like to start a discussion on how we might be able to move forward.
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 working on a small web application in React and I want it to be in two languages. I've seen several localization libraries like react-i18next and react-intl but I'm hesitant to install something maybe too big for such a simple application. Is there a lightweight library to do simple localization or should I look into a more straightforward approach like a string replacing component?
Thanks!
If it is a small project you probably do not need it.
However, it would be a really good experience to write your own localization component, integrate it with redux and opensource it.
Also, there are some simplified versions already available so you can reuse it and/or contribute into.
Here is a simple react-localization implementation.
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.