正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

George Moller

118,034 subscribers

42,762 次观看 • 3 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

7 条评论

George Moller 的头像

George Moller3 年前

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 的头像

Pawel Knuth3 年前

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

Ashik Chapagain 的头像

Ashik Chapagain3 年前

What font are you using?

Rajan.dev 👨‍💻 的头像

Rajan.dev 👨‍💻3 年前

dude this animation is so cool !

gp 🌎 的头像

gp 🌎3 年前

What’s the advantage of doing this?

George Moller 的头像

George Moller3 年前

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

Saidul 的头像

Saidul3 年前

This a great approach to have your code organized.

相关视频

❌ 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 次观看 • 3 年前

❌ 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 次观看 • 3 年前

❌ 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 次观看 • 2 年前

Client/Server composition with server components feels illegal 😅

Client/Server composition with server components feels illegal 😅

Alex Sidorenko

69,174 次观看 • 2 年前

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 次观看 • 3 年前

"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 次观看 • 1 年前

❌ 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 次观看 • 7 个月前

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 次观看 • 10 个月前

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 次观看 • 2 年前

❌ 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 次观看 • 8 个月前

❌ 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 次观看 • 3 年前

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 次观看 • 1 年前

❌ 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 次观看 • 3 年前

⚛️ 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 次观看 • 1 年前

chat with your kicad components, answers directly from datasheet

chat with your kicad components, answers directly from datasheet

Daniel Liu

13,680 次观看 • 6 个月前

❌ 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 次观看 • 2 年前

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 次观看 • 9 个月前

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 次观看 • 3 年前