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. - https://github.com/dvtng/react-loading-skeleton

#react

How to Create a Chrome Extension with React, TypeScript, Tailwind CSS and Vite

Covers everything you need to know right through to publishing in the Chrome Web Store. - https://www.luckymedia.dev/blog/how-to-create-a-chrome-extension-with-react-typescript-tailwindcss-and-vite-in-2024

#react

SPA Lazy Loading Pitfalls

A concise set of recommendations to address common problems with this widely used pattern. - https://reacttraining.com/blog/spa-lazy-loading-pitfalls

#react

How to Fetch Data in React

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. - https://www.robinwieruch.de/react-fetching-data/

#react

Component Composition is Great, BTW

A well-regarded author writes about using component composition to avoid conditional rendering for mutually exclusive states - https://tkdodo.eu/blog/component-composition-is-great-btw

#react

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 - https://blog.heroku.com/testing-react-app-chrome-heroku-ci

#react

Instrumenting a React App Using OpenTelemetry  - https://thenewstack.io/instrumenting-a-react-app-using-opentelemetry/

#react

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. - https://github.com/Yonom/assistant-ui

#react

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. - https://www.robinwieruch.de/react-component-types/

#react

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. - https://www.youtube.com/watch?v=eO51VVCpTk0

#react

How to Control a React Component from the URL  - https://buildui.com/posts/how-to-control-a-react-component-with-the-url

#react

Create Stunning Maps Effortlessly with React Leaflet - https://jsdev.space/mastering-react-leaflet/

#react

React Folder Structure in Five Steps, 2024 Edition

The latest result of Robin’s efforts at updating his popular posts to 2024 standards. Articles about structuring React apps are always popular; this one breaks the idea down to five steps going from the simplest of apps to more complex ones. Bulletproof React is also worth a look if you need something broader. - https://www.robinwieruch.de/react-folder-structure/

#react

How to Implement a 'Drag to Select' Mechanism

Josh wanted to implement drag based selection to make bulk operations easier for end users. It was harder than he thought, but he’s done a great job explaining every step of his approach. - https://www.joshuawootonn.com/react-drag-to-select

#react

How React Router v7 Became Type-Safe

An overview of the soon-to-be-released React Router 7, why recent type-safety improvements are both exciting and useful, as well as some live demos. - https://www.youtube.com/watch?v=ferLCqcLcGU

#react

How to Drag and Drop in React

Drag and drop is a basic UI expectation in many scenarios. Robin, always a well-regarded instructor, walks though the creation of a drag and drop capable component, step-by-step. - https://www.robinwieruch.de/react-drag-and-drop/

#react

React Compiler Beta Release

Five months ago we got our first official introduction to React Compiler, a new approach to improving React app performance by optimizing code at build time. It’s now a step closer, and React 17+ users and library maintainers are encouraged to give it a spin. - https://react.dev/blog/2024/10/21/react-compiler-beta-release

#react

Next.js 15 Released

Last week was a big week for the popular (some may even argue default?) React framework with Next.js Conf taking place (more on that later) and this major release. It includes a codemod CLI for easier upgrading, async request APIs, alignment with React 19, and more. - https://nextjs.org/blog/next-15

#react

Using shadcn/ui with Next.js 15 and React 19

Fresh, valuable documentation from the shadcn/ui project on the specifics of using the popular component library with React 19 generally, though with a slight emphasis on Next.js 15. - https://ui.shadcn.com/docs/react-19

#react

Next.js' Journey with Caching

A description of a new experimental (aimed at those who are “feeling adventurous” for now) mode that builds on just two concepts: Suspense and use cache. - https://nextjs.org/blog/our-journey-with-caching

#react