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

The React Newsletter

Hi <<First Name>>,
 
Four Ways to Fetch Data in React

React is a focused component library. So it has no opinion on how to request remote data. If you’re requesting and sending data to web APIs via HTTP, here are four options to consider.

  1. Inline
  2. Centralized
  3. Custom Hook
  4. react-query/swr

Let’s explore each.

Side note: I’m making HTTP calls with fetch in this post, but the patterns apply to alternatives like Axios too. Also, if you’re using GraphQL, there are other good options to consider like Apollo. This post assumes you’re calling a traditional REST API.


Read more
 
How to use React Testing Library Tutorial

React Testing Library (RTL) by Kent C. Dodds got released as alternative to Airbnb's . While Enzyme gives React developers utilities to test internals of React components, React Testing Library takes a step back and questions us "how to test React components to get full confidence in our React components": Rather than testing a component's implementation details, React Testing Library puts the developer in the shoes of an end user of an React application.

In this React Testing Library tutorial, we will go through all the steps necessary to unit test and integration test your React components with confidence.


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.
Battlefield Developer Tells The Secrets of MobX Nested Stores
How to use nested stores in mobx. I'm showing how to implement dependent stores in MobX.

Watch video
 
How one CSS-in-JS library cut 56 KB from my bundle

Like many people working within the React ecosystem, I use a CSS in JS solution for implementing styles.

The two CSS-in-JS libraries I've used most in my projects are Emotion and Styled Components. They became quite popular as they let you define JSX components via an intuitive API.


Read more
 
33 line React

Thoughts on reading through the hacker news response.

React

  • you pass in a function that takes state and returns a virtual DOM (just a tree of plain ol' js objects)
  • it renders that virtual DOM as a real DOM in the browser
  • if you change the state, it runs the function again, this returns a new virtual DOM
  • it efficiently updates the real DOM so that it matches the new virtual DOM
It also does a load of other crap as well, but we're going to ignore that.

 

In this post, I'm going to make the smallest React-like thing that can do the above. It's very mithril influenced.

Here are sample applications: calendar pickersnake that use the library.

Lots of the code looks pretty code-golfy - I promise I don't do stuff like this at work, neither should you :-)


Read more
 
Prettier 2.0 “2020”

Better defaults, a better CLI and better heuristics. Oh, and TypeScript 3.8.

After a long and careful consideration, we decided to change the default values for the trailingCommaarrowParens, and endOfLine options. We made the CLI more intuitive. And we've finally dropped support for Node versions older than 10, which had grown to become a huge maintenance hassle and an obstacle for contributors. Read below in details.


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


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp