Innhold om React
Totalt 137 innlegg
Side 2 av 10
Du trenger ikke Storybook for å lage en playground
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 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.
You don't need Storybook to make a playground
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.
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.
Break your app into pieces: Code splitting and lazy loading without the tears
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!
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!
Polymorfisme i React: 2 mønstre du må kjenne til
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.
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.
Polymorphism in React: 2 patterns you must know
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.
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.
Har du råd til native mobilutvikling?
Trenger du virkelig en native mobilapp?
Trenger du virkelig en native mobilapp?
React – et hjertesukk
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!
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!
Gjør nettsiden din levende med CSS-transitions
Nettsider med animasjon får litt personlighet, og det skal lite til for å oppnå det. Her er en guide til bruk av CSS-transitions.
Nettsider med animasjon får litt personlighet, og det skal lite til for å oppnå det. Her er en guide til bruk av CSS-transitions.
Put event logic in event handlers in React
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.
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.
Compute view logic during render in React
Updating view logic based on some state or props is a common thing to do in a React application, and the go-to method is typically by putting every state update in one or more useEffects. However, this will lead to unnecessary updates and unmaintainable code. Let's take a look at how updating view logic is better by doing it during render rather than useEffects.
Updating view logic based on some state or props is a common thing to do in a React application, and the go-to method is typically by putting every state update in one or more useEffects. However, this will lead to unnecessary updates and unmaintainable code. Let's take a look at how updating view logic is better by doing it during render rather than useEffects.
Azure Application Insights using Javascript SDK in Next.js
Do you need help with the Javascript SDK for Application Insights? Look no further! This guide will help you go from zero to hero in no time 📈
Do you need help with the Javascript SDK for Application Insights? Look no further! This guide will help you go from zero to hero in no time 📈
Use key to reset state in React
Resetting state in a React application is a common thing to do. You get some new data in your props, and you want to set your state back to the initial values, and often it is done with useEffect. However, useEffects can be messy and hard to understand, and it's because you (and I) are using them wrong (🔥). Let's take a look at how to solve this in a better way by using the key attribute.
Resetting state in a React application is a common thing to do. You get some new data in your props, and you want to set your state back to the initial values, and often it is done with useEffect. However, useEffects can be messy and hard to understand, and it's because you (and I) are using them wrong (🔥). Let's take a look at how to solve this in a better way by using the key attribute.
How to create a simple Custom Server in Next.js
Do you need help with setting up a simple custom server in Next.js? This trick will get you a long way!
Do you need help with setting up a simple custom server in Next.js? This trick will get you a long way!
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.
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.
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!
Want to be really, really type safe, both on the front and back ends? With Remix, that's the default!