Add in-built styling capability of React Components about react

[zettca]

You said it yourself: React is "a JavaScript Library", not a framework. It's unopionated and doesn't come with batteries included.

Besides, what's stopping your from just using vanilla CSS?

<div className="class1 class2" />

[Complexlity]

I feel, having its own library adds a bit more to 'load' to React. Think of React as HTML with some extra functions.
In this way, you see HTML could be styled with plain CSS classes or with frameworks like Tailwind, Bootstrap and the like. Same as React (Only it has some extra styling options which you mentioned above). You could stick to plain CSS or learn something like Tailwind which works the same across all systems and that's it. No need to learn all of the styling systems

[vishakh-abhayan]

Nice dude it was so helpful.

[MadhuSaini22]

React is said to be a JavaScript Library for creating User Interface.

Now, I've wondered, how we can have a User Interface without styles?

This is where I'm asking that-- why doesn't React have an in-built styling System where we can directly style our React Components without using third party tools like Styled Components, Emotion, Aphrodite, Linaria and so on?

You see, Web Development has become too complex and too complicated because there's just too much to learn to create a simple thing as User Interface.

This means that to style my React Application after learning JavaScript and learning React, I still need again to learn a new library or framework like Styled Components, Emotion, Aphrodite, Linaria and so on.

This is too much work. So I am requesting that React should come with the styling feature in-built: so that I will just learn it together along the way while learning React, and not be bothered with learning a new styling library after going through the stress and pain of learning HTML, CSS, JavaScript and React.

Can React make Components styling an in-built React feature?

Regards.

React's philosophy is to focus on providing a core set of features for building user interfaces and leaving styling to be handled by external tools and libraries. This is because styling is a complex and ever-evolving aspect of web development, and there are many different approaches and tools available to handle it.

React's approach of separating concerns, by separating the view (HTML and CSS) from the logic (JavaScript), makes it possible to use different styling solutions with React. There are many popular styling solutions like Styled Components, Emotion, Aphrodite, Linaria, and many more, each with their own unique approach to styling React components.

By not providing an in-built styling system, React allows developers to choose the styling solution that best fits their needs and preferences. This way, developers can use the same styling solution across multiple projects and can easily switch to a different solution if needed.

However, if you prefer an in-built styling solution, there are other libraries and frameworks that provide this, such as Vue.js and Angular. These frameworks have built-in styling systems that allow developers to style components directly without using external libraries.

Ultimately, it is up to the individual developer and project requirements to choose the best approach for styling React components.

[Bibooo25730]

article id='article' className={[${essayList.container} animate__animated animate__bounceInUp ]}
You can see

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!