--- title: Best JSX posts of 2023 | daily.dev description: The most upvoted JSX posts of 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/jsx/best-of/2023 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/jsx/best-of/2023 og:type: website og:site_name: daily.dev og:title: Best JSX posts of 2023 | daily.dev og:description: The most upvoted JSX posts of 2023, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of JSX — 2023 1. 1 [](/posts/discover-bun---a-faster-modern-javascript-runtime-eqlrg895h "Discover Bun - A Faster, Modern JavaScript Runtime") Article DEV · 3y Discover Bun - A Faster, Modern JavaScript Runtime The Javascript Space is completely different from 15 years ago when NodeJS was first released. The technology behind Bun Bun is a Javascript Runtime. It starts with an Engine - The Component of a runtime that runs the Javascript code. Bun comes with built-in testing support, and so it is much faster from the other ones. 251 27 2. 2 [](/posts/daisy-ui-3-0-released-new-components-themes-improvements-and-more--euo84im0p "Daisy UI 3.0 Released: New components, themes, improvements, and more!") Article Community Picks · 3y Daisy UI 3.0 Released: New components, themes, improvements, and more! Daisy UI has introduced loading spinners with its latest version. Spinners indicate an activity or event is currently running in the background. The new Accordion component in Daisy UI is an update on but uses radio buttons inside the hood. This makes it possible to make JS-free components more efficient, faster, and accessible. 149 15 3. 3 [](/posts/the-case-against-self-closing-tags-in-html-0s7fgyjyl "The case against self-closing tags in HTML") Article Jake Archibald · 3y The case against self-closing tags in HTML JakeArchibald.com: The case against self-closing tags in HTML. 86 10 4. 4 [](/posts/the-best-eslint-rules-for-react-projects-bpopksjqc "The Best ESLint Rules for React Projects") Article DEV · 3y The Best ESLint Rules for React Projects Using ESLint for React projects can help catch some common mistakes, code-smells, and define common conventions for a codebase. In this blog, I'll go through some valuable ESLint plugins and rules tailored specifically for React Projects. 69 3 5. 5 [](/posts/jsx-and-react-learn-how-to-write-maintainable-code-cheatsheet-gdlgolrz3 "JSX and React: Learn how to Write Maintainable Code – CheatSheet") Article Community Picks · 3y JSX and React: Learn how to Write Maintainable Code – CheatSheet Learn about the value of React, how it works, and its key concepts. 61 20 6. 6 [](/posts/announcing-typescript-5-1-rc-kcckivx1k "Announcing TypeScript 5.1 RC") Article DevBlogs · 3y Announcing TypeScript 5.1 RC Announcing TypeScript 5.1 RC, we expect no further changes apart from critical bug fixes. To get started using the RC, you can get it through NuGet, or through npm with the following command: n. We’ve also made changes to our emit behavior under, ensuring that script files are not rewritten to modules. 57 1 7. 7 [](/posts/effortless-multi-threading-in-jsx-with-worker--lzxsimg4i "Effortless Multi-threading in JSX with worker$") Article builder.io · 3y Effortless Multi-threading in JSX with worker$ Using Web Workers in JavaScript traditionally involves some degree of complexity. When using Web Workers, developers must create a separate JavaScript file containing the logic to be run on the worker thread. Qwik’s new experimental function ( @builder.io/qwik-worker) can change your code from running in a Web Worker to running on the server. 42 1 8. 8 [](/posts/how-to-style-your-react-apps-with-css-like-a-pro-xww2aohzn "How to Style Your React Apps with CSS Like a Pro") Article freeCodeCamp · 4y How to Style Your React Apps with CSS Like a Pro You will learn how to integrate React with CSS like a pro by understanding the different ways you can apply styles to your React components. By the end of this tutorial, you should be able to confidently style your React component and build visually appealing user interfaces. You'll also learn some best practices for organizing and maintaining your CSS code. 36 9. 9 [](/posts/react-101-learn-to-start-with-react-qfj6ttvnk "React 101: Learn to Start with React") Article Community Picks · 3y React 101: Learn to Start with React React is an open-source JavaScript library for building dynamic user interfaces. It was developed by Facebook in 2013 and has since gained massive popularity in the developer community. It uses a virtual DOM (Document Object Model) to keep track of changes in an application’s state. This makes React applications incredibly fast and efficient. 35 6 10. 10 [](/posts/declaring-jsx-types-in-typescript-5-1-mlrfn0g4r "Declaring JSX types in TypeScript 5.1") Article Community Picks · 3y Declaring JSX types in TypeScript 5.1 Declaring JSX types in TypeScript 5.1 - LogRocket Blog: A new feature, described as “ decoupled type-checking between JSX elements and JSX tag types’, arrives with TypeScript5.1\. This feature enables libraries to control what types are used forJSX elements. 35 1 11. 11 [](/posts/breaking-up-with-svg-in-js-in-2023-lymn0fbdn "Breaking Up with SVG-in-JS in 2023") Article Community Picks · 3y Breaking Up with SVG-in-JS in 2023 The most expensive form of sprite sheet: costs a minimum of 3x more than other techniques. This bundle from a popular site is almost 50% SVG icons (250kb), and most are unused. SVGs in JS have a cost and SVGs do not belong into your JS bundle. 31 12. 12 [](/posts/documentation-cghhlpxyg "Documentation") Article Community Picks · 3y Documentation Panda combines the developer experience of CSS-in-JS and the performance of atomic CSS. It leverages static analysis to scan your JavaScript and TypeScript files for JSX style props and function calls, generating styles on-demand. The development of Panda was only possible due to the inspiration and ideas from these amazing projects. 24 [See all JSX archives](/tags/jsx/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/jsx/best-of/2023#page","url":"https://daily.dev/tags/jsx/best-of/2023","name":"Best JSX Posts of 2023","description":"The most upvoted JSX posts of 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/jsx/best-of/2023#items","numberOfItems":12,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/discover-bun---a-faster-modern-javascript-runtime-eqlrg895h","name":"Discover Bun - A Faster, Modern JavaScript Runtime"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/daisy-ui-3-0-released-new-components-themes-improvements-and-more--euo84im0p","name":"Daisy UI 3.0 Released: New components, themes, improvements, and more!"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/the-case-against-self-closing-tags-in-html-0s7fgyjyl","name":"The case against self-closing tags in HTML"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/the-best-eslint-rules-for-react-projects-bpopksjqc","name":"The Best ESLint Rules for React Projects"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/jsx-and-react-learn-how-to-write-maintainable-code-cheatsheet-gdlgolrz3","name":"JSX and React: Learn how to Write Maintainable Code – CheatSheet"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/announcing-typescript-5-1-rc-kcckivx1k","name":"Announcing TypeScript 5.1 RC"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/effortless-multi-threading-in-jsx-with-worker--lzxsimg4i","name":"Effortless Multi-threading in JSX with worker$"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/how-to-style-your-react-apps-with-css-like-a-pro-xww2aohzn","name":"How to Style Your React Apps with CSS Like a Pro"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/react-101-learn-to-start-with-react-qfj6ttvnk","name":"React 101: Learn to Start with React"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/declaring-jsx-types-in-typescript-5-1-mlrfn0g4r","name":"Declaring JSX types in TypeScript 5.1"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/breaking-up-with-svg-in-js-in-2023-lymn0fbdn","name":"Breaking Up with SVG-in-JS in 2023"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/documentation-cghhlpxyg","name":"Documentation"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"JSX","item":"https://daily.dev/tags/jsx"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/jsx/best-of"},{"@type":"ListItem","position":5,"name":"2023"}]}]} ```