React Frameworks
React is super neat, but sometimes difficult to style. That is where React Frameworks come in! Like Material UI or Ant, there are many frameworks out there that help bring style to your project
Framework/UI Components
We used CSS Frameworks in Unit 1 when we learned about frameworks like Materialize and Bootstrap.
So what is a UI Component and how is it different from a React Framework?
A UI Component is a piece of user interface (UI) like a button or an input box. A React Framework is a library of UI Components that can be imported and used like any other component.
A component library is a cloud-based folder that consists of all the designed/styled parts of a website or piece of software. It helps designers to work in a consistent way and becomes very time efficient when executed correctly.
With React component libraries/React Frameworks, you get all the benefits of a CSS framework, but all of the elements are guaranteed React comptatable and your code looks cleaner.
The Rainbow Connection
The UI Components in React frameworks are almost always pre-styled, but beyond just the overall look of the buttons, when choosing a framework, it's good to see if it has theming.
With theming, you can choose a set of colors (i.e. primary and secondary) and apply that tag to a UI component. If you want to change the color theme of your website, you can simply go into your theme file and change the primary color and it will automatically change the color of all the UI Components with that tag.
There are more things that themes can do, but that depends on the framework. Check their documentation for more details!
For more information on what a Component Library is and what do look for, read this article.
Eenie Meenie Miney Mo
Catch a framework by its toe. In a sea of possibilities, which framework should you choose?
Here are some articles about different React frameworks
Or, for a full list of free and paid UI Component Libraries, look no further than React's website itself!
Last updated