Our great sponsors
-
twin.macro
🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
-
react
Cheatsheets for experienced React developers getting started with TypeScript (by typescript-cheatsheets)
No matter what library you use, you are writing your CSS somewhere. I'm a fan of styled-components (we use them at work) and Tailwind (I use it in personal projects). Twin allows you to combine them together -- that way you can write custom CSS if you need to, and Tailwind is great for rapid prototyping and production-ready apps alike. Best of both worlds.
No matter what library you use, you are writing your CSS somewhere. I'm a fan of styled-components (we use them at work) and Tailwind (I use it in personal projects). Twin allows you to combine them together -- that way you can write custom CSS if you need to, and Tailwind is great for rapid prototyping and production-ready apps alike. Best of both worlds.
This is how I write my components and how I prefer to write React. It's a super specific way that works for me - and that includes using styled-components. If you have suggestions on how to improve this structure, I'm all ears. I love to improve how I do things and I greatly enjoy feedback.
I typically name my Component types as ComponentNameProps and ComponentNameReturn where most of the time, I skip the "return" to use JSX.Element (I do use the Return type for hooks though! I'll write about that another day). Check out the React TypeScript CheatSheet which contains majority of the conventions I use for TypeScript and React.