𧡠This Week In React
π Shopify Hydrogen
π React-Router
π Storybook interactive stories
π State Initializer pattern
π React + TDD
π Next.js
π Expo modules
π Skia
π TypeScript
π Chrome/Lighthouse User Flow
... more in the newsletter
𧡠Details π
π Shopify Hydrogen
π React-Router
π Storybook interactive stories
π State Initializer pattern
π React + TDD
π Next.js
π Expo modules
π Skia
π TypeScript
π Chrome/Lighthouse User Flow
... more in the newsletter
𧡠Details π
𧡠Hydrogen by @ShopifyDevs
An opinionated React framework for Shopify E-commerce sites
Bets all-in on Server Components, streaming SSR
Oxygen: dedicated hosting infra to come (V8 isolates at Edge)
=> Highly dynamic content without perf compromise
hydrogen.shopify.dev
An opinionated React framework for Shopify E-commerce sites
Bets all-in on Server Components, streaming SSR
Oxygen: dedicated hosting infra to come (V8 isolates at Edge)
=> Highly dynamic content without perf compromise
hydrogen.shopify.dev
𧡠React-Router v6 by @mjackson & @ryanflorence
Best of React & Reach routers: code-splitting, TS support, route ranking, config object
New: subroutes relative to parent, <Outlet> comp...
API remains familiar
Extensive migration doc + compact package
remix.run/blog/react-rouβ¦
Best of React & Reach routers: code-splitting, TS support, route ranking, config object
New: subroutes relative to parent, <Outlet> comp...
API remains familiar
Extensive migration doc + compact package
remix.run/blog/react-rouβ¦
𧡠@storybookjs Interactive stories (beta) by @winkerVSbecks
Sometimes, props are not good enough to set a stateful React component in the wanted UI state
Storybook introduces a "play()" method where you can use @TestingLib APIs to do the setup!
storybook.js.org/blog/interactiβ¦
Sometimes, props are not good enough to set a stateful React component in the wanted UI state
Storybook introduces a "play()" method where you can use @TestingLib APIs to do the setup!
storybook.js.org/blog/interactiβ¦
𧡠The State Initializer Pattern
@kentcdodds explains a reset callback has pros over resetting with a React key update:
- lighter, no unmount/remount
- smoother, can preserve animated state transitions
Trap to avoid: an initialValue prop might change
kentcdodds.com/blog/the-stateβ¦
@kentcdodds explains a reset callback has pros over resetting with a React key update:
- lighter, no unmount/remount
- smoother, can preserve animated state transitions
Trap to avoid: an initialValue prop might change
kentcdodds.com/blog/the-stateβ¦
𧡠Creating a React component with TDD
@mattibarzeev uses TDD baby steps cycle to test a React component rendering and interactions with TDD
No test of implementation details, using Testing Lib: test remains robust to refactors.
dev.to/mbarzeev/creatβ¦
@mattibarzeev uses TDD baby steps cycle to test a React component rendering and interactions with TDD
No test of implementation details, using Testing Lib: test remains robust to refactors.
dev.to/mbarzeev/creatβ¦
𧡠TypeScript Control flow analysis for destructured discriminated unions, PR merged by @ahejlsberg
Very useful for React: destructuring props, fetch hooks results...
No need to write unnatural JS just for TS, the following will now compile!
github.com/microsoft/Typeβ¦
Very useful for React: destructuring props, fetch hooks results...
No need to write unnatural JS just for TS, the following will now compile!
github.com/microsoft/Typeβ¦
𧡠File-based routing with React Router
@oedotme continues with Part 2
He adds Vite-based code-splitting to its homemade file-based routing system
Not so complicated to implement in user-land π
omarelhawary.me/blog/file-baseβ¦
@oedotme continues with Part 2
He adds Vite-based code-splitting to its homemade file-based routing system
Not so complicated to implement in user-land π
omarelhawary.me/blog/file-baseβ¦
𧡠ποΈπ₯ Podcast with @swyx & @leeerob
Lots of interesting subjects!
Couldn't listen to it this week π
But definitely will, I'll comment next week!
Lots of interesting subjects!
Couldn't listen to it this week π
But definitely will, I'll comment next week!
𧡠@hdjirdeh explains that what the Aurora team at Google did for Next.js
Also, what's to come next.
Note: Aurora seems to also have worked on Shopify Hydrogen ;)
Also, what's to come next.
Note: Aurora seems to also have worked on Shopify Hydrogen ;)
https://twitter.com/hdjirdeh/status/1457679313965240325
𧡠Embracing Expo Modules in your React Native Projects
@kudochien debunks the myth that Expo modules are only for full-featured Expo apps
It's not all-or-nothing:
- any React-Native app can easily use a single Expo module
- it remains lightweight
blog.expo.dev/embracing-expoβ¦
@kudochien debunks the myth that Expo modules are only for full-featured Expo apps
It's not all-or-nothing:
- any React-Native app can easily use a single Expo module
- it remains lightweight
blog.expo.dev/embracing-expoβ¦
𧡠New Skia demos from @chrfalch & @wcandillon
Drawing + fragment shaders:
β‘οΈ
β‘οΈ
β‘οΈ
Drawing + fragment shaders:
β‘οΈ
https://twitter.com/chrfalch/status/1456544227328991238
β‘οΈ
https://twitter.com/chrfalch/status/1456613856999002117
β‘οΈ
https://twitter.com/chrfalch/status/1456558792544505859
𧡠TypeScript 4.5 RC
ES modules support for Node.js delayed
Some of my highlights:
devblogs.microsoft.com/typescript/annβ¦
ES modules support for Node.js delayed
Some of my highlights:
devblogs.microsoft.com/typescript/annβ¦
𧡠Chrome & Lighthouse user flows
Chrome allows to record/replay full user flows
β‘οΈ developer.chrome.com/docs/devtools/β¦
Lighthouse can measure lab perf for nav & user interactions
β‘οΈ objectively measure the whole experience, not just initial page load!
β‘οΈ web.dev/lighthouse-useβ¦
Chrome allows to record/replay full user flows
β‘οΈ developer.chrome.com/docs/devtools/β¦
Lighthouse can measure lab perf for nav & user interactions
β‘οΈ objectively measure the whole experience, not just initial page load!
β‘οΈ web.dev/lighthouse-useβ¦
π¬ THREAD END!
Follow @sebastienlorber for the next threads!
π Better insights and more content by email
βοΈ Subscribe now at ThisWeekInReact.com
----
β€οΈ Like this thread 𧡠?
π Please help me & Retweet the thread "head" below π
Follow @sebastienlorber for the next threads!
π Better insights and more content by email
βοΈ Subscribe now at ThisWeekInReact.com
----
β€οΈ Like this thread 𧡠?
π Please help me & Retweet the thread "head" below π
https://twitter.com/sebastienlorber/status/1458068360386826242
Previous editions?
They are all published online at ThisWeekInReact.com
Read the previous Twitter thread here:
They are all published online at ThisWeekInReact.com
Read the previous Twitter thread here:
https://twitter.com/sebastienlorber/status/1455591287147597827
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
