reactstrap VS Material UI

After the app creation process completes, navigate into the app directory and install Bootstrap, cookie support for React, React Router, and Reactstrap.

Great, we were finally able to make use of the plethora of reactstrap components like Spinner, Button, Layout and a host of others. There are more to it as this is just a tip of the iceberg. I recommend you go through reactstrap official documentation to get a feel of the numerous other UIs that they provide.

Reactstrap has 10.1K stars, 1.2K forks, 231K users, and 239 contributors. According to npmjs.com, it has 374,493 weekly downloads.

I tried with reactstrap, and yes has bootstrap css classes as components (e.g ) but you have to includes all bootstrap styles:

I've followed https://reactstrap.github.io/ and got it working. But bootstrap is now applied to all the site, because I have this

I start developing a React app with reactstrap. I followed the Get Started running the following commands :

I do a lot of enterprise application development in a very small team. It's important for us to create applications that work on any device with a modern web browser that is connected to the Internet and not just a LAN or VPN. The apps must authenticate thru single-sign on that is federated with the company Active Directory. The apps need to rely on commonly available libraries like React and Bootstrap albeit through ReactStrap, and they must be spartan and similar. That is to say that users need to be able log onto all of the various apps the same way, and the apps need to do simply what they need to do with no bells or whistles. Furthermore, one app should look and feel like the others. We don't want to confuse users by making them feel like they need to learn a whole new system for every new application.

I'm new to Material UI and ReactJS. I've been playing around with Create-React-App (CRA) and reactstrap. My question is, can I use Material UI and CRA together to build an app?

🎨 Project: Material UI 💡 Why Contribute: If design systems and UI frameworks are your thing, Material UI is a must-contribute project. Help maintain or enhance one of the most popular React component libraries used by thousands of developers globally.

Coincidentally, I thought it was this bug that bit you; it was reported a couple of days ago https://github.com/mui/material-ui/issues/43823

To start, I'll be using MUI's Album Template for demo purposes, as I feel that it uses some of the more common components that you'll likely be using. Please note that this repo is template is older so some of the components in it are deprecated.

GitHub: https://github.com/mui/material-ui

Material UI GitHub Repository

The most popular CSS-in-JS libraries are styled-components and Emotion. MUI, a React component library, recently released a promising, zero-runtime CSS-in-JS library called Pigment CSS. This article will explore the features and benefits of Pigment CSS, offering a comparison to styled-components and Emotion based on performance, features, developer experience, and community support.

> [0, 1, 2, -1, 10, 11, 12, 13, 14, -1, 26, 27, 28]

What is that supposed to represent in terms of pagination? Are they cursors...?

> I didn't think the code that generated the HTML from that was really worth testing because it was so superficial.

For what it's worth (as a frontend person), pagination is traditionally one of the trickier things for us to make sure is working correctly. Off-by-one mistakes can happen for example (especially with zero-indexed items). Or sometimes the prev/next buttons don't correctly use the same math as the page 1, 2, 3, etc. buttons. It gets even harder if you don't know the total length in the beginning, or if you allow multiple page sizes or sorts/filters, or use lazy loading, etc.

For those reasons I try to use a ready-built lib like MUI where all that is already tested internally (like https://github.com/mui/material-ui/blob/next/packages/mui-ma... or https://github.com/mui/material-ui/blob/next/packages/mui-ba...), but we still add our own automated and manual tests in our own usages.

But then again I'm bad at math and division, lol, so maybe it's just my own weakness.

The first tool we’ll look at is Pigment CSS, a zero-runtime CSS-in-JS library built to extract the co-located styles into separate CSS files during the build phase and eliminate the need for runtime style processing.