DEV Community

Discussion on: 5 things I struggled with when learning React with a Vue background

Collapse
 
marcel099 profile image
Marcelo Lupatini

I have to admit that markup and logic are together in React, but they are together since the React's concept, so we couldn't create a library that separate them and continue to be React-like.

However, you can separate styles very well: You can put them in another file inside the same folder you put your React Component, like SubscriptionButton/index.jsx and SubscriptionButton/styles.css. You can do that with regular CSS, CSS-in-JS or CSS Modules, besides that with SASS too. But, you could do all that inside the same component's file. The freedom of choice is yours.

Therefore, you no longer have a component with 8 lines of markup and 40 lines of style, which would pollute the component and lead to creating a huge file for a component with just 8 lines of markup. Personally, I would like to say the same about Vue, but I haven't found how to do this separation in 2 files until the moment. Anyways, because of that I think it's incorrect to say that you can't separate style from the rest in React.

Collapse
 
oniichan profile image
yoquiale

Well, style is the only thing you can separate properly

Thread Thread
 
danielcnascimento profile image
danielcnascimento

Actually, you can modulate everything. Take Airbnb as project patterns example.

You still have extensions like ESlint to apply these modulation patterns, and guarantee you will separate it correctly.

Thread Thread
 
oniichan profile image
yoquiale

It's not the same as using Vue or Angular, I'd rather not have to configure a framework so it can do what others can do by default.