Innhold om React

React server components vinner popularitet og det er avgjørende for komponentbiblioteker å støtte det for å holde tritt. Hvordan støtter du det?

React server components is winning popularity, and it's crucial for component libraries to support it to stay relevant. How do you support it?

During my time as a React developer, I have experienced that you never should mutate your state, as it leads to weird bugs when rendering your components. This article will show you some tricks on how to make your state immutable, achieving a more bug-free UI.

Norway is known for its fjords, glaciers and cold winters. The latter is suboptimal for cyclists, which is why we ended up creating dundring.com; a free and open source in-browser training application created to control and track your training with a smart bike trainer ⚡️ This article will go through the magical story of how our hobby project dundring.com was made 🎅

Har du sett React sin Suspense funksjonalitet og tenkt at det kunne vært noe for applikasjonen din? Bare for å få drømmene lettere lagt i grus når du etter nærmere studier ser at Suspense støttes i hovedsak av meta rammeverk som Next.js og Remix? I dagens juleluke ser vi på ulike måter å håndtere datalasting på, og hvordan vi kan forbedre både ytelse og kodekvalitet ved å ta i bruk TanStack Query og Suspense. Vi omgår metarammeverk begrensningen og ser på hvordan vi kan bruke Suspense i en tradisjonell klientside React applikasjon. Dette gjør vi ved å bruke JS biblioteket TanStack Query.

There are many ways to solve problems in React, some will say too many. In a large code base it is helpful if the developers are united about the way to maintain the code base. Take a look at the topics I present to you in this article, which one do you use and are you and your team on the same page?

Storybook tilbyr en rå, interaktiv playground for å teste ulike props, men det kommer med en pris: med det følger en tvangstrøye av et design. Ved å kombinere React Live og litt strengkonkatenering kan du lage en løsning du har full kontroll over, samtidig som du gir brukerne dine en effektiv måte å få oversikt over en komponents muligheter.

Storybook offers an awesome, interactive playground to test different props, but at a price: with it comes a straitjacket of a design. By combining React Live and some string concatenation, you can create a solution that you have full control over, while giving your users an efficient way to get an overview of a component's capabilities.

Code splitting and lazy loading can be synonymous with heartache and headache. Luckily, smart people have made tools to make it easier for us. Webpack and React Router are familiar to many in the React community. Add loadable-components to the mix, and you have all the ingredients for code splitting and lazy loading without the tears!

Enten du lager et bibliotek eller lager React-komponenter for din egen del, er det en teknikk du bør kjenne til: polymorfisme. Det er når én ting kan ta flere former, som når en knapp kan opptre som en lenke. Brukt riktig, kan det redde deg fra å vedlikeholde ulike varianter, samtidig som det kan gi brukerne fleksibiliteten de trenger fra komponenten. I denne teksten vil jeg vise deg hvordan du kan utnytte 2 av de mest kjente måtene å få til polymorfisme i React: “as”- og “asChild”- mønstrene.

Whether you're making a library or making React components for your own sake, there's one technique you must know: polymorphism. It's when one thing can be multiple shapes, as when a button can act as a link. Used correct, it can save you from maintaining many variants, and at the same time give your users the flexibility they need. In this text I will show you how to utilize two of the most known ways of implementing polymorphism in React: the "as"- and "asChild"-patterns.

Trenger du virkelig en native mobilapp?

Ahh, React. Min gode venn gjennom mange år. Jeg skal være ærlig: forholdet vårt starta litt turbulent. Jeg var usikker på om det å blande HTML inn i Javascripten egentlig var noen god idé. Det tok faktisk et par år før du klarte å overbevise meg! Men du var heldigvis tålmodig. For det som starta som en skepsis viste seg å etter hvert til å bli til en aldri så liten forelskelse! Ohh boy!

Nettsider med animasjon får litt personlighet, og det skal lite til for å oppnå det. Her er en guide til bruk av CSS-transitions.

Changing the state of your component based on the interaction of a user is a common scenario in a React application. Your first instinct may be to put the event logic in a useEffect that depends on some value to change so the effect can be triggered. But why put the event-specific logic some other place than event handlers? To avoid misbehavior in your application, put event logic in the event handlers and not in useEffects.