Robin Wieruch

Articles & Tutorials

Reasons to learn Redux as a JavaScript Developer (robinwieruch.de)
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.
How to test React-Redux connected Components (robinwieruch.de)
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.
How to Jest Snapshot Test the Difference (robinwieruch.de)
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.
How to shallow render Jest Snapshot Tests (robinwieruch.de)
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.
Redux Persist with Next.js (robinwieruch.de)
Jul 25, 2019
The following implementation shows you how to integrate Redux Persist into Next.js with a quick example.
How to test React components with Mocha, Chai & Enzyme (robinwieruch.de)
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.
End to End Testing React with Cypress (robinwieruch.de)
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.
How to test React components with Jest & Enzyme (robinwieruch.de)
Jul 17, 2019
In this React testing tutorial, we will introduce Enzyme in our Jest testing environment.
How to test React components with Jest (robinwieruch.de)
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.
Gatsby.js - A powerful Static Site Generator (robinwieruch.de)
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?
How to use Web Components in React (robinwieruch.de)
Jun 12, 2019
In this tutorial, you will learn how to use Web Components, alias Custom Elements, in React.
    React useState with Callback (robinwieruch.de)
    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.
    How to useState in React? (robinwieruch.de)
    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.
    What are Reusable Components in React? (robinwieruch.de)
    May 26, 2019
    In this tutorial, we will step through the process of making a component reusable for our React application.
    A React Lift State Up & Down Example (robinwieruch.de)
    May 22, 2019
    In order to experience up and down lifting of local state, the following tutorial will demonstrate it with two examples.
    How to Redux with React Hooks? (robinwieruch.de)
    May 20, 2019
    There are several React Hooks that make state management in React Components possible.
    React's useReducer vs Redux (robinwieruch.de)
    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.
    How to Scroll to Item in React? (robinwieruch.de)
    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.
    How to useReducer in React? (robinwieruch.de)
    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.
    How to use SVG Icons as React Components? (robinwieruch.de)
    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.
    useReducer vs useState in React (robinwieruch.de)
    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.
    What are Controlled Components in React? (robinwieruch.de)
    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.
    React List Components by Example (robinwieruch.de)
    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.
    React State with Hooks: useReducer, useState, useContext (remysharp.com)
    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.
    React Hooks: Migration from Class to Function Components (robinwieruch.de)
    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.
    React Function Components by Example (robinwieruch.de)
    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.
    React Component Types: A complete Overview (robinwieruch.de)
    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.
    How to use MobX in React Firebase (robinwieruch.de)
    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.
    How to use Redux in React Firebase (robinwieruch.de)
    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.
    React Component Composition (robinwieruch.de)
    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.
    How to use React Router with Firebase (robinwieruch.de)
    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.
    How to learn React.js in 2019 (robinwieruch.de)
    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.
    Email Verification with Firebase in React (robinwieruch.de)
    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.
    React Redux Tutorial for Beginners [2018] (robinwieruch.de)
    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.
    Firebase Login with Facebook (robinwieruch.de)
    Dec 07, 2018
    A tutorial on how to activate Facebook login for Firebase or Firestore where no email is required.
    Firebase Login with Twitter (robinwieruch.de)
    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.
    A visual Firebase Tutorial (robinwieruch.de)
    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.
    How to link Social Logins with Firebase in React (robinwieruch.de)
    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.
    Social Logins in Firebase React: Google, Facebook, Twitter (robinwieruch.de)
    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.
    React Firebase Auth Persistence with Local Storage (robinwieruch.de)
    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.
    React Firebase Authorization with Roles (robinwieruch.de)
    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.
    A Firebase in React Tutorial for Beginners [2018] (robinwieruch.de)
    Nov 20, 2018
    A beginners tutorial to learn Firebase in React for business application with authentication, authorization and a real-time database.
    How to fetch data with React Hooks? (robinwieruch.de)
    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.
    A GraphQL Tutorial for Beginners (robinwieruch.de)
    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 ...
    A Apollo Client Tutorial for Beginners (robinwieruch.de)
    Nov 01, 2018
    This tutorial shows you how to use Apollo Client for GraphQL without any other third-party library.
    How I built my own course platform (robinwieruch.de)
    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.
    Prevent React setState on unmounted Component (robinwieruch.de)
    Oct 21, 2018
    How to avoid the React warning: Can only update a mounted or mounting component.
    Writing Tests for Apollo Client in React (robinwieruch.de)
    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 ...
    React Code Style with ESLint + Babel + Webpack (robinwieruch.de)
    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.
    How to manage React State with Arrays (robinwieruch.de)
    Oct 04, 2018
    Learn how to manipulate arrays in React state by using JavaScript array methods such as concat, map and filter. Whereas vanilla JavaScript is used for the arrays, React is only used to set the new state in the end.
    create-react-app with CSS Modules (robinwieruch.de)
    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.
    create-react-app with Sass (robinwieruch.de)
    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.
    React Global State without Redux (robinwieruch.de)
    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.
    All React Conditional Rendering Techniques (robinwieruch.de)
    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?
    How to prevent a rerender in React (robinwieruch.de)
    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.
    Intersection Observer API in React (robinwieruch.de)
    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.
      GraphQL Server Tutorial with Apollo Server and Express (robinwieruch.de)
      Aug 22, 2018
      Learn how to build a GraphQL server with Apollo Server and Express with authentication, authorization, pagination, subscription, database access, tests.
      React's Render Props Pattern - Children as a Function (robinwieruch.de)
      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.
      How to pass props to components in React (robinwieruch.de)
      Jul 29, 2018
      In this guide, I want to explain React props in greater detail.
      JavaScript fundamentals before learning React (robinwieruch.de)
      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.
      How to fetch data in React (robinwieruch.de)
      Jul 06, 2018
      The article gives you a walkthrough on how to fetch data in React.
      Why Apollo: Advantages, Disadvantages & Alternatives (robinwieruch.de)
      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.
      Why GraphQL: Advantages, Disadvantages & Alternatives (robinwieruch.de)
      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.
      How to use Redux with Apollo Client and GraphQL in React (robinwieruch.de)
      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.
      How to build a GraphQL client library for React (robinwieruch.de)
      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.
      Getting Started with GitHub's GraphQL API (robinwieruch.de)
      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.
      A minimal Apollo Client in React Example (robinwieruch.de)
      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.
      Mocking a GraphQL Server for Apollo Client (robinwieruch.de)
      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.
      Visual Regression Testing and React Storybook (robinwieruch.de)
      May 16, 2018
      This article is all about visual regression testing in React.
      A apollo-link-state Tutorial for Local State Management (robinwieruch.de)
      May 04, 2018
      I want to show how to use apollo-link-state instead of introducing Redux or MobX in a React example application.
      A complete React with Apollo and GraphQL Tutorial (robinwieruch.de)
      May 01, 2018
      In this tutorial, you will learn how to combine React with GraphQL in your application by using Apollo.
      A complete React with GraphQL Tutorial (robinwieruch.de)
      Apr 09, 2018
      In this tutorial, you will learn how to combine React with GraphQL in your application.
      React's Context API explained: Provider and Consumer (robinwieruch.de)
      Mar 31, 2018
      This article explains how to use React’s new context API for passing props down the component tree.
      React Testing Tutorial: Test Frameworks & Component Tests (robinwieruch.de)
      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.
      How to setup React.js on MacOS (robinwieruch.de)
      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.
      How to setup React.js on Windows (robinwieruch.de)
      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.
      Getting started with React and Parcel (robinwieruch.de)
      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.
      How to accept Paypal payments with React (robinwieruch.de)
      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.
        How to learn React, Angular or Vue in 2018? (robinwieruch.de)
        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.
        The minimal React + Webpack 4 + Babel Setup (robinwieruch.de)
        Jan 18, 2018
        The article is more about teaching people how to setup their own project without a third-party boilerplate project.
        Tips to learn React + Redux in 2018 (robinwieruch.de)
        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.
        Programmatic Slack invite in JavaScript and React (robinwieruch.de)
        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?
          MobX (with Decorators) in create-react-app (robinwieruch.de)
          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.
          What's new in React 16? (robinwieruch.de)
          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.
          SVG Patterns in React - Build a Twitter Wall (robinwieruch.de)
          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.
          8 things to learn in React before using Redux (robinwieruch.de)
          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.
          How to use React's Provider Pattern with React's Context API (robinwieruch.de)
          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.
          Redux and Redux Saga in Next.js (robinwieruch.de)
          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.
          Accept Stripe Payments with React and Express (robinwieruch.de)
          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.
            Advanced List in React - Build a powerful Component (Part III) (robinwieruch.de)
            Jun 13, 2017
            This part introduces an advanced list in React that will enable you to opt-in infinite scrolling and pagination.
            Infinite Scroll in React - Build a powerful Component (Part II) (robinwieruch.de)
            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.
            Paginated List in React - Build a powerful Component (Part I) (robinwieruch.de)
            May 29, 2017
            The first part of the series covers the paginated List component in React.
            Session Storage and Local Storage in React (robinwieruch.de)
            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.
            A gentle Introduction to React's Higher Order Components (robinwieruch.de)
            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.
            Redux or MobX: An attempt to dissolve the Confusion (robinwieruch.de)
            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.
            When to use React's Ref on a DOM node in React (robinwieruch.de)
            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.
            10 Reasons why I moved from Angular to React (robinwieruch.de)
            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.
            MobX React: Refactor your application from Redux to MobX (robinwieruch.de)
            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.
            Flow: Type Checking with Flow in React + Redux (robinwieruch.de)
            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.

            Books & Guides

            The Road to React with Firebase (leanpub.com)
            Jan 28, 2019
            Your journey to master Firebase in ReactThe book walks you through building a full-blown application with advanced React and Firebase.
            The Road to learn React (roadtoreact.com)
            Feb 20, 2018
            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.
            Taming the State in React (roadtoreact.com)
            Sep 26, 2017
            Learn about local state in React and state management with Redux and MobX from scratch.