The Anatomy Of My Ideal React Component

• twin.macro

  15 7,286 9.1 TypeScript

  🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.

  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.

• Tailwind CSS

  458 69,191 9.7 HTML

  A utility-first CSS framework for rapid UI development.

  

  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.

• Appwrite

  appwrite.io

  sponsored

  Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  

• styled-components

  68 39,068 9.3 TypeScript

  Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

  

  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.

• react

  30 41,092 6.5 JavaScript

  Cheatsheets for experienced React developers getting started with TypeScript (by typescript-cheatsheets)

  

  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.

Suggest a related project