Introducing the New React DevTools

The React team is excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
What’s changed?
A lot has changed in version 4! At a high level, this new version should offer significant performance gains and an improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects.

React Transitions

A downloadable library of 18 transitions built with React in mind, but also works well with Angular, VanillaJS, etc. This library is designed for transitioning full pages as opposed to single elements.

Divjoy - The React Codebase Generator

Divjoy is a free, web-based React codebase generator. You simply select your stack, choose a template, and then it exports a complete React codebase. You can also create new React components, write JavaScript, and tweak styles inside the tool.

NodeGUI & React NodeGUI

NodeGUI is an open source library for building cross platform native desktop applications with JavaScript and CSS like styling. NodeGui apps can run on Mac, Windows, and Linux from a single codebase. React NodeGUI is a React renderer for NodeGUI. This means you can create native views using React components.

🚀 Trusted Types

Trusted Types, a new and experimental DOM API, now has initial support in React. Also make sure to check out the follow up improvements.

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

🐛 DevTools: Support for Adding Props and Improved Updating

You can now add new props when viewing components in the new DevTools and have advanced updating options.

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

🎇 React Flare Updates

The experimental React event system, now referred to as React Interactions in the codebase, has gotten a lot of updates:
• FocusTable API and Improvements
• TabFocusController and Improvements
• Keyboard Support for Virtual Clicks

⚛️ React Conf Speakers

This year’s React Conf is right around the corner. Check out the latest speaker list and start setting reminders for the live stream.

https://conf.reactjs.org/speakers.html

📝 Updated Contribution Doc

The contribution documentation was overhauled and now contains a section about feature flags.

https://github.com/reactjs/reactjs.org/pull/2369

🐞 DevTools: Highlight Legacy Context Use

The new DevTools will now show a separate label when the legacy context API is being used.

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

🐜 DevTools: Remove Welcome Dialog

Installing the latest DevTools version no longer shows the new welcome dialog.

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

⚠️ RFC: Warning System Revamp

Work is underway that overhauls the warning system throughout the whole codebase.

https://github.com/facebook/react/issues/16753

⭐️ Prevent Firefox Marking Required Textareas Invalid

This change fixes a bug in Firefox that marked required textareas as invalid.

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

Announcing React Native 0.61 with Fast Refresh

In this quick post, Dan Abramov announces the release of React Native 0.61, which includes a new reloading experience they're calling Fast Refresh.

How we use Firebase instead of Redux (with React)

This article explains how Pragli uses Firebase Realtime Database like a Redux store for our React front-end.

React Lazy: a take on preloading views

How to add preloading to your route based code split apps.

A Definitive Guide to SEO with a Serverless React Application in 2019

An exhaustive overview of all the ways you can render your React application to make it blazingly fast to load and work with social media scrapers and webcrawlers.

React 16.10.0 released

React DOM
• Fix edge case where a hook update wasn't being memoized.
• Fix heuristic for determining when to hydrate, so we don't incorrectly hydrate during an update.
• Clear additional fiber fields during unmount to save memory.
• Fix bug with required text fields in Firefox.
• Prefer Object.is instead of inline polyfill, when available.
• Fix bug when mixing Suspense and error handling.

Scheduler (Experimental)
• Improve queue performance by switching its internal data structure to a min binary heap.
• Use postMessage loop with short intervals instead of attempting to align to frame boundaries with requestAnimationFrame.

useSubnoscription
• Avoid tearing issue when a mutation happens and the previous update is still in progress.

Test Driven Development (TDD) with React, React Testing Library, and Jest

Test Driven Development (TDD) is a reversal in traditional thinking and coding processes. Rather than writing code, and then writing tests to verify that code, the process is reversed. This post outlines the pros and cons of utilizing TDD for developing React applications and explains how to try it out yourself.

Keeping global state management sane

Maintaining a big and complex react app is not for amateurs. Whatever you may choose to manage your app state, chances are that it's hard to pick up, like redux, or really convoluted, like making yourself a service layer. With the goal of making it easy for new developers to jump into our projects, at Labcodes decided it was time to give this problem a little more thought. Their answer was rel-events.

Demonstrating Reusable React Components in a Form

This is a good beginners' level guide to working with reusable React components, specifically how to use them to build a login form.