In a previous application, you have learned how to mock a GraphQL server in different ways when having Apollo Client as GraphQL client in your React application. The following application shows you how you can take this knowledge to the next level for writing tests for your Apollo Client queries and mutations. So far, the Apollo Client instance can…
The article is a short how to use CSS Modules in your create-react-app application . It shows you how to setup CSS Modules, but also how to use them in your components. After you have setup your application with create-react-app (e.g. npx create-react-app my-app ), you don't need to install anything else to make CSS modules work. They come out…
The article is a short how to add Sass support to your create-react-app application . It shows you how to setup Sass, but also how to use it in your components. You will learn how to style a specific component with it and how to define global style, such as variables for your color schema, that can be used throughout your application. After you…
The article is a short tutorial on how to achieve global state in React without Redux. Creating a global state in React is one of the first signs that you may need Redux (or another state management library such as MobX) in your application, because in React the local state is located on a component level. Hence you cannot have a real global state…
The article is a short tutorial on how to have state in React without a constructor in a class component and how to have state in React without a class component at all. It may be a great refresher on topics such as higher-order components and render prop components in React too. React State without a Constructor In React, state is used in a React…
In this React performance optimization tutorial, you will learn about React's shouldComponentUpdate lifecycle method and React's PureComponent API to a prevent rerender for React components. Usually React components and their child components rerender if state or props change. However, by using React's API, you can step in and make the decision…
The Intersection Observer API is a browser API which can be used to track the position of HTML elements in context to the actual viewport of the browser. The official documentation says: "The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top…
In this chapter, you will implement server-side architecture using GraphQL and Apollo Server. The GraphQL query language is implemented as a reference implementation in JavaScript by Facebook, while Apollo Server builds on it to simplify building GraphQL servers in JavaScript. Since GraphQL is a query language, its transport layer and data format…
The concept of children as a function or child as a function , also called render prop in general, is one of the advanced patterns in React (next to higher-order components ). The components which implement this pattern could be called render prop components. In this tutorial, you will learn everything about React's render prop pattern…
Newcomers to React often start with applications that don't need data fetching at all. Usually they are confronted with simple applications. That's good, because data fetching adds another layer of complexity to your application while taking the first steps in React. However, at some point you want to request real world data from an own or a third…
