~reactstatus | Bookmarks (140)

Implementing Clean Architecture in Next.js — Learn how to make projects testable and debuggable, independent of UI, framework, database, and external dependencies with the concept of Clean Architecture. Join us live on November 4th.

🤖 assistant-ui: React Components for AI Chat — It doesn’t just give you the interface components, but has integrations for Vercel AI, Langchain, and talking to other common LLM APIs (e.g. OpenAI’s), enabling you to build your own in-house AI chat system quickly. Examples.

Types of React Components: An Overview — A complete overview, including basic code examples, of the different types of React component, from those built with createClass, class components, HOCs, function components, and more modern options. A major update of a post we first featured in 2019.

Looking for a DIY Survey Solution? SurveyJS Has You Covered — With the SurveyJS UI libraries, you can quickly build a fully customizable form management platform in React. Seamlessly integrate the drag-and-drop editor with any backend and create dynamic, JSON-based forms within your application without any limitations.

Why I Gave Expo a Second Chance — If your last contact with Expo was a few years ago — and you weren’t all that impressed — you may want to take a second look as this dev did. It’s a powerful way to build React Native apps.

▶  React Visually Explained: use client — We feature this not only for content but also for style: we like the gimmick-free simplicity, tight editing and focus of the presenter and the material she presents.

▶  React 18 at The New York Times with Ilya Gurevich — A senior engineer at The New York Times talks about implementing React 18 for their core news site. This follows on from a recent blog post he wrote about the process.

React Spectrum September 30, 2024 Release — A big release for Adobe’s suite of accessible components, complete with seven new color picker components (including Tailwind starter kit examples), two ‘Disclosure’ components for building accordions/collapsible panels, and Tree/TreeView go into beta.

A React Component for Rendering Shell-Style Progress Indicators — You know the ones, where various combinations of Unicode characters are alternated, etc. This is a very simple implementation.

React95 v9.0: A Windows 95 Themed React Components Library — Years ago we thought this was a cute pet project and that it’d be left to go stale quite quickly, but no, it’s getting constant updates - we love it! Now we just need to see more sites using it.. :-)

How Josh W. Comeau Rebuilt His Blog, App Router Style — Like many folks, we’re huge fans of Josh’s blog (particularly its wealth of React articles). He’s just rebuilt the entire site using Next.js, MDX, Sandpack, and an array of other technologies, and goes into fantastic depth about everything involved. A good look behind the scenes of a modern React-driven project.

How to Fetch Data in React (2024 Edition) — An updated look at the multitude of ways to fetch data from a remote API in React. Note that Redux-based approaches aren’t covered, this is all about general, broad approaches.

Amplify the Benefits of JWTs and Session Tokens — Learn how leveraging the benefits of both session token authentication and JWTs results in the best of both approaches.

Component Composition is Great, BTW — A well-regarded author writes about using component composition to avoid conditional rendering for mutually exclusive states (and explains why we should all be doing the same).

Vim for React Developers — While VS Code is the ‘go to’ editor for most these days, Vim, and its various spinoffs, has a lot to offer those prepared to learn its many commands. Lee has put together a simple ‘course’ (which runs directly in Vim) to teach you what Vim’s commands can bring to editing React code.

Testing a React App in Chrome with Heroku CI — An introduction to doing end-to-end testing of a React app as part of a CI pipeline (Heroku’s, in this case).

React Chrono: Dynamic, Interactive Timeline Component — Supports horizontal, vertical, and vertical alternating timelines, complete with keyboard accessibility, support for nested timelines, auto-playing timelines slideshow-style, and more.

React Snap Carousel: DOM-First, Headless Carousel — Uses native browser scrolling and CSS scroll snap points for performance. Try out some of its features in its Storybook. The latest version adds support for infinite carousels.

React Loading Skeleton: Skeleton Screens that Adapt to Your App — Use the ‘skeleton’ component directly in your components in place of content that is still loading and it’ll adapt to the right size while the real data is on the way.

Mielo React: Components and Wrappers around Mielo.css — Inspired by GNOME’s Gtk4 look and LibAdwaita, this set of components and CSS variable driven styling is aimed at Electron/Tauri use cases when creating apps to look good on Linux. GitHub repo.