A New Way to Write React
Josh tried coding・10 minutes read
CSS is now used as a file extension for writing React components, offering benefits like support for Tailwind CSS and automatic type safety, with M CSS providing a clean separation between visual components. M CSS allows for writing components in CSS only, generating TypeScript types for props, but interactivity with state may require separating logic into a separate file.
Insights
- M CSS introduces a novel method of creating React components solely using CSS, producing TypeScript types for props and isolating styles to individual components, offering advantages like Tailwind CSS support and type safety.
- While M CSS eliminates additional performance costs seen in styled components, it necessitates separating logic into distinct files from the generated components for interactivity, potentially leading to increased complexity in smaller projects.
Get key ideas from YouTube videos. It’s free
Recent questions
What are the benefits of using M CSS for React components?
M CSS offers advantages such as support for Tailwind CSS, automatic type safety, clean separation between visual components, and fast performance without additional cost. Unlike styled components, M CSS generates JavaScript from CSS, providing a unique approach to styling in React.
How does M CSS differ from styled components in React?
M CSS generates JavaScript from CSS, while styled components bring CSS into JavaScript. M CSS offers faster performance with no additional cost, clean separation between visual components, and support for Tailwind CSS. Styled components, on the other hand, may have overhead and do not provide the same benefits as M CSS.
Who created M CSS and what is required for its implementation?
M CSS was created by the same person behind the popular Json placeholder API. To use M CSS for React components, you need to install a single dependency for code generation. This innovative approach allows for writing React components in CSS only, generating TypeScript types for props, and scoping styles to specific components.
What is the process for adding interactivity to M CSS components?
To add interactivity to M CSS components, you need to separate the logic into a separate file from the generated component. While this may add overhead in smaller projects, it allows for a clean separation between visual components and logic. M CSS provides a unique way to handle styling and interactivity in React applications.
How does M CSS change the traditional way of creating React components?
Traditionally, React components were created using JSX or TSX file extensions. However, M CSS introduces a new approach where JavaScript is generated from CSS. This allows for writing React components in CSS only, providing benefits like automatic type safety, support for Tailwind CSS, and fast performance without additional cost.
Related videos
Web Dev Simplified
10 Tailwind Classes I Wish I Knew Earlier
Theo - t3․gg
I WISH I Knew These Tailwind Tips Earlier
Theo - t3․gg
Tailwind V4 Is Bigger Than Expected 👀
KadirMedia
👉 Write Better React ! | 9 Tips and Tricks To Make You A Better React Developer! 👈
Theo - t3․gg
This might change how we build UI forever
Summary
00:00
New M CSS for React Components
- React components were traditionally created using JSX or TSX file extensions, but now CSS is used as a file extension for writing react components.
- M CSS is a new approach where JavaScript is generated from CSS, unlike styled components which bring CSS into JavaScript.
- M CSS offers benefits like support for Tailwind CSS, automatic type safety, clean separation between visual components, and more.
- M CSS is fast with no additional performance cost, unlike styled components which have overhead.
- M CSS was created by the same person behind the popular Json placeholder API, and it requires installing a single dependency for code generation.
- M CSS allows for writing react components in CSS only, generating typescript types for props, and scoping styles to specific components.
- Interactivity with state in M CSS components requires separating logic into a separate file from the generated component, which may add overhead in smaller projects.
