React Newsletter #219

PureScript (with React), Architecture Tips, and SSR with React and Deno


Articles

How to Write PureScript React Components to Replace JavaScript

PureScript helps reduce bugs and improve the stability of complex applications. In this (well written) post, you'll learn how to incrementally take over a small React application using PureScript's React and React Basic libraries while writing idiomatic code in both languages. The article is broken up into the following sections.

  1. Write a tiny React application in JavaScript
  2. Update the application to support PureScript
  3. Replace a React component with PureScript React, with the same interface and behavior as the original
  4. Replace the component again with React Basic

Client-Side Architecture Basics

Though the tools we use to build client-side web apps have changed substantially over the years, the fundamental principles behind designing robust software have remained relatively the same. In this guide, you'll go back to basics and discuss a better way to think about the front-end architecture using modern tools like React, Redux, xState, and Apollo Client.


Tutorials

Server Side Rendering React App with Deno

Two of Francesco's favourite things are React and dinosaurs. In this article you'll learn how he's put them together to develop a server side rendering React application with Deno. They also get bonus points for the fantastic domain name.

An in-depth beginner's guide to testing React applications

The goal of this blog post is to act as a guide for your first tests. You'll take a small application as an example and cover it with tests. You'll learn what you should test and why you should test it. You'll see different techniques that can help us to write tests with confidence without relying on trial and error.

Since this is a pretty long and in-depth blog post, there's even a table of contents.

  • Overview of testing React apps
  • The application to test
  • What should we test?
  • Writing the tests
  • Don't take a stab in the dark
  • How to access the rendered DOM tree
  • Interacting with DOM elements
  • Test if the correct page was rendered
  • Testing the form
  • Prevent duplication with a setup function
  • Changing and submitting the form
  • Accessing an element without ARIA role
  • Waiting for the data
  • Mocking API requests
  • Testing mock functions

Sponsor

React developers are in demand on Vettery

Vettery is an online hiring marketplace that's changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today. Get started today.


Projects

react-easy-flip

A React library for smooth FLIP animations. Easily animate originally unanimatable properties like DOM positions with one hook.

awesome-react-generator

Awesome React Generator is Command Line Tool that let's you generate component files/folders without leaving your terminal.


made with ❤️ by ui.dev