React Newsletter #236

React 17.0, create-react-app 4.0, and Protected routes and authentication with React Router v5

News

React 17.0 officially released 🎉

We've heard about it for a while, but the big day finally happened last week - React 17 is officially here. Like your boyfriend in High School, React 17 is a “stepping stone" to future upgrades. Here's a recap.

Gradual Upgrades: Typically when upgrading Major versions, you'd have to upgrade your entire app. React 17 will make it easier to upgrade your app piece by piece rather than all at once.
New Event Delegation: Traditionally React would attach events not to the DOM nodes on which you'd declare them, but to the document node itself. This worked fine, unless you had various React versions in your app. In R17, React will attach events to the root DOM container where React is rendered, therefor, fixing the multiple versions issue.
New JSX Transform: One gotcha for new React devs is that even if you weren't using the React package directly, you'd still need to import React because of JSX. With the new react/jsx-runtime, that's a problem of the past.
Remove Event Pooling: Historically React has recycled synthetic event objects. Again, this is usually fine except for rare cases where you'd want to access the event "later on" like in an updater function.

create-react-app 4.0 is released 💃

This is a major release with several new features, including support for Fast Refresh, the new JSX transform, TypeScript 4 support, an upgrade to ESLint 7, and much more.

Articles

Protected routes and authentication with React Router v5

In this article, you'll learn how to create authenticated routes (routes that only certain users can access based on their auth status) using React Router v5.

What Vue.js Does Better Than React

In this article, Harry Wolff writes about a few things he likes better about Vue and how he hopes React can incorporate some of them in the future.

Pro tips for setting up a React Native project in 2020

Tamás wrote a few tips for getting started on a React Native project, including:

Project bootstrapping
Initial directory and file changes
Explicit build tool and dependency versions
Code formatting and linting
Absolute imports and modularization
Grouped exports

Tutorials

Building a React app to solve every Sudoku puzzle

In this tutorial, J.P. Solano walks you through a React version of the now-famous Python essay to solve every Sudoku puzzle (first written 10 years ago).

URL Parameters with React Router v5

This post from Tyler will teach you about how URL parameters are parameters whose values are set dynamically in a page’s URL. This allows a route to render the same component (UI) while passing that component the dynamic portion of the URL so it can change based off of it.

Getting Started With Next.js

This tutorial will be beneficial to developers who are looking to get started with Next.js or have already begun but need to fill some knowledge gaps.

Sponsor

Anima 4.0: Transform designs into developer-friendly React code

If you’re tired of your soul being crushed by unrewarding grunt work from coding UI from scratch, it’s time to check out Anima. Anima 4.0 translates designs into workable React code. Clean, reusable, dependency-free code components you’ll actually like to use.