How can I bring Vue-like features into React?

JavaScript
1

I like how Vue handles their scoped styling. All you have to do is add the “scoped” attribute on the style tags, and Vue will scope the styles to that particular component.

I am not a fan of React’s CSS modules and how they handle styling of components in general.

Also, adding dynamic classes to React is not as simple as it is with Vue. I like how Vue has an object syntax for determining whether classes are applied or not.

Is there a way to incorporate some of these Vue features in a React project?

Also, to add, I like computed properties in Vue where you can extract complex logic away from the markup/template and place them within a computed property.

2

Definitely, but it may take some fiddling

React doesn’t have any preference at all for how you apply styling: there’s nothing built in. You get classes (using the className attribute due to JS keyword rules), and you get the style attribute (which is, for web, just the Element.style property).

Basically,

  • just CSS

Then via libraries:

  • various utilities for making it easier to conditionally alter classes
  • CSS modules
  • Sass/Less/etc
  • Tailwind
  • anything available via PostCSS
  • CSS-in-JS
  • CSS-in-JS that gets converted to actual CSS in a compile step
  • …probably a few other approaches I’ve forgotten

What you’re talking about is not a feature of Vue per se, it’s from PostCSS. Note it’s doing almost the same as CSS modules (afaik any tools that support CSS modules via PostCSS are using exactly the same mechanism).

1 Like