DEV Community: Haidar Ezio

Don't use create-react-app anymore, try these instead

Haidar Ezio — Sat, 25 Mar 2023 21:37:14 +0000

It feels like yesterday when we used create-react-app, but as time passed, its cons have outweighed its pros and we have to look for alternate solutions. Thankfully, alternatives exist and we're going to go through the most popular ones and their use cases.

TL;DR

Simple React app? => npm create vite@latest
React app + backend + routing + SSG/SSR? => npx create-next-app@latest
Type-safe, Full-stack Next.js app? => npx create-t3-app@latest
Next.js alternative only for SSR? => npx create-remix@latest
Monorepo?
- 'Blazingly fast' build system? => npx create-turbo@latest
- Different monorepo styles all in the CLI? => npx create-nx-workspace
- template/starter repo using T3 stack with turborepo? => clone here
- T3 stack + React-native + Tamagui? => npx create-t3-universal-app

Vite

let’s get the obvious choice out of the way, if you want a simple react app, with faster build times and hot module reloading (HMR), create vite is your best choice here, you can choose from a different set of frameworks other than react as well as using Typescript if you want

Next.js

the second and recommended choice is of course create-next-app, next.js is the leading full-stack web framework, and for good reason too, batteries are included, so Routing, server-side rendering (SSR), and static site generation (SSG) are all included with no extra packages (unlike react which you’ll have to install react-router for it to work)

T3

and if you’ve been on Twitter or youtube these past months, I’m sure you’ve heard about create-t3-app, an Interactive CLI to build a full-stack, type-safe Next.js app (which by extension means a react app, but I digress)

it’s an opinionated project that might not suit everyone, since it focuses mainly on full-stack type-safety, so if you’re using any backend that’s not Typescript, like Golang, Rust, or Python, this won’t be for you, it also comes with optional packages that make up the full-stack development (styling, authentication etc...)

Remix

Remix is a full-stack react framework just like next.js, its main difference is that it focuses more on server-side rendering whereas next.js also supports static site generation (SSG) and incremental site regeneration (ISR), but trust me, you’ll love the CLI when setting up a remix project

Monorepos:

(for the uninitiated, A Monorepo is a collection of many different apps and packages in a single codebase, where you use the same styling, same testing kit etc, which for example, you can use to build a react app and its mobile counterpart with react native in the same codebase)

Monorepos are trending in the sense that devs love standardization in their cross-platform apps, or testing reusable logic when working on microservices, and these are a couple of CLIs you'll love using

Turborepo

let’s talk about the new kid here, Turborepo, it’s fast, it’s new, and it’s opinionated, its CLI builds a preconfigured repo that might not suit your exact needs for now, but they provide different example projects on github for different needs

NX

Nx is a build system tool that has a powerful CLI to use for different use cases, and it’s amazing when initiating a large-scale monorepo as it has support for multiple styling systems and multiple frameworks, so no need to configure your apps afterwards

create-t3-turbo

we also have a template/starter repo that uses Turborepo for a monorepo structure, and adds Expo and react-native to handle the mobile version of your site, making it a true monorepo version of the create-t3-app we talked about before

CUA

Last one I wanted to show you is create-universal-app, it’s a template just like the previous one, and it actually uses it as a base, it’s an opinionated template for creating full-stack universal (mobile + web codeshare) apps with built-in auth for both of them using T3 stack and the new Tamagui kit that you should totally check out, for a truly universal, Monorepo.

hopefully, you’ll be using the CLI/starter repo that suits your needs in your new projects!

if you liked this article, let me know what type of subjects you want me to check out and visualize, and also next week I'll be discussing Next.js 13 and Server components, so hopefully, that'll be a bit more interesting

follow me at twitter for more updates and other stuff I'll be posting there!

Top CSS-In-JS libraries, Compared

Haidar Ezio — Tue, 28 Feb 2023 23:09:10 +0000

of course, this is in no way a full showcase of each library and its features, but a more high-level understanding of the syntax and big features

all 4 libraries are good in their own way, and some work in certain situations better than others (in my opinion of course 😉):

use emotion instead of styled-components, use it to isolate your styling from your logic, works well on small and medium projects, and larger projects with proper config
use twin.macro if you love tailwind and want to detach the inline styling from your components
use stitches for making a typesafe and scalable design system, works well on medium to large projects (can't recommend it since it's not maintained anymore)

stick around if you want a more in-depth walkthrough on these libraries and how you'd be using them!

Styled-Components

SC is the most popular CSS-in-JS library here, and for good reasons, it makes it easy to build reusable styled elements (without naming collisions) and extend each element to add other variants of that element, making it super easy to build up a Design system,

you can also add the CSS only without making a new component for it!

it keeps the components readable and detached from the logic of the app

and it allows for dynamic styling based on the component's props and state!

Pros

Framework Agnostic - supported in a lot of other libraries - Ease of use

Cons

Naming components is hard 🙄 - Performance (compared to Emotion)- Debugging

Emotion

Emotion is heavily inspired by styled-components and It has almost the same features of styled-components, the syntax is identical too

aside from some differences in using the CSS prop, and being much more performant with a smaller bundle size

Pros

Same as styled-components - Performance is better - smaller bundle size than styled-components

Cons

Naming components (again) 😅- Debugging - Community support isn’t as large as styled-components

Stitches

this is where it gets interesting, stitches has a smaller bundle size than emotion, and has a near-zero runtime 🤯, the biggest difference here is that stitches uses Object style syntax to achieve that zero runtime

Stitches doesn’t have Prop Interpolation, but has a Variants concept that’s more flexible and cleaner compared to styled-components/emotion

another great feature is that stitches is built with Typescript in mind, so it’s type-safe and you’ll have autocompletion with it too!

UI components like Radix and NextUI use it under the hood (although NextUI is transitioning to something else as of the time of this writing since stitches is no longer maintainable)

Pros

Performance - type-safety - zero runtime - Bundle size

Cons

Can be overwhelming for small projects - transitioning from Emotion or SC can seem overwhelming - no longer maintained as of the time of this writing (it doesn't support static extraction yet) - community support isn’t as large as the rest

twin.macro

✨the magic of tailwind with the flexibility of CSS-in-JS ✨

who doesn’t love tailwind these days ? it’s a great solution for css but it can muddy your code quickly, and that’s a turn off for some people, but with twin.macro, you’ll be using tailwind syntax instead of normal css

(it’s a babel macro basically, so doesn’t add any additional size), twin macro can be added to the previous 3 CSS-in-JS libs, and you can use normal css too for stuff that tailwind doesn’t support yet (like with grid, animation etc..)

(the issue with it was that it used a babel macro, and that turns off SWC in Next.js, but they’ve fixed the issue now !)

Pros

Tailwind syntax 🥳 - supports most CSS-in-JS libraries - and takes any pros from the library you chose to inject it in ;)

Cons

Can be a bit overwhelming to setup (mainly for next.js & stitches)- and takes the cons from the library you chose

and with that we've taken a look at these 4 libraries and how they compare to one another, hope you guys like this one, it's my first one and i've had a blast animating this, next time i'll touch on the new ways to create-react-app

if you have any questions just let me know, and follow me on twitter for more updates and minified version of these articles ;)