React Newsletter #237

We demo'd Remix.run, Next.js releases v10, and time-traveling state with Reactime 6.0


News

Next.js releases v10.0

  • Next.js Commerce - an all-in-one starter kit for high-performance ecommerce sites
  • Next.js Analytics - provides your Real Experience Score through data from actual visitors

We wrote a lot more about about Next 10 in yesterday's issue of Bytes. Have you subscribed yet?

Modern Web Conference 2021 - Call for Presentations

The Modern Web Conference brings together a few of the most popular web communities into a single event over 5 days. They're expecting over 50,000 (virtual) attendees next year and are looking for speakers on various technical topics (including React). Check out the link if you're interested in speaking.


Articles

When (and when not) to reach for Redux

This post from Mark Erikson (Redux maintainer extraordinaire) gives some helpful historical context on the problems Redux was initially created to solve to help you understand whether or not it'll be the best choice for your project in 2020.

Time-Traveling State with Reactime 6.0

State management is a crucial part in developing efficient and performant React applications. In this article, Vincent Nguyen writes about how the newly-released Reactime 6.0 can help improve the state debugging workflow by equipping developers with a robust suite of visualizations of their application’s state.

Sharing third party dependencies in a micro-frontend landscape using Webpack 4

In this article, Albino (a member of the ASOS web team) writes about using this new strategy to try and improve the performance of the ASOS website.

In React, component controls you!

For anyone working with React and forms (or individual inputs) the concept of Controlled vs. Uncontrolled components should be familiar. Yet, a much less known fact about React is that it actively tracks and controls the value for such input elements (ex: input, textarea, etc.). In this article, Yoav writes about his recent (and frustrating) brush with React's internal management of the input value that got him to dive into the source code.


Tutorials

Code Splitting with React and React Router v5

In this post (and video) you'll learn how to increase the performance of your application by adding code splitting with React and React Router v5.

Nested routes with React Router v5

In order to understand nested routes with React Router v5, you first need to be comfortable with React Router v5’s most fundamental component, Route. This tutorial and video from Tyler will help you get there.


Sponsor

React Data Grid component

ReactDataGrid is a feature-rich, blazing fast, pure React component, available in MIT or Commercial editions. It comes with built-in support for data binding, sorting, paging, grouping, inline edit, locked columns, row pining, movable/resizable columns and much more...


Projects

GraphQL Editor

GraphQLEditor makes it easier to understand GraphQL schemas. Create a schema by using visual blocks system. GraphQL Editor will transform them into code.

react-three-fiber Game Demo

This repo shows an example implementation of a top-down 2d game made with React and react-three-fiber. Felix used the core functionality to create Colmen's Quest and wanted to give one idea on how you can build a game with React.

react-input-with-debouncing

A small lightweight React input component with debouncing that can be used in place of normal <input /> or <textarea /> fields. The component renders input with debouncing onChange event.

React JSX Highcharts

Highcharts built with proper React components that are designed to be dynamic. It's optimized for interactive charts that need to adapt to business logic in your React application.


Videos

Remix.run - a first look

Remix, the new React server generated framework from the folks at React Training, has been released as a Supporter Preview. The question is: Does it live up to the hype? We were curious, so we bought a license to it to see how well it works. And last week, we did an hour-long live stream that covered the following with Remix:

  • Getting the app running
  • Creating some nested routes
  • Getting Tailwind set up and working
  • Addind a markdown post
  • Caching headers
  • Adding authentication using Firebase
  • Adding an authenticated route

made with ❤️ by ui.dev