How to fix the ugly focus ring and not break accessibility in React

Creating beautiful interfaces while maintaining accessibility has always been a challenge in the frontend. One barrier is the ugly “:focus” ring outline. Read on to learn how to figure out whether a focus outline should be shown using a React component. This helps you in making your sites more accessible without compromising on design.

Build a YouTube Clone Application Using React

In this video, you'll learn how to build a YouTube clone application from Scratch using React. This project covers lifecycle methods, project structure, destructuring, state management, passing props from parent to child components, API calls, and more.

❤️ Adopt Contributor Covenant

React is adopting the Contributor Covenant. It represents a shared understanding of what is expected form a healthy community.

https://github.com/facebook/react/pull/16613

🛠 DevTools v4 Release

After months of development, the experimental DevTools rewrite is now public. A lot has changed in version 4, check out the blog post for more detail.

https://reactjs.org/blog/2019/08/15/new-react-devtools.html

🌏 React Docs Localizations Update

The Arabic localizations is now complete:
• ar.reactjs.org
And the following localizations are now live:
• Azerbaijani: az.reactjs.org
• Bulgarian: bg.reactjs.org
• Indonesian: id.reactjs.org
• Mongolian: mn.reactjs.org
• Vietnamese: vi.reactjs.org

🚀 Babel Transform JSX to React.jsx/React.jsxDEV

As per the RFC for createElement changes, this change is an experimental fork of @babel/plugin-transform-react-jsx that transpiles to React.jsx instead.

https://github.com/facebook/react/pull/16432

🔄 Fast Refresh Explainer

Dan wrote an explainer of how a Fast Refresh integration for the Web could look like.

https://github.com/facebook/react/issues/16604#issuecomment-528663101

💤 Partial Support for React.lazy() in Server Renderer

The Server Render now has partial support for lazy-loaded components.

https://github.com/facebook/react/pull/16383

➡️ DevTools Moved into Core Repo

The DevTools are now part of the React Core repository. The previous repository now also directs to the Core one.

https://github.com/facebook/react/tree/master/packages/react-devtools

🎇 React Events Updates

• Tap Responder
• DOM Event Testing Library
• Support Screen Reader Virtual Clicks
• Rework the Responder Dispatching/Batching Mechanism

⏱ Scheduler: Profiling Features

This change adds two new profiling features to Scheduler, a sample-based approach where profiling information is written into a SharedArrayBuffer and an event-based approach that also works during page initialization.

https://github.com/facebook/react/pull/16542

🔎 Experimental React Scope Component API

This PR adds an experimental React.unstable_createScope for internal tests around focus management within React.

https://github.com/facebook/react/pull/16587

The story of a V8 performance cliff in React

This article describes how V8 chooses optimal in-memory representations for various JavaScript values, and how that impacts the shape machinery — all of which helps explain a recent V8 performance cliff in React core.

Why is React doing this?

Whenever Sebastian gives an explanation as to why React took a certain approach, it's probably best to listen. Here's one such example.

React Microfrontends and Monorepos: A Perfect Match

In this article, you'll learn to use a monorepo when implementing a microfrontend architecture. You'll explore how this approach mitigates problems typically associated with microfrontends.

Handling API request race conditions in React

You probably fetch some API data in your React apps, but have you covered the edge cases? Let's see what those edge cases are, when they happen, and how to avoid them.

A Guide to Deploying your React App with AWS S3

In this tutorial, you will learn how to deploy your React app to AWS S3. This includes setting up HTTPS, a custom domain, a CDN and continuous deployment. No prior AWS experience is needed as you will be taken through the entire process step-by-step.

React Hooks Mini Crash Course

This tutorial gives a high-level overview of React Hooks with useState and useEffect examples.

14 Beneficial Tips to Write Cleaner Code in React Apps

Every developer wrestles with how to write cleaner code. This article gives 14 practical tips for how to do just that when developing a React app.

Building React Components Using Children Props and Context API

React provides a number of powerful patterns to compose components, including Containment, Specialization, and Render Props. This article dives into the Containment pattern and provides some helpful examples.

Using TypeScript with React

This post is based on a talk Simon gave at the React JS & React Native Bonn Meetup. It aims to answer the following questions:
• What’s TypeScript?
• How can I use it with React?
• Why should I (not) use it?