Articles & Tutorials
Jun 14, 2021
In this tutorial, I want to show you how to use React Table Library with its useSort plugin for a sort feature. In the previous example, you have already installed React Table Library to create a table component. Now, we will enable users to sort columns in the table by clicking on a column's header.
Robin WieruchMay 03, 2021
Here I want to give you a walkthrough of my thought process, how I designed the API requirements, and how I implemented this tree table component in React eventually.
Dec 10, 2020
In this React Hooks tutorial, I want to show you how to use a middleware for React's useReducer Hook. This middleware would run either before or after the state transition of the reducer and enables you to opt-in features.
Oct 01, 2020
I am still an advocate for higher-order components these days, because there composable nature of enhancing components fascinates me. However, there are problems with HOCs which shouldn't be denied and which are entirely solved by React Hooks.
Aug 05, 2020
Expo is a powerful environment for React Native which helps you from creation to distribution of your React Native apps. Without the need to directly use XCode (iOS) or Android Studio, Expo allows you to see your work in progress apps on a phone, emulator, or browser.
Jul 13, 2020
React's useMemo Hook can be used to optimize the computation costs of your React function components. We will got through an example component to illustrate the problem first, and then solve it with React's useMemo Hook.
Jul 06, 2020
React's useCallback Hook can be used to optimize the rendering behavior of your React function components. We will go through an example component to illustrate the problem first, and then solve it with React's useCallback Hook.
Jun 09, 2020
React's memo API can be used to optimize the rendering behavior of your React function components. We will got through an example component to illustrate the problem first, and then solve it with React's memo API.
Jun 01, 2020
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.
May 18, 2020
Today I came across a question in my Newsletter regarding computed properties in React. I didn't know about the term computed properties before, because such a term doesn't really exist in React, but it exists in other frameworks like Vue. Maybe I would call it computed values, computed state, or derived state (not from props though) in React.
May 18, 2020
It doesn't happen often, but sometimes you have to update state from props in React. In this brief walkthrough, I want to show you a use case where you would want to derive state from props and how to do it for the initial props and updated props. Keep in mind that this concept should only be used rarely though, because often there is no need to initialize state from props.
May 17, 2020
This tutorial walks you through the most common scenarios for managing arrays in React state. For each I want to show you a array example in React state, such as how to push an item to an array or how to update an item in an array, when React state is used to store it.
May 14, 2020
It's a common task in React to add an item to a list. Here I want to show you briefly how this works. Every time you want to modify something in React, for example a list where you want to add an item, you have to use React's state management.
May 10, 2020
Follow me on this React journey to learn more about these different strategies and approaches in CSS to style your React components.
Apr 25, 2020
In this React Ref tutorial, I want to give you a step by step introduction to refs in React.
Mar 10, 2020
Micro Frontends are the equivalent for Microservices: Whereas microservices are an architecture to split up monolithic backend applications into smaller services, micro frontends can be used to achieve the same on the frontend. But they are not as popular as microservices yet.
Feb 18, 2020
Just recently I had to use Docker for my create-react-app web application development. Here I want to give you a brief walkthrough on how to achieve it.
Feb 12, 2020
When my last client asked me about internationalization in React, I went through all the hoops to prepare a presentation for them. In this React tutorial, I want to show you the gist of what I have learned about translating a React application.
Jan 28, 2020
The following article will give you an opinionated approach to select from complementary libraries to build a well-rounded React application. It's up to you to exchange them with your choices.
Jan 16, 2020
The article aims to be an exhaustive list of options for conditional renderings in React and best practices for these patterns.
Jan 15, 2020
In this React tutorial, we will get to know event handlers in React for HTML elements such as button and input elements. You will learn how to use a button with its onClick event and how to define and use different kinds of event handlers. Essentially we will go through three kinds of event handlers: event handlers, inline event handlers and callback event handlers.
Dec 02, 2019
In this React component tutorial by example, we will create a React Range Component with React Hooks and a Function Component.
Dec 02, 2019
In this React component tutorial by example, we will create a React Slider Component with React Hooks and a Function Component.
Oct 19, 2019
React's Function Components come with React Hooks these days. Not only can React Hooks be used for State in React but also for using React's Context in a more convenient way. This tutorial shows you how to use React's useContext Hook.
Oct 19, 2019
CSS Modules are one of the most popular ways for styling React components. Whether you are using only CSS or a more advanced pre-processor like SASS, it doesn't matter for CSS Modules: You can write all these styles in your style sheet files next to your React components.
Oct 17, 2019
React Context is a powerful feature. If your React application grows in size beyond a small application, there is nothing wrong in giving it a shot. Many third-party libraries like Redux are using it under the hood anyway, so why not learning about it.
Oct 14, 2019
In this extensive walkthrough, I want to guide you through all the possibilities of state management in React.
Sep 21, 2019
Redux is a whole mindset shift for many people in the JavaScript community, who literally grew up with only web development, but never heard about function composition or immutability before. Whether Redux stays with us for a few more years or makes place for other state management libraries, it leaves a great legacy on how we develop modern web applications.
Aug 30, 2019
React components connected to Redux can turn out pretty complex. Thus most people think that testing these complex components can turn out very complex as well. But it shouldn't be complex at all, if you take full control of the Redux store in your integration/unit test for the React component.
Aug 15, 2019
Snapshot tests are a common way to write lightweight component tests. When a snapshot test runs for the first time, it stores its output (e.g. rendered component’s HTML structure) in a snapshot output file.
Aug 10, 2019
If you are using Snapshot Tests with Jest for your components, there are a few pitfalls you have to be aware of.
Jul 25, 2019
The following implementation shows you how to integrate Redux Persist into Next.js with a quick example.
Jul 21, 2019
Before setting up the test setup with different testing libraries and writing the React component tests, you will need a simple React application which can be tested in the first place.
Jul 18, 2019
End-to-end testing (E2E) was always a tedious task with testing frameworks from the past. However, nowadays many people are using Cypress.io for it. Their documentation has a high quality and their API is concise and clean.
Jul 17, 2019
In this React testing tutorial, we will introduce Enzyme in our Jest testing environment.
Jul 16, 2019
Jest got introduced by Facebook for testing JavaScript and especially React applications. It’s one of the most popular ways to test React components nowadays. Since it comes with its own test runner, you can simply call Jest from the command line to run all your tests.
Jul 08, 2019
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?
Jun 12, 2019
In this tutorial, you will learn how to use Web Components, alias Custom Elements, in React.
Jun 03, 2019
If you have started to use React’s useState hook for your application, you may be missing a callback function, because only the initial state can be passed to the hook.
May 30, 2019
This tutorial goes step by step through a useState example in React for getting you started with this React Hook for state management.
May 26, 2019
In this tutorial, we will step through the process of making a component reusable for our React application.
May 22, 2019
In order to experience up and down lifting of local state, the following tutorial will demonstrate it with two examples.
May 20, 2019
There are several React Hooks that make state management in React Components possible.
May 13, 2019
Now, many people keep wondering: Does useContext and useReducer replace Redux? As of the time of writing this article, React Hooks don’t replace Redux.
May 07, 2019
A brief tutorial which shows you two use cases on how to scroll to an item within a list of items in a React List Component. We will use the native browser API to scroll to our React element with a button click. It’s up to you how to trigger the event in the end.
Apr 28, 2019
This tutorial goes step by step through a useReducer example in React for getting you started with this React Hook for state management.
Apr 23, 2019
Today I want to give you a straightforward approach on how to use SVG icons as React components for your next React application.
Apr 17, 2019
There are two main hooks that are used for modern state management in React: useState and useReducer. This tutorial doesn’t explain both React hooks in detail, but explains their different use case scenarios.
Apr 10, 2019
There are quite a lot of articles about React out there speaking about controlled and uncontrolled components without explaining them. It has been quite similar for my articles, whereas I always tried to add at least one or two sentences explaining them, but in the end, I thought it would be great to have a brief tutorial just showing a simple example for controlled components in React.
Apr 06, 2019
This tutorial for List components in React gives you a step by step walkthrough on how to render a list of simple primitives, how to render a list of complex objects, and how to update the state of your list in React.
Apr 06, 2019
In this tutorial, we will almost reach the point where these hooks mimic sophisticated state management libraries like Redux for globally managed state. Let’s dive into the application which we will implement together step by step.
Mar 26, 2019
This tutorial shows a migration path on how to write React Class Components as React Function Components with React Hooks. Therefore we will go into examples on how to migrate both state management and side-effects that are used in a Class Component to be used in a Function Component.
Mar 18, 2019
React Function Components – also known as React Functional Components – are the status quo of writing modern React applications. In the past, there have been various React Component Types, but with the introduction of React Hooks it’s possible to write your entire application with just functions as React components.
Mar 12, 2019
In this guide, I want to give React beginners an historical overview of different React Components and React Patterns. The goal is to give clarity about what React Component Types developers have at their disposal, which are still used in modern React applications, and why some of them are not used anymore.
Feb 10, 2019
So far, it was fine to rely only on React’s local state and React’s Context API. This tutorial dives into using MobX on top of React and Firebase for the state management.
Feb 10, 2019
This tutorial dives into using Redux on top of React and Firebase for state management. You will exchange React’s local state (e.g. users on admin page, messages on home page) and React’s context (e.g. session management for authenticated user) with Redux.
Jan 30, 2019
In this tutorial, I want to step through React’s Component Composition step by step by evolving examples around this React pattern.
Jan 01, 2019
A React tutorial on how to combine React Router and Firebase to navigate a user through the application while fetching data from the Firebase database or even passing data through React Router.
Jan 01, 2019
How to become a React developer in 2019. A guide that shows one how to learn React step by step, which JavaScript skills are needed to get started, and how to commit yourself every day to learn React.
Dec 20, 2018
A Firebase React tutorial on how to enable email verification. Only users that confirmed their email address with a email confirmation have access to your application.
Dec 13, 2018
A complete React Redux tutorial for beginners: Learn how to build React Redux applications from scratch by following this step by step implementation of an example application.
Dec 07, 2018
A tutorial on how to activate Facebook login for Firebase or Firestore where no email is required.
Dec 07, 2018
In this short visual guide, I want to show you how to activate the Twitter authentication for your Firebase or Firestore application.
Dec 07, 2018
A short visual Firebase tutorial should help you to create your first Firebase application that can be used with any web framework/library such as React, Angular or Vue.
Dec 06, 2018
A Firebase React tutorial on how to link social logins with each other under one account. The example covers linking Google, Facebook, Twitter and email/password sign in methods.
Dec 02, 2018
A tutorial on how to use social a login with Firebase in React. The example covers Google, Facebook and Twitter logins for user authentication.
Nov 27, 2018
A tutorial on how to use local storage for auth state persistence for a Firebase in React application. When reloading the browser, the user should stay authenticated without a flicker.
Nov 26, 2018
A tutorial on how to use authorization with roles and permissions when using Firebase in React. Learn how to protect routes with authorization rules and how to set properties to Firebase user.
Nov 20, 2018
A beginners tutorial to learn Firebase in React for business application with authentication, authorization and a real-time database.
Nov 12, 2018
A tutorial on how to fetch data in React with Hooks from third-party APIs. You will use state and effect hooks for the data request from a real API.
Nov 01, 2018
This GraphQL tutorial for beginners takes you on a journey to learn GraphQL. You will explore GraphQL with GitHub's GraphQL API and later learn how to build fullstack web applications with it ...
Nov 01, 2018
This tutorial shows you how to use Apollo Client for GraphQL without any other third-party library.
Oct 25, 2018
From having the idea to launching your own product: The article is a case study on how I built my own course platform in React, Stripe, Firebase to give other people a platform to learn React.
Oct 21, 2018
How to avoid the React warning: Can only update a mounted or mounting component.
Oct 19, 2018
The tutorial builds up on a mocked GraphQL API enabling you to write tests for your Apollo Client queries and mutations in React. It answers the question: How to test Apollo Client in React ...
Oct 09, 2018
You want to setup ESLint in your ReactJs project? But your project includes Babel and Webpack? This article will guide you through all the options with style guides such as Airbnb's style guide, the setup process for ESLint in React, and more beneficial recommendations to follow styling rules in your project.
Oct 03, 2018
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 it in your components.
Oct 03, 2018
A short guide on how to add Sass support to your create-react-app application which shows you how to setup Sass, but also how to use it in your React components.
Oct 02, 2018
A tutorial to showcase how to use React global state without Redux. There are React patterns that can be used to have an application wide state in React without a state management library.
Sep 21, 2018
Wondering how to perform a conditional render in React? The article is an exhaustive list of conditional renderings in React's JSX. How to use ternary operators, switch case and if else in React.js?
Sep 11, 2018
A React performance optimization tutorial which shows you React's shouldComponentUpdate lifecycle method and React's PureComponent API to prevent the rerendering of (child) components.
Sep 05, 2018
A tutorial to learn about the Intersection Observer API in React. You will use React's ref API with createRef() to observe elements in your React application in context of the viewport.
Aug 22, 2018
Learn how to build a GraphQL server with Apollo Server and Express with authentication, authorization, pagination, subscription, database access, tests.
Aug 08, 2018
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.
Jul 29, 2018
In this guide, I want to explain React props in greater detail.
Jul 18, 2018
The following walkthrough is my attempt giving you an almost extensive yet concise list about all the different JavaScript functionalities to complement your React application.
Jul 06, 2018
The article gives you a walkthrough on how to fetch data in React.
Jul 04, 2018
Overview about the advantages and disadvantages of using Apollo and its ecosystem for JavaScript applications. It mentions also Apollo alternatives such as Urql and Relay for React applications.
Jul 03, 2018
An overview about the advantages and disadvantages of using GraphQL instead of REST for JavaScript applications. It answers the question: 'What is GraphQL' and 'Why you should use GraphQL' for your next JavaScript application.
Jun 26, 2018
When having a GraphQL server, Apollo Client can be a valid option for your remote data. How fits Redux into the equation? This tutorial shows you an example on how Redux and Apollo Client can be used together in a React application. Whereas Redux is used for local data, Apollo Client is used for remote data.
Jun 13, 2018
A tutorial on how to build a GraphQL client library for React applications. It has three parts: the GraphQL client, connecting the GraphQL client to React, and offering Query and Mutation components for GraphQL operations.
Jun 09, 2018
I encourage GraphQL newcomers to start with the client-side by consuming a third-party GraphQL API before diving into the server-side of using GraphQL.
Jun 05, 2018
The tutorial guides you through building a minimal Apollo Client in React example application where Apollo Client is used for remote data and React's local state for local data.
May 28, 2018
The tutorial shows you how to mock your GraphQL server for your GraphQL client for testing or other purposes. Either you can reconstruct a GraphQL client-side schema or introspect the GraphQL server schema. Both ways use client-side resolvers to mock the data.
May 16, 2018
This article is all about visual regression testing in React.
May 04, 2018
I want to show how to use apollo-link-state instead of introducing Redux or MobX in a React example application.
May 01, 2018
In this tutorial, you will learn how to combine React with GraphQL in your application by using Apollo.
Apr 09, 2018
In this tutorial, you will learn how to combine React with GraphQL in your application.
Mar 31, 2018
This article explains how to use React’s new context API for passing props down the component tree.
Mar 19, 2018
A React tutorial on how to setup and use React component tests with testing frameworks such as Mocha, Chai, Sinon, Enzyme and Jest.
Feb 20, 2018
A concise step by step guide on how to setup React.js on MacOS. In a few steps, you will install Visual Studio Code, Node.js, NPM, Git, Prettier and create-react-app for building React applications with Mac OS.
Feb 20, 2018
A concise step by step guide on how to setup React.js on Windows for your PC. In a few steps, you will install Visual Studio Code, Node.js, NPM, Git, Prettier and create-react-app for building React applications with Windows.
Feb 10, 2018
The following article is a short guide on how to setup Parcel with React. Parcel is a bundler that got popular because of its zero-configuration setup for JavaScript applications.
Feb 04, 2018
Ever wondered how to integrate Paypal in your React application? This tutorial guides you through the setup process from using a Paypal checkout form in your React application.
Jan 31, 2018
How to learn React, Vue, Angular or any other framework? For many developers this question pops up every day. The article should give actionable guidance on how to escape the analysis paralysis and how to get from consuming to producing by following a simple learning framework.
Jan 18, 2018
The article is more about teaching people how to setup their own project without a third-party boilerplate project.
Jan 09, 2018
An extensive guide of tips, tricks and resources to learn React.js and Redux in 2018. The tutorial covers various topics in React, JavaScript ES6 and Redux to give you a great start in those topics.
Nov 05, 2017
The article guides you through the setup of an automated Slack invitation for a JavaScript and/or React applications. Why would you want a Slack invitation in the first place?
Oct 10, 2017
Everything you need to know about using MobX in a create-react-app with React. The article shows you all the different edge cases on how to activate JavaScript decorators, how to use MobX without decorators, and as bonus how to use MobX in Next.js.
Oct 05, 2017
All React 16 changes in one article. It tells you about the new return types with fragments and strings, portals in React, componentDidCatch and error boundaries for a robust error handling in React, setState with returning null and custom DOM attributes in React.
Aug 30, 2017
Wondering how you can use SVG in React? This article gives you a walkthrough of different SVG in React options. It showcases it with an implementation of using SVG as backgrounds in React with stylish patterns from svg-patterns or Hero Patterns.
Jul 19, 2017
Facts about React that should be known before using Redux (or MobX). Most important: Learn React first, then opt-in Redux but only if you need it. There are various techniques in React.js for scaling your local state management.
Jul 11, 2017
React's Provider Pattern is deployed by using React's Context API. It helps you to pass props from a parent component to deeply nested components in the component hierarchy. After having read the article, you will know how to use it yourself and how Redux and MobX are using it as well.
Jun 28, 2017
A couple of basic setup steps to use Redux combined with Redux Saga in Next.js. Whereas Next.js enables you to build server-side rendered React applications, Redux and Redux Saga make sure to handle your state not only on the client-side, but also on the server-side.
Jun 20, 2017
Ever wondered how to integrate Stripe in your React application? This tutorial guides you through the whole setup process from using a Stripe checkout form on the client-side to setting up an Express payment server.
Jun 13, 2017
This part introduces an advanced list in React that will enable you to opt-in infinite scrolling and pagination.
Jun 07, 2017
This part introduces infinite scroll in React in an elegant way by using higher order components. You will implement an infinite scrolling higher order component.
May 29, 2017
The first part of the series covers the paginated List component in React.
Apr 27, 2017
An article to showcase the usage of the session storage and local storage in React to persist your local state, to cache it for browser reloads and to make it expire.
Apr 04, 2017
A comprehensive yet easy to understand introduction to higher-order components in React. Higher order components, known as HOCs, are often a difficult to understand pattern in React.js. The article gives you a gentle introduction, how to use HOCs in an elegant way, how to abstract reusable logic and how to use recompose.
Mar 28, 2017
Using Redux or MobX in your React application? The article shows you all the differences between both state management libraries that can be used in React.
Mar 22, 2017
What about the ref attribute in React.js? This article gives you clarification around the ref attribute to access DOM nodes in React. It shows you how you can use it, when you should use it and where it can be used and where it shouldn't be used.
Jan 31, 2017
The article should help people to understand the benefits of React and Angular for making an educated decision to choose between Angular or React. It tells my story why I moved from Angular to React after using both libraries for years.
Jul 18, 2016
Refactor your React application from Redux to MobX. Use MobX instead of Redux for state management in React JS. Get to know actions, reactions and derivations in MobX and best practices.
Jun 21, 2016
The Flow: Type Checking with Flow in React + Redux tutorial will teach you how to use Flow in a React JS + Redux environment.
Courses & Video Series
Apr 21, 2020
In this course you will take a deep dive into React fundamentals, covering all new React concepts including Hooks. I do address some legacy features in case you’re working with an older codebase, but the majority of this course will focus on working with modern React. You will learn how to style your app, techniques for maintaining your app, and some more advanced concepts like performance optimization.
Books & Guides
Feb 24, 2020
The Road to learn React book teaches you the fundamentals of React. You will build a real world application along the way in plain React without complicated tooling.
Jan 28, 2019
Your journey to master Firebase in ReactThe book walks you through building a full-blown application with advanced React and Firebase.
Sep 26, 2017
Learn about local state in React and state management with Redux and MobX from scratch.