Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

❌ Don't import server components directly from client components ✅ Instead send them as props to client components

George Moller

118,034 subscribers

42,762 görüntüleme • 3 yıl önce •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

7 Yorum

George Moller profil fotoğrafı

George Moller3 yıl önce

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics just like this one. Check them out ↓

Pawel Knuth profil fotoğrafı

Pawel Knuth3 yıl önce

hi @_georgemoller , great job! What infographic service are you using for doing those? Cheers

Ashik Chapagain profil fotoğrafı

Ashik Chapagain3 yıl önce

What font are you using?

Rajan.dev 👨‍💻 profil fotoğrafı

Rajan.dev 👨‍💻3 yıl önce

dude this animation is so cool !

gp 🌎 profil fotoğrafı

gp 🌎3 yıl önce

What’s the advantage of doing this?

George Moller profil fotoğrafı

George Moller3 yıl önce

@0xgiangp Not advantage, but more is the only way you can send in a server component through a client component

Saidul profil fotoğrafı

Saidul3 yıl önce

This a great approach to have your code organized.

Benzer Videolar

❌ Don't pass props to multiple nested components in React. ✅ Instead use libraries like react-query to better handle server state.

❌ Don't pass props to multiple nested components in React. ✅ Instead use libraries like react-query to better handle server state.

George Moller

137,443 görüntüleme • 3 yıl önce

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

George Moller

130,080 görüntüleme • 3 yıl önce

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

George Moller

177,710 görüntüleme • 2 yıl önce

Client/Server composition with server components feels illegal 😅

Client/Server composition with server components feels illegal 😅

Alex Sidorenko

69,174 görüntüleme • 2 yıl önce

When to use Server vs Client components in Next.js 13

When to use Server vs Client components in Next.js 13

Alex Sidorenko

148,184 görüntüleme • 3 yıl önce

"How to share state between React client components with a parent server component?" 👇

"How to share state between React client components with a parent server component?" 👇

Alex Sidorenko

51,480 görüntüleme • 1 yıl önce

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition

George Moller

51,316 görüntüleme • 7 ay önce

If you use Next.js + @shadcn/ui, you know the pain of importing components one by one. As a lazy dev, I built a VS Code extension to import multiple components at once 🚀 No more: import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" Just select what you need, done ✨

If you use Next.js + @shadcn/ui, you know the pain of importing components one by one. As a lazy dev, I built a VS Code extension to import multiple components at once 🚀 No more: import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" Just select what you need, done ✨

Suraj Jha

48,373 görüntüleme • 10 ay önce

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

Lee Robinson

177,038 görüntüleme • 2 yıl önce

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

George Moller

161,603 görüntüleme • 8 ay önce

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.

George Moller

214,976 görüntüleme • 3 yıl önce

You wouldn’t import an SVG… or wait, maybe you would 👀 Import SVGs as components with size and fill props. Now experimental in 5.0.

You wouldn’t import an SVG… or wait, maybe you would 👀 Import SVGs as components with size and fill props. Now experimental in 5.0.

Astro

39,296 görüntüleme • 1 yıl önce

❌ Avoid difficult-to-read conditionals to render elements in react. ✅ Instead use utility components for conditional rendering.

❌ Avoid difficult-to-read conditionals to render elements in react. ✅ Instead use utility components for conditional rendering.

George Moller

301,135 görüntüleme • 3 yıl önce

⚛️ I don't like baking app or business logic directly in components. Instead, I use useReducer hook to separate the business logic from the UI. ✅ More predictable state changes ✅ Better architecture↓

⚛️ I don't like baking app or business logic directly in components. Instead, I use useReducer hook to separate the business logic from the UI. ✅ More predictable state changes ✅ Better architecture↓

George Moller

57,091 görüntüleme • 1 yıl önce

chat with your kicad components, answers directly from datasheet

chat with your kicad components, answers directly from datasheet

Daniel Liu

13,680 görüntüleme • 6 ay önce

❌ Avoid prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API

❌ Avoid prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API

George Moller

48,323 görüntüleme • 2 yıl önce

New Recipe: "Sharing data with Client Components" Learn how to use promises to unblock your page so it can be rendered (or even prerendered) as early as possible. Hope you enjoy!

New Recipe: "Sharing data with Client Components" Learn how to use promises to unblock your page so it can be rendered (or even prerendered) as early as possible. Hope you enjoy!

Sam Selikoff

18,777 görüntüleme • 9 ay önce

I've finally published a new version of next-international, my fully typesafe i18n library for Next.js This release adds initial support for the App Router, with both Client and Server Components:

I've finally published a new version of next-international, my fully typesafe i18n library for Next.js This release adds initial support for the App Router, with both Client and Server Components:

Tom Lienard

42,459 görüntüleme • 3 yıl önce