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?
With React 18, a new hook is available which can slow down our UI on purpose 🤯 Why may we need such a hook? 🤔
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
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.
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!
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.
The internal link abstraction with Next.js less than perfect. Let's create a better one!
Learn how to easily build your own Tool Plugins to customize Sanity.
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.
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!
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!
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.
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!
🎶 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.
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?
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!
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.
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.
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.
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!
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!
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.
A brief introduction to Reanimated 2's worklet directive and how it can help us animate our apps.
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!
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?
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.
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?
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.
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.
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.
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!
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.
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.
Testing your apps is becoming so easy, it's starting to become worth the trouble!
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?
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.
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.
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.
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.
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.
A quick and easy guide to creating components that control their own state, if you want them to.
What is lazy loading, and why should you do it?
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?
Content management done the right way 🤷♂️
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.
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!
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.
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!
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.
Hooks change everything, let's explore some fun patterns!
Most React apps use JSX - but how can you set up a JSX environment yourself?
React is Just Components ™️ - but there are tons of ways to make them. Let's dive in!
Animations are awesome. Make sure they are as smooth as they can.
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
Server-side rendering of your frontend application can be indispensable for some cases, but... is it worth the effort?
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?
A festive introduction to Hooks, and what you can do with them!
Let’s take a quick look at what it takes to introduce typescript to your react-webpack applications and how you can get started.
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.
Let's deal with those pesky errors once and for all
How to use Reactrotron to really improve your React and React Native development
I needed one for this site - follow along if you want one too!
I've spent the last year helping build a design system. These are some of the things I learned along the way
Do you need to create a complex, yet reusable piece of UI? What's the best approach?
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.
Is your React app accessible to all of your users?
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?
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.
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!
Almost every application you write contains state and you'll need some way to manage it, but how?
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?
Is this the last reducer you'll ever write?
Documenting your project can be a pain in the ass and is often neglected. Docusaurus removes the pain of maintaining documentation.
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.
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.
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.
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!
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!
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.
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!
Although not React specific, this technique has made our React code much simpler and easier to read. Say hello to class property initializers!
In React, there are two types of components - functional and class-based. What's the difference and when should you use each one?
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!
Routing is usually one of the hardest parts of any web application. In React, however, they're not really anything different than regular components!
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!
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?
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!
React 16 brought us a way to handle errors in a neat, declarative way
Sharing code between components can be made much more declarative and reusable than utility functions
Fragments lets you return several root nodes from your components. Finally we can skip those pesky container divs!
Writing great, readable, accessible and well-formatted code used to take years to learn. Now there are tools to help you get there faster!
Although we hear a lot about MobX, Redux and other tools for handling state, React ships with its very own.
Structuring your React app is incredibly important for making your project maintainable and easy to navigate. What is the best way to do it?
Avoiding bugs in your code is important for the end user experience. Choosing the right way to test your code is paramount!
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.