Scroll to see more

React

7 min read – React

Ha det bra, SPA

Det er leit å melde. Det er ikke lenger en god idé å rendre hele websiden din på klienten. En SPA er rett og slett ikke bra nok i 2022.

1 min read – React

Type safe all the way with Remix

Want to be really, really type safe, both on the front and back ends? With Remix, that's the default!

6 min read – React

React Context might not be the right solution for your app

Contexts in React are great. They provide an easy solution for shared component state, avoiding prop drilling and many other common patterns. All that while being built into React itself. What is not to like about that, and when should we reach for other solutions?

3 min read – React

useDeferredValue in React 18

With React 18, a new hook is available which can slow down our UI on purpose 🤯 Why may we need such a hook? 🤔

6 min read – React

Subscription pattern with Compound components in React

Compound component is a react design pattern popular in UI libraries such as Chakra, Reach, Semantic and Material. It allows us to write a declarative and flexible API for complex components that implicitly share a state. Today we'll look at an introduction and a slightly more complex example of the patthern

5 min read – React

Something about lock files

We've all been there: we created our first react project and was introduced to the lock file. Some took the time to understand it whereas others was scared of it and instinctively added it to the .gitignore file. This post will give a short description of the lock file, how we should treat it and use it correctly.

6 min read – React

Communication with Bluetooth devices using React and TypeScript

Bluetooth is a technology that you might use every day; This could be wireless headphones, game controllers or heart rate monitors, which all use Bluetooth. Until recently, I imagined technology like this required implementation of low level drives in C, but oh'boy, was I wrong! Thanks to Web Bluetooth, it is now possible to communicate with Bluetooth peripherals through the browser with JavaScript! We will explore how we can create a web app using React, TypeScript and Web Bluetooth to control our favourite smart lights to make our home ready for Christmas 🎅

3 min read – React

Implementing unfurling URLs in Sanity

Want to add those nice-looking link previews you get when you share a link on Medium or Twitter? Then this article is for you!

3 min read – React

Joyful onboarding with React Joyride

Have you ever had some new functionality that you would like to showcase for your users? Perhaps your userbase is not the most tech-savvy and they need some guiding when new features are shipped. React Joyride let's you easily create guided tours that your users will enjoy.

2 min read – React

Create a useful link abstraction in Next.js

The internal link abstraction with Next.js less than perfect. Let's create a better one!

4 min read – React, JavaScript

Building Tool Plugins for Sanity Studio

Learn how to easily build your own Tool Plugins to customize Sanity.

6 min read – React

Storybook: background change on prop change

Tired of manually changing the backgrounds in Storybook whenever you change the color theme of your component? With a few lines of code, storybook can automatically change the background color whenever certain props on your component change.

3 min read – React

How to lazy render large data tables to up performance

When working with large tables with many rows and columns you might find that your application is starting to lag. Especially if your table has a lot of custom styles, clickable rows or sortable columns, rendering can become an issue. In this post I'll show you how you can lazy render your table to make it fast and snappy!

6 min read – React

Inside the React Core team

4 min read – React

Deck the Halls With React Three Fiber

Earlier this year I tried using three.js within a React app. It wasn't straightforward, and I ran into quite a few problems. Since then, I've been eager to try out this library a co-worker told me about: react-three-fiber. Apparently, it could solve all my problems (ok, maybe only a few) and make it super easy to create cool animations with few lines of code. Say no more!

4 min read – React

Create a generic table with React and Typescript

When I first started out with Typescript I found it very difficult to create the correct types when making generic components. In this article we will create a generic Table component that can be used with any set of objects.

4 min read – React

/** Make the nice list with JSDoc */

Documenting stuff is important, folks! Where would Santa be without his naughty and nice list? Let's spend a few minutes learning how you can improve the user experience of your components by adding a slash and a couple of stars in front of it!

7 min read – React

4 steps for the getting your React code ready for Christmas

🎶 It's beginning to look at lot like Christmas...🎶 You have put up your favorite decorations, candle lights are sparkling in the windows and Christmas cookies are baking in the oven making a nostalgic scent. You can almost feel the Christmas spirit. But, wait a minute, what's that ruining this perfect Christmas feeling? Is it dirty react code?! There are “this”, a looong render method and even “classes” all over the place. With only four days left it's probably time to do some proper refactoring of your react code. Here are four steps which I have recognized to help me get going. It's time to roll up your sleeves.

3 min read – React

How to force-refresh your app every once in a while

7 min read – React

Rebuild static pages on-demand with incremental static regeneration

Building static pages with React is a great way to improve the experience of a website. But how do they work, and how can you still get the static pages to change when your data changes?

4 min read – React

A Tale of a React Newbie

My name is Tora, and I started working at Bekk this fall as a new React developer with a fresh Computer Science degree. I would like to share my journey into this new and exciting world with you!

3 min read – React

Maintainable React components with Typescript

I often find myself coming into code bases that I haven't worked with before to fix a bug or add some new feature. This is honestly more often that not quite challenging.

3 min read – React

Making sounds with React and Tone.js

By utilizing Tone.js one could easily produce some sounds, and if you’re lucky it could be quite musical. In this article we’ll look at combining React with Tone.js to make a simple sequencer.

3 min read – React

Reusing existing JavaScript-code in your React app

A couple of years ago, a colleague and I created a small JavaScript application to toy around with some image processing techniques. I really enjoyed the project, and the other day I decided put the same functionality in my new React code. One way of doing this would be to rewrite the whole thing, and to be honest, it probably would not have been that much work. But it got me thinking, how would I go about injecting the already written code into my React application? I haven't done anything like this before, and if you haven't either, this is a blog post for you!

4 min read – React

A Hot Chocolate Map with React Leaflet and TypeScript

For the last decade I've called Oslo my home. And aside from the usual goals of getting an education, landing a job and living my life, I've had a side quest: Finding the best places for hot chocolate in town.

11 min read – React

Creating a Chrome Extension with React and TypeScript

Did you know most Chrome extensions are written in good ol' JavaScript? Turns out, creating one with React is pretty straight forward, too! Let's look at how you can use your existing JavaScript skills to spread some holiday cheer!

5 min read – React

Back to basics - Setting up a minimal React project from scratch

It's so easy nowadays to get a web application up and running in just a couple of minutes. We've got tools like Create-react-app, React boilerplate, Slingshot etc., which let developers set up and prototype anything blazing fast. These tools come with Webpack, Babel and more already configured for you, so you don't have to know anything about them or what they are used for. This is obviously very valuable and cost-effective, but we also have to remember to keep in touch with our roots and get some sense of what is going on under the hood. So for today's topic we will be going back to the basics and see how we can set up most of what we need from scratch!

4 min read – React

Recoil.js - State management for React 🔥

4 min read – React

Validate Your Parking

He couldn't believe it. This certainly couldn't be true. Someone else must have made a mistake here. He read the email a second time. Maybe he missed something and the whole thing was just a big misunderstanding? But he didn't, of course. He is the kind of person who always pays attention to typos, therefore reading it again was quite pointless. Anger started spreading through him. How dare they? It felt so incredibly stupid and unfair. Especially considering he was such a law-abiding citizen. He despised those who didn't follow rules. They couldn't possibly mean that he was one of them? Yet this is exactly what the email was saying: "We can inform you that you unfortunately have used the wrong licence plate in the app, which is why you have been given a fine. In this case the fine is issued on AB12345, while parking was activated for AB1234 in the app.". Filled with rage, he locked his phone and shoved it back into his pocket. He missed one bloody number!

8 min read – React

10,000 Commits Later - Switching to React Native in 2017

Back in 2017, my team were working on a feature-packed, widely used mobile app with a legacy codebase. The app had way too much logic, logic of the complex sort, with loads of very old code calling old APIs. Build times were terrible. Noone had a complete understanding of the code.

3 min read – React

What and why and how are worklets in Reanimated 2?

A brief introduction to Reanimated 2's worklet directive and how it can help us animate our apps.

6 min read – React

React Testing Library

Do you feel compelled to manually test your React frontend after each deploy, because it’s not tested as well as your backend? Or perhaps you already have frontend tests, but you feel that they only serve as a hindrance, slowing down your development speed? Perhaps it’s time to give frontend testing another go, with the React Testing Library!

4 min read – React

Module Federation: Micro-frontends with webpack 5

In this article, we will look at one of webpack's exciting new features, Module Federation. This feature will allow dynamic code reloading from another project at runtime. Using module federation will enable sharing code from other projects with only a little tweaking in your webpack config. It can make a website consisting of multiple frontend applications appear as one seamless SPA. Neat, huh?

6 min read – React

Intelligent fetching and caching with SWR

Every now and then, a library surfaces that change the way you're used to thinking. In this case, it is rethinking the data flow in your React app. SWR provides a complex data store with a simple interface, helping you write simple patterns with less code.

7 min read – React

🎶On the third day of christmas a developer sent to me.. 3 React security tips!

As frontend developers, our focus is on the users experience in our application. How fast and efficient the application is and how smooth the functionality can be. We all might say security on our minds, but we often rely on somebody else to handle this. Luckily, modern web frameworks, like React, come with built-in security against one of the dangers of the web – Cross Site Scripting (XSS) attacks. But what does React actually defend us from and more importantly what does it not?

9 min read – React

War stories: The move from Flow to TypeScript

8 developers, 1240 files, 102 665 lines of code. This is the story of how we translated our entire codebase from Flow to TypeScript and lived to tell the tale.

8 min read – React

Seven Interesting Things About React Native

React Native is a React framework developed by Facebook to write code for mobile applications. In this article I will share some things I found interesting over the years working with this technology.

7 min read – React

What are the React Team Principles?

7 min read – React

Two Applications, One Repository

When you’re developing similar apps for the web and native platforms, it's hard to find a project structure that works well. Let's take a look at how our team is approaching this challenge for maintaining different view layers, while sharing most of the business logic.

7 min read – React

How I structure my React code

If you're looking for the definite answer to how you should structure you React apps, this article probably isn't for you. If you're interested in seeing how it can be done - read on!

2 min read – React

Some neat things to know when working with React and TypeScript

I started working with React and TypeScript about six months ago. Since then I’ve learned a lot, and there are a few things I wish I knew when I started out that would have saved me from messy solutions and some frustrating moments. Here are the ones I think are the most useful.

4 min read – React

A recipe for toasts

4 min read – React

Setup Azure Serverless Functions in 6 Simple Steps

React is no fun without some data to display or APIs to connect to. Let's dive in to how you can set up some serverless functions for all those times you wished you had a backend.

5 min read – React

How I test my React apps in 2019

Testing your apps is becoming so easy, it's starting to become worth the trouble!

3 min read – React

Why (not) make a design system?

Design is complex - and ever increasingly so. It requires full collaboration between all teams and professions involved in the process. A shared design language makes teams work together more effectively. That’s why companies invest in design systems. But how can we make sure that it works for our product and improves our productivity?

5 min read – React

Document your stuff with Docz

Having great documentation is what differentiates a great library from an ok one. I've spent the last couple of months creating a design system and its documentation site in Docz, and I'd like to share some experiences.

2 min read – React

Micro animations to the rescue

People like to understand what's happening around them, whether it's in real life or in an app on their phone. Let us have a little peak into how we can help users of our React Native app.

4 min read – React

5 things I have learned in my first months as a React Native developer

Hi, my name is Marte and I decided five montsh ago that I wanted to pursue a career within front-end development to get closer to the products and users. At that point in time I was working with strategy and business development, which I also studied for six years. The journey that has led me from being a management consultant to a developer has been filled with confusion, feeling of achievement, stupid questions, not so stupid questions, bad code and good code. And it is true what they say; the learning curve is steep! I will take you through some of the learnings I have encountered during my first months as a developer.

2 min read – React

Home-baked Hooks

About a year ago, Sophie Alpert and Dan Abramov presented one of the most exciting new features in React: Hooks. Release 16.8 introduced several alternatives that can be used directly (e.g. useState, useEffect and some others), but also provided the possibility to create your very own hooks – Custom Hooks.

3 min read – React

Fancy charts with Victory

Say you want to add a nice chart or other form of data visualization to your React app, but don't have the slightest idea of where to start. Do you write it from scratch, or do you utilize one of the many charting libraries out there? You might begin by researching d3 since it's one of the most popular data viz libraries for javascript, but you quickly get overwhelmed by the myriads of customization options and the steep learning curve. You probably don't even need all the bells and whistles that come included with it. My advice? Take a look at one of the slickest and most enjoyable charting libraries you're likely to come across this christmas - Victory.

4 min read – React

Working with Azure Application Insights in your React app

Do you really know how your users are interacting with your application? Have they tried out the latest feature you just deployed to production? Examining your user’s behaviour and interaction can be tremendously useful - figuring out where they incur problems or halt a purchase, where in the onboarding process most people fall off, how long time they spend on certain pages, or even just where on the site they’re located, are all valuable information for the further improvement and development of your website.

3 min read – React

Control your components

A quick and easy guide to creating components that control their own state, if you want them to.

5 min read – React

Test your applications in production

4 min read – React

Optimize your app by being Lazy

What is lazy loading, and why should you do it?

7 min read – React

Manage Global State with Context API and Hooks

For quite some time, Redux has been React developers go-to library for managing their app’s global state. It’s a great tool – but do you really need it?

3 min read – React

Managing content with Sanity

Content management done the right way 🤷‍♂️

6 min read – React

Can you feel the Suspense?!

Suspense is and will become a game changer when it comes to data fetching. It changes the way we structure our code, think about loading states and gives a better experience for both the developers and the users' interface.

5 min read – React

Oh, the Suspense!

The American dictionary states that suspense means a feeling of excitement while waiting for something uncertain to happen. So, let’s get excited and learn about React.Suspense and how this helps us wait for something uncertain!

4 min read – React

Get started with animations in React

Have you never been able to make that menu appear in the awesome way you've always wanted? Perhaps you've got lots of experience making things move with CSS animations, but you want to learn how (or if) a modern animations library could make your life easier? Or perhaps you just want to have fun and see how easy it is to animate elements in React using Framer Motion? Then read on! This article won't give you all the answers, but hopefully it will help you getting started.

5 min read – React

Stop... Render Time!

The promise of Concurrent Mode was made at a conference in 2018. The React team claim that this famous new feature would help with the issues with rendering, allowing to pause the render when the need to do more important tasks should occur. Let's take a closer look!

3 min read – React

How to avoid React's "Naughty List"

Every year, Santa Claus and his helping elves create a special list for every child in the world: the Naughty or Nice list. React has something quite similar – Strict Mode.

5 min read – React

Hooked on React

Hooks change everything, let's explore some fun patterns!

3 min read – React

Do you even JSX bro?

Most React apps use JSX - but how can you set up a JSX environment yourself?

4 min read – React

How to create components

React is Just Components ™️ - but there are tons of ways to make them. Let's dive in!

3 min read – React

useNativeDriving with React Native

Animations are awesome. Make sure they are as smooth as they can.

3 min read – React

How to CSS in React

A hot topic these days, and I don't think we'll ever agree, but here are some ways to do CSS in your React app

4 min read – React

Server-side rendering

Server-side rendering of your frontend application can be indispensable for some cases, but... is it worth the effort?

5 min read – React

How to use SVGs in React

SVGs are here to stay, and React seems to be sticking around for a while as well. So how do you go about combining them?

3 min read – React

Ho Ho Hooks

A festive introduction to Hooks, and what you can do with them!

2 min read – React

Introducing Typescript to your React / Webpack apps

Let’s take a quick look at what it takes to introduce typescript to your react-webpack applications and how you can get started.

3 min read – React

Three different ways to use Context

Prop drilling can be a good thing, and it can be a bad thing. Thankfully, there are better ways to do it with the Context API.

3 min read – React

Error Handling in React

Let's deal with those pesky errors once and for all

3 min read – React

Supercharge your logging and debugging

How to use Reactrotron to really improve your React and React Native development

2 min read – React

Creating a progressive image loader

I needed one for this site - follow along if you want one too!

5 min read – React

5 tips for reusable components

I've spent the last year helping build a design system. These are some of the things I learned along the way

4 min read – React

Creating composite components

Do you need to create a complex, yet reusable piece of UI? What's the best approach?

3 min read – React

Introduction to memoization

Today we’re going to talk a little bit about memoization. And no, that’s not a spelling error. And even better, is sounds a lot more complicated than it really is.

3 min read – React

Accessibility in React

Is your React app accessible to all of your users?

3 min read – React

Let´s fetch some data

You have begun building your React application. Maybe you even have set it up with Redux. Now you need some content - but how do you fetch it?

2 min read – React

Introducing Typescript to your Redux code

By introducing Typescript to your Redux code and implementing it properly, Typescript can help you write better and less error prone code. In this article we will take a look at a simple Redux example and explore the benefits of introducing Typescript.

1 min read – React

Testing of React component with a real Redux store

Do you avoid testing of components that depend on Redux because you fear the complexity? Are you loosing sleep worrying about configuring huge mock stores for testing the simplest of components? Fear no moarrr!

3 min read – React

Handling component state

Almost every application you write contains state and you'll need some way to manage it, but how?

2 min read – React

Why is this so hard?

I've lost count of the number of times I forgot to bind this. Why do we need to bind this and how should we do it?

3 min read – React

Handling metadata in Redux

Is this the last reducer you'll ever write?

3 min read – React

Documentation with Docusaurus

Documenting your project can be a pain in the ass and is often neglected. Docusaurus removes the pain of maintaining documentation.

2 min read – React

Merry Christmas!

Christmas Eve is finally here, and many of you will hopefully sit down and share a meal with friends and family. This final post is dedicated to those who share - albeit in a different way.

4 min read – React

Some cool React tips and tricks

After spending some time with React, I've learned a few nice tips and tricks to make your app as composable, declarative and maintainable as possible.

7 min read – React

The definite guide to lifecycle events!

If you've been using React for any period of time, you've probably seen what React calls lifecycle methods. This article will give you a firm grip on when you want to use what.

4 min read – React

Below the surface

React is an amazing tool for many reasons. One of them is that it just works. Ever wondered about how exactly? Let's dive in for a quick look!

3 min read – React

Understanding Webpack and Babel

Most apps require some kind of build pipeline to bundle your application into downloadable files. This article will give you a very simple overview over how to get started!

4 min read – React

Boost your performance!

You can write some pretty fast and amazing apps with React without thinking twice about performance optimizations. However, there are some pretty cool tricks you can do whenever your app starts to slow down.

3 min read – React

A bit about context

Context is one of those features of React you rarely need to use - but understanding what it is and how it works makes you a much better developer!

3 min read – React

Class property initializers

Although not React specific, this technique has made our React code much simpler and easier to read. Say hello to class property initializers!

4 min read – React

Functional vs class components

In React, there are two types of components - functional and class-based. What's the difference and when should you use each one?

2 min read – React

Documenting your components

If you're writing components that are shared between different teams, or even different developers, documenting your components is a must. And it's crazy simple!

4 min read – React

Check out type checking!

JavaScript is a dynamically typed language. That means you don't have types to help you secure your apps from stupid bugs. Here's a few ways to avoid just that in your React apps!

3 min read – React

An intro to routing in React

Routing is usually one of the hardest parts of any web application. In React, however, they're not really anything different than regular components!

3 min read – React

Split your app into pieces!

With the rise of single page applications, we also got megabyte-sized bundles of JavaScript code to download and compile before we could show anything to the user. THIS ENDS NOW!

2 min read – React

Component libraries

If you're in a rush to get something production ready, you might not have the time or resources to create your own component library. Luckily, there are several pre-made ones to choose from!

3 min read – React

What is this JSX business?

One of the weirdest things to me when I started learning React was this JSX syntax. What is it? Where does it come from? And how can I make really cool stuff with this?

4 min read – React

Introducing CSS-in-JS

React did something pretty radical when introducing JSX - suddenly we were blending our logic and structure in the same file. Now, the time has come to include CSS as well!

1 min read – React

Add error boundaries to your app!

React 16 brought us a way to handle errors in a neat, declarative way

3 min read – React

Share logic between components!

Sharing code between components can be made much more declarative and reusable than utility functions

2 min read – React

Fragments, finally!

Fragments lets you return several root nodes from your components. Finally we can skip those pesky container divs!

3 min read – React

Write quality code

Writing great, readable, accessible and well-formatted code used to take years to learn. Now there are tools to help you get there faster!

3 min read – React

The mysteries of setState

Although we hear a lot about MobX, Redux and other tools for handling state, React ships with its very own.

3 min read – React

Structuring your application

Structuring your React app is incredibly important for making your project maintainable and easy to navigate. What is the best way to do it?

2 min read – React

Testing your code

Avoiding bugs in your code is important for the end user experience. Choosing the right way to test your code is paramount!

2 min read – React

Get started with create-react-app

Creating your first React app usually starts off with a 30 minute crash course with Webpack, Babel and a whole lot of stuff not remotely related to React. That all changed with create-react-app.

Sign up for our newsletter

Get every day's articles delivered to your inbox.

Join in the holiday cheer and count down to Christmas with us!

I would like updates:
Your email will only be used for these advent calendar updates during the holiday season. They will never be sold or shared with third parties.