React Archives - Marcin Wanago Blog - JavaScript, both frontend and backend

JavaScript React TypeScript

Introduction to Gatsby with TypeScript and GitHub Pages

When a browser opens a regular React application, it receives HTML with an empty div and a JavaScript file.

1

2

3

4

5

6

7

8

9

<html>

<head>

</head>

<body>

</body>

</html>

When the browser receives the above response, it runs the JavaScript file that modifies the DOM tree and creates a web page. This is a good solution for many applications but has a few drawbacks. […]

React Testing

JavaScript testing #14. Mocking WebSockets using the mock-socket library

This entry is part 14 of 14 in the JavaScript testing tutorial

Every automated test that we write should be deterministic. One of the things we need to do to achieve that is to make our frontend tests independent of the backend. Besides mocking REST API requests, we also need to learn how to mock a WebSocket connection. In this article, we create a simple backend application and […]

React

Rendering long lists using virtualization with React

When working on web applications, we often display lists of data. If the data is not particularly lengthy, we are probably okay with rendering all elements at once. However, as our data grows, we might notice performance issues. In this article, we create a simple React application that aims to render thousands of images using […]

JavaScript React

Creating recursive and dynamic forms with React Hook Form and TypeScript

React Hook Form is a popular library that helps us deal with forms and keep their code consistent across the whole application. In this article, we look into how to allow the user to shape the form to some extent and create data structures that are recursive. In the end, we get the following form: […]

React

Dynamic and recursive forms with Formik and TypeScript

Formik is a popular tool that helps us write React forms and keep their code consistent across even big projects. Besides having a fixed number of properties, we sometimes need to allow the user to shape the form to some extent and create recursive data structures. In this article, we learn how to do that […]

React Testing

JavaScript testing #10. Advanced mocking with Jest and React Testing Library

This entry is part 10 of 14 in the JavaScript testing tutorial

In the fourth part of this series, we’ve learned the basics of mocking API calls. However, there are often situations where we would like to test various more demanding cases. So, in this article, we implement more advanced examples on how to mock with Jest. Creating a simple React component Let’s start by creating a […]

JavaScript React

Using AbortController to deal with race conditions in React

When developing applications, data fetching is one of the most fundamental tasks. Despite that, there are some things to watch out for: one of them is race conditions. This article explains what they are and provides a solution using the AbortController. Identifying a race condition A “race condition” is when our application depends on a […]

JavaScript React

JavaScript testing #9. Replacing Enzyme with React Testing Library

This entry is part 9 of 14 in the JavaScript testing tutorial

A few days ago, React released version 18, which is not compatible with Enzyme. Furthermore, it probably is not achievable to use Enzyme with React 18. If you’re still using Enzyme, it is time to look into alternatives. The most popular option besides Enzyme seems to be React Testing Library. However, incorporating RTL requires a […]

JavaScript React

Measuring performance with Web Vitals and React

In this blog, we’ve discussed measuring and improving our performance using the Lighthouse audits. Google continued by introducing new tools that emphasize performance. Some time ago, they introduced the Web Vitals standard. In this article, we go through it and provide examples of measuring the Web Vitals metrics with React. Introducing Web Vitals There are […]

React

Managing WebSockets with Redux Toolkit Query and TypeScript

We’ve learned how to use Redux Middleware to manage WebSockets in a recent article. We’ve also got to know the Redux Toolkit Query and how it can improve our code. Interestingly, we can also use RTK Query to deal with a WebSocket connection. This article teaches how to establish a WebSocket connection with RTK Query […]