--- title: "Writing React components with CSS" publication: "React Status" issue: 378 published_at: "2024-03-20" canonical_url: "https://react.statuscode.com/issues/378" --- Plus data grids, virtual lists, 3D bulging text, and even a bit about the React compiler. | #​378 — March 20, 2024 [Read on the Web](https://react.statuscode.com/issues/378) Together with [![Clerk\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_220,h_64/e_make_transparent/co_white,e_outline:5/j3vhv1hnwqeffgkzzlvu.png)](https://go.clerk.com/fEYp7AC) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/rwuskc0xupro8k5ubslb.jpg)](https://adazzle.github.io/react-data-grid/#/common-features) [React Data Grid: A Fast Excel-Style Data Grid Component](https://adazzle.github.io/react-data-grid/#/common-features) — A fantastic live demo that shows off all of this component’s unique features, from grouping rows and columns to [handling a million cells](https://adazzle.github.io/react-data-grid/#/million-cells) without slowdowns. Works with React 18+. [GitHub repo](https://github.com/adazzle/react-data-grid). Adazzle [MistCSS: Write React Components Using Only CSS](https://typicode.github.io/mistcss/) — CSS-in-JS is old news.. what about JS-_from_-CSS? This new approach provides a way to compile CSS-only components into TypeScript for use with React – it’s early days, but an intriguing idea, at least. ([Basic example.](https://typicode.github.io/mistcss/getting-started.html)) Typicode [![\](https://copm.s3.amazonaws.com/6545306d.png)](https://go.clerk.com/fEYp7AC) [Building a React Login Page Template](https://go.clerk.com/fEYp7AC) — This guide shows how to build a React login page and integrate it with an Express auth server using JWTs. It introduces Clerk as an easier option with pre-made UI components for authentication setup. Clerk sponsor [Looking Into the Type System of the React Compiler](https://www.recompiled.dev/blog/type-system/) — If you’re not merely content to wait to see what the [React Compiler](https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#react-compiler) will bring, but want to dig into the details under the hood, Sathya is here for you. Sathya Gunasekaran (Meta) [Building a Full-Stack React App with Azure Static Web Apps and Managed Functions](https://techcommunity.microsoft.com/t5/apps-on-azure-blog/build-a-full-stack-react-application-with-azure-static-web-apps/ba-p/4090838) — _Azure Static Web Apps_ coupled with _Azure Functions_ (Azure's serverless platform) can get you all the way to a full-stack React app without having to worry about managing infrastructure. Thomas Gauvin (Microsoft) **IN BRIEF:** - [React Flow v12](https://github.com/xyflow/xyflow/discussions/3764) (a library for building node-based UIs) is expected to land in the next week or two, but seems ready to use now if you need it. - A few weeks ago we featured _Million Lint_, a new React-focused performance linter – it's still in beta, but [now has a fantastic new homepage](https://million.dev/lint) showing off what it can do. [Creating an Interactive 3D 'Bulging Text' Effect with React Three Fiber](https://tympanus.net/codrops/2024/03/20/creating-an-interactive-3d-bulge-text-effect-with-react-three-fiber/) — At the risk of seeming a little gimmicky, this is certainly a feature that would make your page stand out.. almost literally! Roman Jean-Elie [How to Create Interactive Animations Using React Spring](https://www.sitepoint.com/react-spring-interactive-animations/) Yemi Ojedapo ▶[State Managers Are Making Your React Code Worse](https://www.youtube.com/watch?v=VenLRGHx3D4) Kyle Cook [Why Facebook Doesn’t Use Git](https://graphite.dev/blog/why-facebook-doesnt-use-git) Greg Foster 🛠 Code, Tools & Libraries [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/t2ykawwn9fkybyskf783.jpg)](https://skeletonreact.com/) [React Content Loader 7.0: Loading Content Placeholders](https://skeletonreact.com/) — A way to easily create animated ‘skeleton’ components, giving a wireframe of what’s going to appear once everything has loaded. Danilo Woznica [react-json-view-lite: Render JSON as a Tree](https://github.com/AnyRoad/react-json-view-lite) — A lightweight component for visualizing JSON in a way that retains its basic formatting and _JSON-ness_ but that lets you collapse or expand arrays and objects and see the structure more easily. [Storybook demos.](https://anyroad.github.io/react-json-view-lite/?path=/docs/json-view--docs) Andrei Alikov 📊 [Spectacle: Build Presentations with React and JSX](https://commerce.nearform.com/open-source/spectacle/) — A React.js based library for creating sleek presentations using JSX syntax.. animations, slide-ins, grids, columns, it’s all there! The homepage has a demo showing it off. [GitHub repo](https://github.com/FormidableLabs/spectacle). Formidable Labs 📰 Classifieds 😌 We love Prisma at [Neon](https://neon.tech/blog/better-postgres-with-prisma-experience?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=reactstatus&utm_content=classified), so we spent the last month [making the experience of Prisma + Neon Postgres even smoother than it already was](https://neon.tech/blog/better-postgres-with-prisma-experience?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=reactstatus&utm_content=classified). --- ✨ “Perfect resolution, excellent audio, no lag”. [Try Tuple for free today, no credit card required](https://tuple.app?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=Q1_2024&utm_content=React+Status_Classified+Listing). [TanStack Virtual 3.2: Headless UI for Virtualizing Large Element Lists](https://tanstack.com/virtual/latest) — Supporting TypeScript, JavaScript, React, Solid, Svelte and Vue, this provides a general way to build smooth 60fps experiences for large numbers of elements while retaining control over markup and styles. Not just for grids, it can tackle vertical and horizontal lists generally too. Tanner Linsley - [Downshift 9.0](https://github.com/downshift-js/downshift) – Primitives for building accessible autocomplete, combobox and select dropdown components. - [TanStack Table 8.14](https://github.com/TanStack/table) – Headless UI for building tables and datagrids. - [React Joyride 2.8](https://github.com/gilbarbara/react-joyride) – Create [guided tours](https://react-joyride.com/) in your apps. - [react-responsive 10.0](https://github.com/yocontra/react-responsive) – CSS media queries in React. - [Preact 10.20](https://github.com/preactjs/preact) – The 3KB React compatible alternative. Curated by Peter Cooper and Terence C. Gannon. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom