Frontend development team lead, author, accessibility advocate, ultra runner, and lover of dogs (and most other cute animals).
Copenhagen, Denmark
Joined March 2009
- Tweets1.8K
- Following572
- Followers548
- Likes941
If you're at React Summit (or JS Nation) in Amsterdam in a week, hit me up!
At the session 💻@barklund, Frontend dev team lead, will go over several common best-practice-proven #TypeScript patterns to use in #React 18.
This includes how to correctly type component properties, children & return types, using React built-in types, typing contexts etc.
Am I the only one that can hear a slack notification in the background of this song around 1:20?
It's in one of my work playlists, and every time it gets to this part, I frantically search for the notification bubble...
youtu.be/iP6XpLQM2Cs?t=80
Recently I ran into the problem of spreading React props to an intrinsic element (e.g. to an `<input />`) in TypeScript. How would I type the props correctly?
I.e., if you have the code below, how do you best do this in TypeScript?
🧵 [1/4]
#react #typescript #100DaysOfCode
ALT A screenshot depicting this code snippet: function InputGroup({ label, ...rest }) { return ( <label> {label}: <input {...rest} /> </label> ); }
Using what I find to be the recommended approach from the above table, `ComponentPropsWithoutRef`, the code from the initial example then becomes this.
You can play with the example in CodeSandbox here: codesandbox.io/s/react-types… – at Copenhagen, Denmark
ALT A screenshot depicting this code snippet: import type { ComponentPropsWithoutRef } from "react"; interface InputGroupProps extends ComponentPropsWithoutRef<"input"> { label: string; } function InputGroup({ label, ...rest }: InputGroupProps) { return ( <label> {label}: <input {...rest} /> </label> ); }
Do you agree? Or do you use a different approach for this?
See this article with my reasoning and all the details and please feel free to poke holes in it! [4/4]
mortenbarklund.com/blog/reac… – at Copenhagen, Denmark
279 words (117,352 total), on React Quickly Second Edition, a complete guide to React development in 2022 #dailywords #AuthorsOfTwitter
You can get early access to this book right away by going to reactquickly.dev and clicking on the buy now link! #react #reactjs #developers
5,843 words (201,738 total) on React Quickly Second Edition, a complete guide to React development in 2022 #dailywords #AuthorsOfTwitter
nitter.gq/barklund/status/151840… – at Copenhagen, Denmark
You can get early access to this book right away by going to reactquickly.dev and clicking on the buy now link! #react #reactjs #developers
3,777 words (205,515 total) on React Quickly Second Edition, a complete guide to React development in 2022 #dailywords #AuthorsOfTwitter
nitter.gq/barklund/status/151840… – at Copenhagen, Denmark
You can get early access to this book right away by going to reactquickly.dev and clicking on the buy now link! #react #reactjs #developers
And we're back to editing chapters based on feedback. All the way back to chapter 1 now, I almost forgot what I put there. It's great to come back with fresh eyes.
nitter.gq/barklund/status/158503… – at Copenhagen, Denmark
364 words (190,004 total) on React Quickly Second Edition, a complete guide to React development in 2022 #dailywords #AuthorsOfTwitter
nitter.gq/barklund/status/151840…
With this update, chapter 20 is complete, and chapter 21 is following close behind as well! With 22 chapters in total, we're almost there!
nitter.gq/barklund/status/158286… – at Copenhagen, Denmark
3,809 words (185,813 total) on React Quickly Second Edition, a complete guide to React development in 2022 #dailywords #AuthorsOfTwitter
nitter.gq/barklund/status/151840…
And with that chapters 1 through 18 are ready in at least first draft status. Actually chapters 1 through 13 has been published on MEAP so they're a lot further in the pipeline.
The end is nigh, as they say.
nitter.gq/barklund/status/157888… – at Copenhagen, Denmark
4,317 words (176,969 total) on React Quickly Second Edition, a complete guide to React development in 2022 #dailywords #AuthorsOfTwitter
nitter.gq/barklund/status/151840…