Copy
Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
 
How to Build a Cloud-Hosted Vector Tiles Map Web App in React — Part I

The map is the starting point of every story I have written so far. I enjoy making them, with alternating results, I enjoy share them and learn something new at the same time. In this tutorial, I will show you how I set up a complete NodeJS map web application using two different hosting platforms (Amazon AWS Elastic Beanstalk and Heroku). We will supply the spatial data in vector tiles through our own purpose-built tile server with Express and Mapbox geojson-vt, a library that generates vector tiles from GeoJSON. We will also build a simple interface using React and OpenLayers.

Building such an application is not too complicated but requires a lot of preparation steps, that’s why I decided to split it into three parts. If you already know how to scaffold a React app and have an S3 bucket/AWS user you’d want to jump to the second part where we will start putting some code together.


Read more
 
Upgrading to React 17: How to Fix the Issues and Breaking Changes
React 17 mostly focused on under the hood changes that will make it easier for consumers to gradually upgrade in the future. There were no new features and the breaking changes, in theory, affected few consumer components. While upgrading at Wealthfront was certainly more straightforward than past versions, we still had a few issues to overcome. Since React 17 is still relatively new, we thought it might be helpful to share these blockers we came across and how we resolved them.

Read more
 
Cypress Tutorial
Tired of having users email you that your web application is broken? Using Cypress.io, the JavaScript End to End Testing Framework, as a quality control tool will help a lot in preventing those emails. Yet Cypress.io, good as it is, is not a silver bullet.
 
In this upcoming video course Maurice de Beijer will teach you all about using Cypress.io. You will learn how easy it is to get started and create your first useful tests. You will also learn how to make tests for data driven applications more reliable and even faster. He will show you how to test applications using 3rd party authentications services. And you will learn how to include all that as part of your continuous integration build. Hellping you prevent errors from ever deploying.
 
Want to learn more? Go to https://www.cypress-tutorial.net/ and subscribe to hear about the updates and the course launch. Don’t worry, I am not going to spam you. And you can unsubscribe at any time.
Introducing Zero-Bundle-Size React Server Components
For comments, please find the RFC link in the blog post: https://reactjs.org/server-components

2020 has been a long year. As it comes to an end we wanted to share a special Holiday Update on our research into zero bundle size React Server Components. The demo is available now whether you want to play with it during the holiday, or when work picks back up in the new year.

Watch video
 
Using CRUD operations with React SWR for mutating REST API cache

The idea behind SWR which stands for stale while revalidating is defined in the docs as such. “SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.” So what does this have to do with CRUD? In case you didn’t know CRUD is a set of operations that are performed on data and it is shorthand for create, read, update and delete. By default, SWR will perform the read part of this for you by returning the result of a fetch request. But if you want to expand this you will have to mutate the cache from that request. That’s why I created a useCrud hook that will help us do just that. I also incorporate Typescript to ensure that the proper keys are used when updating the cache so you will need to have that set up as well.


Read more
 
Module Federation: Micro-frontends with webpack 5
In this article, we will look at one of webpack's exciting new features, Module Federation. This feature will allow dynamic code reloading from another project at runtime. Using module federation will enable sharing code from other projects with only a little tweaking in your webpack config. It can make a website consisting of multiple frontend applications appear as one seamless SPA. Neat, huh?

Read more
 
The Ugly side Of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

Let’s break down the motivation for ditching classes in favor of hooks, as described in the official React’s docs.


Read more
 
React video courses
Because I need to pay my bills 😉
 
Copyright © 2021 ABL - The Problem Solver, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp