Looks great. Is it possible to use css frameworks with it (let's say bootstrap etc). I'm trying to understand where this fits in the overall stack. Is it possible to use react libraries with it.
I like it a lot, but I had a hard time combining local CSS modules with external libraries (such as bootstrap, or a CSS for a plugin) in a previous react project.
They are not CSS frameworks in the sense of Bootstrap.
They are React component frameworks for common functionality with a unified style approach.
Something purpose-built for React is usually much better than something where React is bolted on to an existing framework, like Reactstrap (React + Boostrap) because those usually are built with jQuery and just handle state and functionality in a way that's not easy to integrate with React cleanly, so you end up re-implementing the actual functionality again.
What CSS libraries are startups currently using to build their web apps using React? As we cant use plain Bootstrap with React, following were the popular choices I found on web:
1. Material-UI
2. React-bootstrap
3. Reactstrap.
Do you prefer using a CSS library or no CSS library at all with React?
I feel like CSS frameworks are not themselves modern. My thought has been that web components are preferred over css classes.
In React, I use jsx-styled to style my components. Then I simply re-use the components as needed. This way I don't ever need to use re-usable CSS classes.
This is really nice! Although I’d find it impractical to use, especially for existing projects, unless it also supported different CSS-in-JS libraries (e.g., Emotion, Styled Components), rather than inline styles with the `style` prop.
These other libraries offer a great deal of more support, such as targeting children and pseudo-elements (e.g., :hover).
Any plans/timeline on adding support for other React-in-CSS libraries?
Thanks for sharing. This is similar to using Bootstrap for your styling, and then you have lots of component libraries across technologies that work with it.
I'm not a React specialist and I have the following question : Is it that common to write the CSS inside the JSX file?
Since I started learning React, the hardest part to swallow was that my HTML and JS now live in the same file. Now I see that this library also puts the CSS and since I'm not entirely sure if this is good or not, can someone point some Pro's and Cons and if it's common or not.
I would love to read more about styling inline and completely remove external CSS files.
Are there any CSS-frameworks that have been converted to JS but not are not their own components yet? It's easy to find React-Bootstrap but that comes with ready made components, I am looking for styling that's purely in JS so I can make my own components.
Also would a route-component be considered logic or presentation, or maybe it is its own thing and they forgot to mention it?
It's really nice to see a UI component library that is built on SC. I have multiple applications using React Semantic UI and it can sometimes be a pain to extend / compose its component's styles using SC (typically when working with child elements). Usually if you want to work with SC and vendor UI systems / components, you'll be working with CSS/SASS/LESS/Etc for the vendor components and SC for your own components. With a library like this, most of your components are now all SC (which has other benefits aside from just uniform style composition) :)
Edit: I think a big point that most non-frontend developers miss about these type of libraries is that they're designed to be extended, not necessarily used out of the box. Even if it looks identical to Bootstrap, the idea is to be able to have a nice base set of UI components that we can extend with SC -- the same way we'd extend our own internal components with SC.
I looked a bit at this while it was still in beta, and it seemed to be one of the more comprehensive UI libraries for React, and also one of the more active projects. It also isn't restricted to desktop use like some of the other UI libraries.
I'm curious about the choice for styling components, there seems to be a lot of different approaches and no clear winner.
Could you elaborate on what component-based CSS is for the uninformed? A cursory Google search indicates that it's a technique for using CSS in JS, but I'm not sure how I would go about doing it. Does it imply some web component framework?
I don't know about CSS frameworks. However, there are web component libraries that match your description perfectly.
I absolutely love:
- SAP's UI5[0]
- VMWare's Clarity Design[1]
Don't worry: You do not need to set up npm projects if you are satisfied with what is available out of the box. It's a matter of including some JavaScript and using the custom HTML5 tags described in the docs alongside your standard HTML.
You used a framework that specifically uses CSS in JS and tried to use it as a server-side rendered website.
There is plenty of react frameworks that are geared toward traditional CSS: reactstrap, semantic-ui-react and ant design. Not to mentions that you could have used any css framework.
Nice that they've added CSS Module support. I've been using them for my react projects and find them a good solution when you don't need lots of dynamic styling.
Sure. Frontend development, mostly on a single React-based project, for which we receive mockups from a dedicated designer. Using CSS modules, with SCSS (not sure we even needed the SCSS; we do sometimes use its nesting and ampersands; but I think we could have just as well written vanilla CSS syntax).
Other times, I would write web components with lit. With shadow dom, web components would have their own little bits of CSS, which provides sufficient amount of encapsulation that neither CSS modules nor SCSS are really necessary.
I don't have any problems with importing CSS from (S)CSS files or writing it inside of a LitElement-based web component. I don't have any problem with writing CSS by hand either. I find it strange that people would want to learn another domain-specific language for CSS, in addition to the CSS itself and DOM's camel-cased style dialect.
reply