Manage Global State with Context API and Hooks

Global State – What? Why? So, you have created a new JavaScript app? Cool. Using React? Even better! And filled it with several independent components? Awesome! If only there was a way for all of them to be friends and talk to each other in a convenient ... more

Optimize your app by being Lazy

Or, to put it more accusingly: Why are you making your users wait for your entire app to be loaded, when they are only going to use a tiny portion of it? Fact #1: Aspects of a website cater to different needs in different situations. One single user ... more

Managing content with Sanity

So you have an idea of an application and just started with your project. You need some content, and because you think a CMS (Content Management System) is overkill, you want to keep it simple and create some configuration with content which is imported ... more

Can you feel the Suspense?!

Yesterday we looked at how Suspense can be used to support code splitting and lazy loading of components. Today however, we are going to look to the future and see what Suspense will become. We will learn more about Suspense for data fetching and what ... more

Stop... Render Time!

The concept of Concurrent Mode is not a new revolutionary feature, but for React it creates some nice new opportunities. Even though most React applications are fast, you often stumble across some issues with slow rendering. If you have triggered some ... more

Do you even JSX bro?

JSX is a syntax extension to JavaScript, that's a funny blend between JavaScript and a templating language. It's what most developers use to create React apps, and if you're on day 23 of this React calendar, I'm pretty sure you've at least seen it before. ... more

How to create components

React celebrated its fifth birthday in 2018. For a front-end framework, that's a pretty long run! Through those 5 years, new features have been added, older ones have been deprecated, and APIs have changed drastically. This post will introduce you to ... more

How to CSS in React

Getting started using Create React App If you are starting from scratch, Create React App is a great way to get started. Without any configuration you can import your CSS files like you import your React components. Since CRA uses Babel you can also use ... more

Server-side rendering

Server-side rendering - worth the effort? In simple terms, server-side rendering (SSR) in React enables you to render your app to static html on a server, which can then be returned to a browser. There are numerous ways of setting up the full SSR experience ... more

How to use SVGs in React

Even though IE 11 still struggles a bit with properly scaling SVG files, SVGs are now supported by all modern browsers. That is, at least according to Can I Use. To cite Jake Giltsoff: Scalable Vector Graphics can look crisp at all screen resolutions, ... more

Ho Ho Hooks

From time to time, you create a React component as a function since state is not necessary at that point. In the end, you catch yourself converting your function into an ES6 class anyway. Unfortunately, classes often tend to become complex and make code ... more

Introducing Typescript to your React / Webpack apps

If you use create-react-app If you’re using create react app, Facebook has made it very simple to introduce typescript: # npm: $ npm install typescript @types/node @types/react @types/react-dom @types/jest # yarn: $ yarn add typescript @types/node @types/react ... more

Creating composite components

When I work on large applications, I often stumble across usecases where a simple component just isn't enough. These pieces of UI tend to be the ones that are reusable, flexible to fit a ton of usecases, and end up with a multiple-digit number of properties. ... more

Introduction to memoization

So, what is memoization? First, we need to be able to identify deterministic or pure functions as they are sometime referred to in the react world. Basically, what that means is that the function will, given the same input always return the same output. ... more

Accessibility in React

Accessibility in React When we are creating web apps we should think of all our users. Everyone does not have perfect eyesight or normal motor functions. Depending where you are you might even have to accommodate for these users by law. I feel like it ... more

Let´s fetch some data

Fetching data from an API in React can be done quite simple. JavaScript now comes with the built in Fetch API, which gives you access to a fetch method. So if you want to make a request to an API, it can be done like this: componentDidMount() { fetch('https://mydomain/api/customers') ... more

Why is this so hard?

Why is this so hard? To better understand why we need to bind this in React, we should understand how this works in JavaScript. Let's take a shot at it with the following snippet. class Santa() { constructor() { this.catchphrase = "Ho ho ho ho!"; ... more

Documentation with Docusaurus

Docusaurus First of all, I have to say that Docusaurus is a BLAST to work with. I should know, I recently created the documentation websites for React Redux with it! Like React, Docusaurus is an open source project that originated at Facebook. There are ... more

Some cool React tips and tricks

Refs - and when not to use them First out is refs. Refs are references to either a React component or a DOM node. They are useful when you want to call imperative functions, like focusing an input field or triggering some other imperative DOM API. They ... more

The definite guide to lifecycle events!

Class based components have something called lifecycle events that help you set up new components, tear down old ones and react to changes. But why are they there, and when should you use them? And what is a lifecycle? What is a component lifecycle? ... more

Below the surface

Ever read online that React is declarative? Yeah, me too. Unfortunately, I had no idea what meant for the longest time. Simply put, React lets you state what you want , not how you want it . That means - instead of creating a DOM element and putting ... more

Understanding Webpack and Babel

Back in the day, most React tutorials started with a 2 hour course in how to set up a build pipeline that would support React apps. Then create-react-app showed up. Now tutorials are much easier to follow. However, it also had the unfortunate side-effect ... more

Boost your performance!

React is fast. I mean, real fast. It re-renders your entire app in a matter of milliseconds (if even that) whenever you make a change to the state or data feeding into it. The way React does this is by minimizing the amount of operations it asks the ... more

Class property initializers

Usually, when you create a class-based React component, you end up with something like this at the top: class MyComponent extends React.Component { constructor() { super(); this.state = { isClicked: false, isHovering: false, }; this.onClick = this.onClick.bind(this); ... more

Functional vs class components

React is all about components. These little nuggets of UI compose together to create your application. Some are really versatile and reusable (like <Button /> or <InputField /> components), while others are one-off containers that provide ... more

Check out type checking!

When your React application grows and gets used by real users for any period of time, you're going to stumble into the occasional bugs. Although I really love JavaScript, it's really easy to forget edge cases like when something is null or false instead ... more

Split your app into pieces!

Huge bundle sizes can pretty easily ruin your user experience - especially on mobile devices. The reason usually is because you're downloading the entire application at once - even if you're only showing a small subset of your application at a time. ... more

What is this JSX business?

JSX is a syntax extension to JavaScript, based loosely on the now-defunct E4X standard and kind of looks like this: <SomeComponent someProp={someValue}> <h1 className="heading">Hello world</h1> </SomeComponent> In layman's ... more

Introducing CSS-in-JS

The concept of separation of concerns have always been important in computer science. By following this principle, you'd have a modular application that encapsulated internal data structures and created minimal interfaces to integrate with. I'm still ... more

Share logic between components!

Sharing structure across an application is pretty simple in React. Sharing complex logic across components, however, that's a challenge that's not as easy to understand how to solve. Input validation, internationalization and accessibility concerns are ... more