# React React is a library for building web and native user interfaces from components, using JavaScript and related tools such as JSX. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Copy-pasting more than just text DevFeed: [Copy-pasting more than just text]() Original publisher: [Read original article]() Author: Khan Academy Published: 2015-08-31T22:00:00Z Content type: tutorial Language: en Sources: [Khan Academy]() Topics: [Web Development](), [JavaScript](), [React](), [interactive website]() Tags: [alt-text](), [copy](), [engineering](), [interactive-content](), [javascript](), [news](), [web-frontend](), [widget]() ### AI overview Sam Lau describes how Khan Academy improved copy-pasting in Perseus, its interactive exercise and article editor, by moving widget metadata alongside copied text. The change preserves information such as image URLs and a number line's starting value, making it easier for content creators to move or duplicate widgets. ### Source excerpt By Sam Lau The Result I'll skip to the happy ending. This little feature implements more sophisticated copy-pasting ... Read more ## Fun with slope fields, css and react DevFeed: [Fun with slope fields, css and react]() Original publisher: [Read original article]() Author: Khan Academy Published: 2015-08-05T22:00:00Z Content type: opinion Language: en Sources: [Khan Academy]() Topics: [CSS](), [React](), [notifications](), [math]() Tags: [css](), [design](), [engineering](), [fun](), [math](), [news](), [notifications](), [react]() ### AI overview An account of designing a Khan Academy notification banner for LearnStorm winners under a tight three-day deadline. The project focused on improving the notification's visual presentation while incorporating LearnStorm's slope-field identity, using CSS and React. ### Source excerpt By Marcos Ojeda A while ago, we needed to send out a notification to all our LearnStorm winners ... Read more ## Inline CSS at Khan Academy: Aphrodite DevFeed: [Inline CSS at Khan Academy: Aphrodite]() Original publisher: [Read original article]() Author: Khan Academy Published: 2016-03-29T22:00:00Z Content type: article Language: en Sources: [Khan Academy]() Topics: [React](), [Server-side rendering](), [HTML](), [JavaScript](), [Latency](), [networking](), [Chrome]() Tags: [chrome](), [css](), [engineering](), [infrastructure](), [javascript](), [latency](), [network](), [news](), [react](), [server-side-rendering]() ### AI overview Jamie Wong discusses Aphrodite, Khan Academy's inline styling solution, the constraints that shaped it, and its use in production. The article explains how reducing bytes before content renders motivated server-side rendering and compares the initial-load byte requirements of server-side and client-side rendering. ### Source excerpt By Jamie Wong I won't ramble in this post about the maintenance woe that is CSS, as others ... Read more ## What's New in OSS at Khan Academy DevFeed: [What's New in OSS at Khan Academy]() Original publisher: [Read original article]() Author: Khan Academy Published: 2017-04-03T22:00:00Z Content type: article Language: en Sources: [Khan Academy]() Topics: [Open Source](), [Software](), [React](), [Functional programming](), [JavaScript](), [Algorithms](), [jQuery]() Tags: [algorithms](), [engineering](), [functional-programming](), [javascript](), [news](), [open-source-software](), [oss](), [react](), [web-frontend]() ### AI overview Khan Academy highlights several recent open-source projects, including Mu Lambda, a small JavaScript library of functional programming utilities; React Balance Text, a React wrapper for Adobe's Balance-Text project; Fuzzy Match Utils, which uses string-matching algorithms for filtering; and React Multi Select. ### Source excerpt By Brian Genisio At Khan Academy, we rely heavily on Open Source Software (OSS). The majority of our ... Read more ## Using static analysis in Python, JavaScript and more to make your system safer DevFeed: [Using static analysis in Python, JavaScript and more to make your system safer]() Original publisher: [Read original article]() Author: Khan Academy Published: 2018-07-26T22:00:00Z Content type: article Language: en Sources: [Khan Academy]() Topics: [JavaScript](), [Code quality](), [Python](), [Code review](), [Web Development](), [React]() Tags: [analysis](), [best-practices](), [code](), [code-quality](), [engineering](), [eslint](), [formatting](), [frontend](), [infrastructure](), [javascript](), [lint](), [news](), [python]() ### AI overview This article describes how Khan Academy uses custom linters and static analysis across JavaScript, Python, and Kotlin to prevent known bad patterns, keep duplicated logic or shared interfaces synchronized, and enforce frontend migration practices. ### Source excerpt By Kevin Dangoor "Linting" source code to look for errors is nothing new (the original "lint" tool turned ... Read more ## Our Transition to React Native DevFeed: [Our Transition to React Native]() Original publisher: [Read original article]() Author: Khan Academy Published: 2020-07-09T22:00:00Z Content type: opinion Language: en Sources: [Khan Academy]() Topics: [React Native](), [Android](), [iOS](), [Mobile](), [React]() Tags: [android](), [android-apps](), [architectures](), [backend](), [bridge](), [business-logic](), [change](), [code](), [engineering](), [ios](), [mobile](), [news](), [react-native]() ### AI overview Khan Academy describes completing its transition to React Native for its iOS and Android apps. The article explains why the team moved away from separate platform codebases and outlines the transition's exploration, straddling, and extinction phases. ### Source excerpt In 2017, Khan Academy started using React Native in our iOS and Android apps. As of this year, we've reached a big milestone: our transition to React Native is complete! Every screen in the app is rendered in React Native. ## Interning at Khan Academy: from student to intern DevFeed: [Interning at Khan Academy: from student to intern]() Original publisher: [Read original article]() Author: Khan Academy Published: 2016-12-12T23:00:00Z Content type: article Language: en Sources: [Khan Academy]() Topics: [Mobile](), [Front end](), [React](), [JavaScript](), [es6](), [User Experience](), [Scala]() Tags: [bugs](), [engineering](), [es6](), [features](), [frontend](), [intern](), [javascript](), [mobile](), [news](), [open-source](), [react](), [student](), [user-experience](), [web-frontend]() ### AI overview A student intern describes two months working on Khan Academy's X-on-Mobile initiative. The article covers improving a mobile math keypad, fixing gesture-related bugs, adding interface features, learning idiomatic ES6 with React in production, and working with open-source libraries. ### Source excerpt By Shadaj Laddad This past summer I had the amazing opportunity to work on a product I use ... Read more ## How to upgrade hundreds of React components without breaking production DevFeed: [How to upgrade hundreds of React components without breaking production]() Original publisher: [Read original article]() Author: Khan Academy Published: 2019-09-23T22:00:00Z Content type: tutorial Language: en Sources: [Khan Academy]() Topics: [React](), [Design system](), [upgrade](), [Accessibility](), [consistency](), [test](), [Deployment](), [Code]() Tags: [accessibility](), [components](), [consistency](), [deployment](), [design-system](), [engineering](), [how-to](), [news](), [production](), [react](), [test](), [upgrade](), [web-frontend]() ### AI overview This article explains how Khan Academy upgraded hundreds of React buttons and links to components from its Wonder Blocks design system. It describes using a prop-conversion guide, organizing small team-owned changes, deploying often, and validating the migration with detailed test plans and responsive screenshots. ### Source excerpt By Jangmi Jo Background In 2018, we started renewing our color system using our new shared design system, ... Read more ## Creating Query Components with Apollo DevFeed: [Creating Query Components with Apollo]() Original publisher: [Read original article]() Author: Khan Academy Published: 2017-06-12T22:00:00Z Content type: tutorial Language: en Sources: [Khan Academy]() Topics: [GraphQL](), [React](), [React Component](), [API]() Tags: [apollo](), [engineering](), [examples](), [flow](), [graphql](), [how-to](), [news](), [react](), [react-component](), [web-frontend]() ### AI overview This tutorial explains a Query Components pattern for React applications using Apollo and GraphQL. The pattern separates data definitions from presentational components, allowing the presentational layer to remain independent of Apollo and GraphQL. Examples cover filtering by postal code, loading and error states, empty results, and Flow types. ### Source excerpt By Brian Genisio Here at Khan Academy, we've been using GraphQL in several projects with great success. GraphQL ... Read more ## Jotai 3.0 Ships as a Modernized, ESM-Only Package That Drops Legacy Builds and Deprecated APIs DevFeed: [Jotai 3.0 Ships as a Modernized, ESM-Only Package That Drops Legacy Builds and Deprecated APIs]() Original publisher: [Read original article]() Author: Daniel Curtis Published: 2026-09-14T06:46:00Z Content type: news Language: en Sources: [InfoQ]() Topics: [React](), [releases](), [Tooling](), [Zustand]() Tags: [commonjs](), [compatibility](), [development](), [javascript](), [jotai-3-released](), [news](), [react](), [releases](), [typescript](), [upgrade](), [web-development]() ### AI overview Jotai 3.0.0 is a stable, ESM-only release for React that removes CommonJS, UMD, and SystemJS builds, drops older Node, React, and TypeScript support, targets ES2020, and removes several deprecated APIs. Most migrations are described as mechanical, with replacements and import changes documented in the migration guide. Larger feature changes, including concurrent-safe atoms and external-store syncing, are deferred to later versions. ### Source excerpt Jotai, an atomic state management library for React, has released version 3.0.0, now exclusively using ES modules. It maintains backward compatibility but removes some deprecated APIs. Migration is straightforward for most users. This version emphasizes a leaner core with improvements while deferring significant feature changes for future updates. By Daniel Curtis ## Meta Open-Sources Astryx, Its Agent-Ready React Design System DevFeed: [Meta Open-Sources Astryx, Its Agent-Ready React Design System]() Original publisher: [Read original article]() Author: Bruno Couriol Published: 2026-09-13T23:39:00Z Content type: news Language: en Sources: [InfoQ]() Topics: [Meta](), [React](), [Open Source](), [CSS](), [Tooling](), [Accessibility](), [Model Context Protocol](), [User interface design](), [Web Development](), [Svelte](), [Flutter]() Tags: [accessibility](), [css](), [development](), [flutter](), [javascript](), [mcp](), [meta](), [meta-astryx-design-system](), [news](), [open-source](), [react](), [svelte](), [tokens](), [tooling](), [typescript](), [ui](), [web-development]() ### AI overview Meta has beta-released Astryx, an open-source React design system developed internally over eight years. It offers more than 150 accessible components, customizable CSS design tokens, precompiled StyleX-based styling, component code ejection, CLI tooling, and an MCP endpoint for developer and AI workflows. ### Source excerpt Meta recently announced the beta release of Astryx, an open-source React design system developed internally over eight years. Astryx builds on React 19 and StyleX to provide over 150 accessible UI components, customizable CSS design tokens, and dedicated CLI and MCP tooling -- for both engineers and AI agents. By Bruno Couriol ## Building EasyReply: How We Used Laravel to Unify Customer Support DevFeed: [Building EasyReply: How We Used Laravel to Unify Customer Support]() Original publisher: [Read original article]() Author: Emma Blake Published: 2026-09-11T16:06:51Z Content type: article Language: en Sources: [Laravel]() Topics: [Laravel](), [Support](), [Artificial Intelligence](), [React](), [WebSocket](), [PHP](), [Single-page application (SPA)](), [email](), [Front end](), [Instagram]() Tags: [ai](), [api](), [development](), [email](), [frontend](), [instagram](), [laravel](), [queue](), [react](), [sponsor](), [support](), [ui](), [websocket]() ### AI overview This article explains how EasyReply uses Laravel to combine email, Slack, Instagram, and WhatsApp conversations in an AI-powered shared inbox. It describes Laravel Reverb for real-time updates, Inertia and React for the frontend, and queues for background processing. ### Source excerpt EasyReply pulls email, Slack, Instagram, and WhatsApp into one AI shared inbox, built on Laravel with Reverb, Inertia, React, and queues. The post Building EasyReply: How We Used Laravel to Unify Customer Support appeared first on Laravel News. Join the Laravel Newsletter to get Laravel articles like this directly in your inbox. ## Adding Google Login to a React App with Auth0 DevFeed: [Adding Google Login to a React App with Auth0]() Original publisher: [Read original article]() Author: Carla Urrea Stabile Published: 2026-09-11T00:00:00Z Content type: tutorial Language: en Sources: [Auth0 Blog]() Topics: [Auth0](), [React](), [SDK](), [OAuth](), [OpenID connect (OIDC)](), [Vite](), [web applications](), [Node.js]() Tags: [auth0](), [authentication](), [google](), [node-js](), [oauth](), [oidc](), [react](), [sdk](), [tutorial](), [vite](), [web-applications]() ### AI overview A step-by-step tutorial for adding Google login to a Vite-based React application with Auth0. It covers installing the Auth0 React SDK, creating and configuring an Auth0 application, setting callback, logout, and web-origin URLs, and preparing credentials for production Google authentication. ### Source excerpt Add Google login to a React app with Auth0. A step-by-step tutorial from installing the Auth0 React SDK to configuring your own production Google credentials. ## Build a support chatbot with Appwrite Functions and VectorsDB DevFeed: [Build a support chatbot with Appwrite Functions and VectorsDB]() Original publisher: [Read original article]() Author: Atharva Deosthale Published: 2026-09-10T00:00:00Z Content type: tutorial Language: en Sources: [Appwrite Blog]() Topics: [Appwrite](), [Chat Bot](), [Retrieval-Augmented Generation](), [Embeddings](), [React](), [SDKs](), [Node.js]() Tags: [api](), [build](), [chat](), [deploy](), [embedding](), [functions](), [node-js](), [rag](), [react](), [retrieval](), [support](), [tutorials]() ### AI overview This tutorial builds Harbor Help, a support chatbot for a fictional project-management product. It uses Appwrite VectorsDB to store help-center article embeddings, an Appwrite Function to retrieve relevant excerpts and generate answers through OpenRouter, and Appwrite Sites to host a React interface. The chatbot uses retrieval-augmented generation and can refuse questions outside the help center. ### Source excerpt Seed a help center, retrieve relevant articles with VectorsDB, and answer customer questions through an Appwrite Function. Deploy the chat interface on Appwrite Sites. ## Migrating evilmartians.com from Gatsby to Astro in two weeks with Claude DevFeed: [Migrating evilmartians.com from Gatsby to Astro in two weeks with Claude]() Original publisher: [Read original article]() Author: Travis Turner (richardturner@evilmartians.com) Published: 2026-09-08T00:00:00Z Content type: tutorial Language: en Sources: [Evil Martians]() Topics: [Astro](), [gatsby](), [migration](), [Claude](), [Large Language Model](), [GraphQL](), [React](), [Security](), [build performance]() Tags: [ai](), [astro](), [build](), [claude](), [dx](), [graphql](), [javascript](), [migration](), [react](), [security](), [typescript]() ### AI overview Evil Martians describes migrating evilmartians.com from Gatsby to Astro in two weeks with Claude. The article outlines the site's Gatsby maintenance, security, and build-time costs, and discusses four bugs that could have shipped if the agent had operated without oversight. ### Source excerpt 367 posts, four years on Gatsby, and no dedicated team: here's how we moved evilmartians.com to Astro in two weeks with an LLM. ## Checks for safer review of rapidly generated TypeScript and React frontend code DevFeed: [Checks for safer review of rapidly generated TypeScript and React frontend code]() Original publisher: [Read original article]() Author: Travis Turner (richardturner@evilmartians.com) Published: 2026-09-01T00:00:00Z Content type: tutorial Language: en Sources: [Evil Martians]() Topics: [Front end](), [React](), [TypeScript](), [Artificial Intelligence](), [OpenAPI Specification](), [API](), [mutation-testing](), [Testing](), [Code]() Tags: [agent-experience](), [agentic-development](), [agents](), [ai](), [api](), [code](), [continuous-integration](), [dx](), [frontend](), [llms](), [mutation-testing](), [openapi](), [react](), [testing](), [typescript]() ### AI overview This article presents ten checks for making rapidly generated TypeScript and React frontend code safer to trust and cheaper to review. It covers API contracts, generated types, boundary validation, mutation testing, dead-code detection, and mandatory checks. ### Source excerpt Ten checks that catch what AI-written frontend code hides: contract codegen, boundary linting, mutation testing, and dead-code detectors. ## Develop and test MCP in Postman: jhipster-mcp in action DevFeed: [Develop and test MCP in Postman: jhipster-mcp in action]() Original publisher: [Read original article]() Author: Anthony Viard Published: 2026-08-19T16:00:00Z Content type: article Language: en Sources: [Postman Blog]() Topics: [Model Context Protocol](), [Postman](), [Spring Boot](), [Node.js](), [TypeScript](), [Angular](), [React](), [Vue.js](), [JSON](), [Remote Procedure Call (RPC)]() Tags: [ai-agents](), [angular](), [apache](), [cli](), [general](), [jhipster](), [json](), [mcp](), [node-js](), [open-source](), [post](), [react](), [rpc](), [spring-boot](), [typescript](), [vue]() ### AI overview This Postman developer article demonstrates jhipster-mcp, an open-source MCP server that exposes the JHipster generator to MCP clients. It uses Postman's MCP client to test tools, prompts, and resources for generating and evolving Spring Boot applications from JDL. ### Source excerpt Drive the jhipster-mcp server from Postman's MCP client to test tools, prompts, and resources before handing them to an AI agent. Try it today. The post Develop and test MCP in Postman: jhipster-mcp in action appeared first on Postman Blog. ## React SEO Best Practices: Proven Strategies to Optimize React Apps DevFeed: [React SEO Best Practices: Proven Strategies to Optimize React Apps]() Original publisher: [Read original article]() Author: RANIER MONTALBO, SENIOR SOFTWARE DEVELOPER @ TOPTAL Published: 2026-08-13T04:00:00Z Content type: article Language: en Sources: [Toptal Blog]() Topics: [React](), [Search engine optimization (SEO)](), [Server-side rendering]() Tags: [article](), [best-practices](), [react](), [seo](), [web]() ### AI overview This article explains how React applications can be optimized for search engines. It covers crawler visibility, React's SEO challenges, server-side rendering, static generation, metadata management, and performance tuning. ### Source excerpt React and SEO don't have to clash. Learn where React apps struggle with search visibility and how rendering strategies like SSR and static generation help crawlers see your content. ## Add authentication to your Electron app in three calls DevFeed: [Add authentication to your Electron app in three calls]() Original publisher: [Read original article]() Author: WorkOS Published: 2026-08-13T00:00:00Z Content type: tutorial Language: en Sources: [WorkOS Blog]() Topics: [Electron](), [Authentication](), [SDKs](), [OAuth](), [React]() Tags: [authentication](), [electron](), [oauth](), [react](), [sdk](), [security]() ### AI overview This tutorial shows how to add WorkOS AuthKit authentication to an Electron application using the main, preload, and renderer process contexts. It covers system-browser sign-in, React-based user access, backend calls with an access token, clean sign-out, custom protocol redirects, and keeping secrets out of the shipped binary. ### Source excerpt Wiring AuthKit through Electron's main, preload, and renderer processes, without shipping a secret in your binary. ## Making Navigations Instant in v0 DevFeed: [Making Navigations Instant in v0]() Original publisher: [Read original article]() Author: Jude Gao Published: 2026-08-06T13:00:00Z Content type: article Language: en Sources: [Next.js Blog]() Topics: [Next.js](), [Caching](), [React](), [browser](), [App](), [coding](), [Vercel]() Tags: [agent](), [app](), [browser](), [caching](), [case-study](), [code](), [coding](), [next-js](), [vercel]() ### AI overview This case study explains how v0 achieved instant navigations with Next.js 16.3. The approach combines runtime partial prerendering and browser caching for dynamic, personalized content, while a coding agent uses failing tests to identify slow navigations, apply fixes, and verify routes. ### Source excerpt The case study behind Instant Navigations in Next.js 16.3, and how we made v0's navigations instant using tests and a coding agent. ## Agentic Coding: Bet on the Primitives DevFeed: [Agentic Coding: Bet on the Primitives]() Original publisher: [Read original article]() Author: Robin Wieruch Published: 2026-07-31T06:00:00Z Content type: opinion Language: en Sources: [Robin Wieruch]() Topics: [agentic-coding](), [coding](), [React](), [SVG]() Tags: [abstraction](), [agentic-coding](), [ai-coding-agents](), [ai-engineer](), [build-vs-buy-components](), [coding](), [d3-vs-recharts](), [opinions](), [react](), [svg]() ### AI overview The article argues that agentic coding lowers implementation costs enough to make owning lower-level primitives more practical. It describes an experiment comparing D3 math primitives with React-rendered SVG against Recharts for custom charts: Recharts reached most of the result faster, but its remaining customization needs and an animation issue led to more workarounds than the primitive-based approach. ### Source excerpt Agentic coding collapses the cost of implementation labor. Why the rational bet is moving from high-level libraries back to primitives you own. ## Backstage Is Dead. The Platform Engineering World Moved On DevFeed: [Backstage Is Dead. The Platform Engineering World Moved On]() Original publisher: [Read original article]() Author: Zohar Einy Published: 2026-07-30T11:26:23Z Content type: opinion Language: en Sources: [Developer Experience & Platform Engineering Blog | Port]() Topics: [Backstage](), [Platform Engineering](), [internal developer portal](), [Developer experience](), [React](), [Terraform]() Tags: [backstage](), [developer-experience](), [developer-portal](), [internal-developer-portal](), [kubernetes](), [platform-engineering](), [react](), [terraform]() ### AI overview The article argues that Backstage, while foundational to internal developer portals and platform engineering, no longer fits how many teams work. It highlights production challenges including the need for React expertise, limited data-model flexibility, and the maintenance burden of customization. ### Source excerpt Why Backstage is dead: explore limitations, challenges, and why teams are moving to modern internal developer portal alternatives. ## How React Rendering Works and Why Memoization Is Often Not the First Fix DevFeed: [How React Rendering Works and Why Memoization Is Often Not the First Fix]() Original publisher: [Read original article]() Author: The T-Shaped Dev Published: 2026-07-28T06:10:09Z Content type: tutorial Language: en Sources: [The T-Shaped Dev]() Topics: [React](), [ui](), [Code](), [JavaScript](), [Development]() Tags: [code](), [component](), [context](), [javascript](), [react](), [render](), [state](), [ui]() ### AI overview This tutorial explains that a React render is a component function call, while DOM updates happen only during the commit phase. It identifies state changes, context changes, and new child elements from a parent as render triggers, and argues that moving state or restructuring children often helps before memoization. It also notes that StrictMode intentionally renders twice in development and that the compiler cannot move component state. ### Source excerpt One rule explains every React re-render. Get it right and memoization becomes the last fix, not the first. ## How to build a contact form with SendGrid email delivery on Webflow Cloud DevFeed: [How to build a contact form with SendGrid email delivery on Webflow Cloud]() Original publisher: [Read original article]() Author: Ismail Ajagbe Published: 2026-07-26T00:00:00Z Content type: tutorial Language: en Sources: [Webflow Blog]() Topics: [webflow](), [Next.js](), [React](), [App](), [Routing (disambiguation)](), [Server](), [Streams](), [configuration](), [Deployment](), [Web Development](), [Command-line interface]() Tags: [code](), [development](), [guide](), [guides](), [how-to](), [html](), [router](), [routing](), [server](), [validation](), [webflow]() ### AI overview This guide explains how to build a Webflow Cloud contact form using a React component, a Next.js App Router route handler, server-side validation, honeypot bot filtering, CORS configuration, and SendGrid for confirmation and team notification emails. ### Source excerpt Learn how to build a contact form on Webflow Cloud that sends confirmation and notification emails via SendGrid. [Next page]()