State of the Web: React

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • SonarQube - Static code analysis for 29 languages.
  • Scout APM - Truly a developer’s best friend
  • talent.io - Download talent.io’s Tech Salary Report
  • FaxJs

    Fax Javascript Ui Framework

    Around a decade ago, Facebook started looking for a way to modernize its web app. It was becoming increasingly complicated, and they needed a framework to make it easier to build and maintain. To fix this, they created a project called Bolt. Bolt was an MVC framework built on top of JavelinJS, and it solved many of the problems Facebook had. However, it was not perfect. Jordan Walke, a developer at Facebook, created the next iteration of Bolt, called FaxJS. It offered many features that React has today, like rendering on both client and server, DOM diffing, and more. Jordan Walke renamed FaxJS FBolt and started using it in Facebook's codebase.

  • js-xml-literal

    Implements XML literals in Javascript via desugaring, as a sane alternative to E4X. Server-side and client-side environments are supported which gives you the power to quickly and safely generate markup.

    In 2013, Facebook renamed FBolt, you guessed it, React. Additionally, they started working on JSX, an abstraction layer for defining UI in React. JSX made compiling HTML like statements to JavaScript function calls. Interestingly, according to a post by the React team, JSX was initially based on a system in PHP that allowed for embedding XML literals. JSX was initially just a fork of jsx-xml-literal.

  • Appwrite

    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

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

    CSS in JS integrates with React very well. The most popular CSS in JS tool is styled-components, which allows you to define styles inside JavaScript using tagged templates. However, there are newer approaches to CSS in JS that are often superior in certain ways. Some of the most interesting of those are Linaria and vanilla-extract. Linaria is a library that aims to optimize CSS in JS by compiling CSS in JS to native CSS. Linaria also has built-in React integration, making it easier to add dynamic styling without a high runtime cost. vanilla-extract does the same thing but better integrates with TypeScript and offers features like building custom utility styles.

  • vanilla-extract

    Zero-runtime Stylesheets-in-TypeScript

    CSS in JS integrates with React very well. The most popular CSS in JS tool is styled-components, which allows you to define styles inside JavaScript using tagged templates. However, there are newer approaches to CSS in JS that are often superior in certain ways. Some of the most interesting of those are Linaria and vanilla-extract. Linaria is a library that aims to optimize CSS in JS by compiling CSS in JS to native CSS. Linaria also has built-in React integration, making it easier to add dynamic styling without a high runtime cost. vanilla-extract does the same thing but better integrates with TypeScript and offers features like building custom utility styles.

  • unocss

    The instant on-demand atomic CSS engine.

    Atomic CSS works well with React due to its scoping. Since the styles are atomic, they are automatically scoped to just the elements that use them, making it easier to reason about styling with components. Additionally, Atomic CSS's repetition can be solved using components. Some of the most notable Atomic CSS libraries currently are Tailwind and UnoCSS. Tailwind is, by far, the most dominant Atomic CSS library out there due to its wide variety of features and ease of use. UnoCSS is a more recent project that is significantly faster and more flexible than Tailwind.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    Atomic CSS works well with React due to its scoping. Since the styles are atomic, they are automatically scoped to just the elements that use them, making it easier to reason about styling with components. Additionally, Atomic CSS's repetition can be solved using components. Some of the most notable Atomic CSS libraries currently are Tailwind and UnoCSS. Tailwind is, by far, the most dominant Atomic CSS library out there due to its wide variety of features and ease of use. UnoCSS is a more recent project that is significantly faster and more flexible than Tailwind.

  • Preact

    ⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

    While React has many advantages, performance is not one of them. Luckily, there are replacements for React that retain a identical or almost identical API. The most notable are Preact and Solid. First, we have Preact. Preact is faster and significantly smaller (3kb Gzipped) than React while having an identical API. You can use Preact almost anywhere, and it can be used as a drop in replace with preact/compat. Second, there is Solid. Solid does not have an identical API to React, but the ways it differs allows it to get a large performance advantage. In terms of runtime performance, Solid is significantly faster than both Preact and React. Solid achieves this by forgoing a virtual DOM and building components only once instead of whenever state updates. Solid is also smaller than React, although it is a bit bigger than Preact.

  • SonarQube

    Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.

  • linaria

    Zero-runtime CSS in JS library

    CSS in JS integrates with React very well. The most popular CSS in JS tool is styled-components, which allows you to define styles inside JavaScript using tagged templates. However, there are newer approaches to CSS in JS that are often superior in certain ways. Some of the most interesting of those are Linaria and vanilla-extract. Linaria is a library that aims to optimize CSS in JS by compiling CSS in JS to native CSS. Linaria also has built-in React integration, making it easier to add dynamic styling without a high runtime cost. vanilla-extract does the same thing but better integrates with TypeScript and offers features like building custom utility styles.

  • astro

    Build faster websites with Astro's next-gen island architecture 🏝✨

    Remix is not the only new React framework. There are others, like Astro. Astro is a promising static site generator that supports multiple ways of building UI, including React. Astro is also notable because it supports partial hydration, which reduces the JavaScript sent to the client by only including what is needed to make your web app interactive.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts