Not long ago, most people argued against a framework like React, Angular or Vue for your personal website. Since then, tools on top of these frameworks -- like Gatsby.js for React.js -- emerged to make static website development effortless. So if there is no actual demand, why does a static website generator like Gatsby.js do so well ? A few…

In this tutorial I want to walk you through setting up ESLint for React. You should go through the previous tutorials in order to learn about the basic setup for Webpack and ESLint though. It will also tell you about all the benefits that come with the code style improvements which ESLint is giving your projects. Webpack and Babel for React ESLint…

In this tutorial, you will learn how to use Web Components, alias Custom Elements, in React . If you want to get started to build your own Web Components before, check out this tutorial: Web Components Tutorial . Otherwise, we will install an external Web Component in this tutorial to use it in React. You will learn how to pass props as…

Since React Hooks have been released, function components can use state and side effects. There are two hooks that are used for modern state management in React: useState and useReducer. This tutorial goes step by step through a useState example in React to get you started with this React Hook for state management. Simple State in React In the…

React uses synthetic events to handle events from button, input and form elements. A synthetic event is a shell around the native DOM event with additional information for React. Sometimes you have to use event.preventDefault(); in your application. The list component example is taken from this tutorial about state management in React which…

Basically a React application is just a bunch of components in a component tree. There is one root component which kicks of the rendering for all the other components below. Commonly these components are function components in modern React applications. But they can be class components as well. However, not all of these components are only used…

In a scaling application, you will notice that you pass a lot of state down to child components as props . These props are often passed down multiple component levels. That's how state is shared vertically in your application. Yet, the other way around, you will notice that more components need to use and thus share the same state. That's how…

There are several React Hooks that make state management in React Components possible. Whereas the last tutorial has shown you how to use these hooks -- useState, useReducer, and useContext -- for modern state management in React, this tutorial pushes it to the next level by implementing one global state container with useReducer and useContext…

Since React Hooks have been released, function components can use state and side-effects. There are two hooks that are used for modern state management in React (useState and useReducer) and one hook called useContext to use React's Context API to pass state or state updater functions down the component tree. Now, many people keep…