How to: React Table with Sort (robinwieruch.de)
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.
React useReducer with Middleware (robinwieruch.de)
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.
Why React Hooks over HOCs (robinwieruch.de)
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.
How to use Expo with React Native (robinwieruch.de)
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.
How to useMemo in React (robinwieruch.de)
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.
How to useCallback in React (robinwieruch.de)
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.
How to use React memo (robinwieruch.de)
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.
Computed Properties in React (robinwieruch.de)
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.
How to update state from props in React (robinwieruch.de)
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.
How to manage React State with Arrays (robinwieruch.de)
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.
Add an Item to a List in React (robinwieruch.de)
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.
How to Micro Frontend with React (robinwieruch.de)
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.
React Internationalization wit i18n (robinwieruch.de)
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.
React Libraries in 2020 (robinwieruch.de)
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.
React Event Handlers: onClick, onChange ... (robinwieruch.de)
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.
How to useContext in React? (robinwieruch.de)
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.
How to use CSS Modules in React? (robinwieruch.de)
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.
React Context (robinwieruch.de)
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.
React State (robinwieruch.de)
Oct 14, 2019
In this extensive walkthrough, I want to guide you through all the possibilities of state management in React.
Sep 21, 2019
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.
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 (robinwieruch.de)
Jul 16, 2019
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 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.
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 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 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.
How to learn React.js in 2019 (robinwieruch.de)
Jan 01, 2019
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.
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 ...
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.
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.
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.
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.
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.
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.
MobX (with Decorators) in create-react-app (robinwieruch.de)
Oct 10, 2017
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.
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.
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.
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.