Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

❌ 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

118,722 subscribers

161,369 Aufrufe • vor 5 Monaten •via X (Twitter)

Bildung Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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,365 Aufrufe • vor 7 Monaten

Import large data sets in seconds! With Appwrite’s new CSV imports feature, you can import documents into your Appwrite collections using a simple CSV file. And the best part, you don’t even need a custom script. Check out this video to learn how it works.

Import large data sets in seconds! With Appwrite’s new CSV imports feature, you can import documents into your Appwrite collections using a simple CSV file. And the best part, you don’t even need a custom script. Check out this video to learn how it works.

Appwrite

44,969 Aufrufe • vor 1 Jahr

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.

Delba

43,989 Aufrufe • vor 2 Jahren

Russia now has to import gasoline from China. This is the ultimate humiliation for the Russians to be so at the mercy of China for both their imports AND exports.

Russia now has to import gasoline from China. This is the ultimate humiliation for the Russians to be so at the mercy of China for both their imports AND exports.

Jake Broe

93,800 Aufrufe • vor 9 Monaten

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 Aufrufe • vor 1 Jahr

❌ 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,439 Aufrufe • vor 2 Jahren

We released Canvas in Gemini this week, allowing you to code and preview React/JS components quickly. Here's a one-shot Stock market component 👀

We released Canvas in Gemini this week, allowing you to code and preview React/JS components quickly. Here's a one-shot Stock market component 👀

Addy Osmani

116,346 Aufrufe • vor 1 Jahr

React Native & with Expo using shadcn template !!! ✨New Component: Import Alert Dialog Components and easily add it your React Native & Expo App Both Expo and RN CLI #buildinpublic #buildingpublic

React Native & with Expo using shadcn template !!! ✨New Component: Import Alert Dialog Components and easily add it your React Native & Expo App Both Expo and RN CLI #buildinpublic #buildingpublic

Sid

63,524 Aufrufe • vor 2 Jahren

❌ 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,645 Aufrufe • vor 1 Jahr

❌ 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,061 Aufrufe • vor 2 Jahren

You don't have to try hard if you import your voters

You don't have to try hard if you import your voters

𝕲𝖔𝖙𝖍 𝕯𝖆𝖉𝖉𝖞

23,084 Aufrufe • vor 4 Monaten

💡 Need to import your wallet into Best Wallet? Here’s how. Watch our step-by-step tutorial on how to import all your wallets into Best Wallet and manage everything in one place. This video will show you: ✅ How to import your existing wallets ✅ How to manage multiple wallets in Best Wallet ✅ How to swap, send, and sell your assets seamlessly 📺 Watch the full video below.

💡 Need to import your wallet into Best Wallet? Here’s how. Watch our step-by-step tutorial on how to import all your wallets into Best Wallet and manage everything in one place. This video will show you: ✅ How to import your existing wallets ✅ How to manage multiple wallets in Best Wallet ✅ How to swap, send, and sell your assets seamlessly 📺 Watch the full video below.

Best Wallet

15,206 Aufrufe • vor 1 Jahr

Why did adding ONE component make your build drastically slower? The answer is often: Barrel files. Luckily, you can enable Lazy Barrel Optimization in Vite ⚡ 8 and Rolldown do bring your build time back to normal.

Why did adding ONE component make your build drastically slower? The answer is often: Barrel files. Luckily, you can enable Lazy Barrel Optimization in Vite ⚡ 8 and Rolldown do bring your build time back to normal.

VoidZero

20,575 Aufrufe • vor 4 Monaten

Why CM Joseph Vijay want cotton imports to be duty-free, when 60 lakh farmers & 6 crore people in India depend directly or indirectly on cotton cultivation Removing import duty on cotton could hurt Indian farmers by increasing cheaper foreign imports #tvk #cmvijay #tamilnadu

Why CM Joseph Vijay want cotton imports to be duty-free, when 60 lakh farmers & 6 crore people in India depend directly or indirectly on cotton cultivation Removing import duty on cotton could hurt Indian farmers by increasing cheaper foreign imports #tvk #cmvijay #tamilnadu

Anand T Prasad

22,384 Aufrufe • vor 1 Monat

In Astro 5.7, every SVG is an Astro component! Import it, use it in your page and it will be inlined in the HTML. You can even pass it any SVG props. Learn more:

In Astro 5.7, every SVG is an Astro component! Import it, use it in your page and it will be inlined in the HTML. You can even pass it any SVG props. Learn more:

Astro

22,893 Aufrufe • vor 1 Jahr

⚛️ How to keep you imports tidy and clean in React ↓

⚛️ How to keep you imports tidy and clean in React ↓

George Moller

45,559 Aufrufe • vor 2 Jahren

There's a cool change in this RE3 cutscene depending on how Jill defeats zombies outside the train. If she leaves the red barrel outside, Mikhail will roll the barrel to blow up some zombies. If Jill uses the barrel then Mikhail needs to use one of his signature grenades #REBHFun

There's a cool change in this RE3 cutscene depending on how Jill defeats zombies outside the train. If she leaves the red barrel outside, Mikhail will roll the barrel to blow up some zombies. If Jill uses the barrel then Mikhail needs to use one of his signature grenades #REBHFun

Resident Bio Evil

23,319 Aufrufe • vor 6 Monaten

Aw, you guys import your images directly to your switch? That’s cute.

Aw, you guys import your images directly to your switch? That’s cute.

🍉Sparkz⚡️

1,307,308 Aufrufe • vor 2 Monaten

Bring your repos to Replit! Our new import functionality brings enhanced GitHub imports including the ability to CONTINUE with Agent projects stored in GitHub. Follow along with my latest video to learn more 👇

Bring your repos to Replit! Our new import functionality brings enhanced GitHub imports including the ability to CONTINUE with Agent projects stored in GitHub. Follow along with my latest video to learn more 👇

matt palmer

16,651 Aufrufe • vor 1 Jahr

Now that Laravel ships with shadcn/ui, we can use the cli to add components, pages, themes from remote registries. Need a Products page for your dashboard? One command adds the page, component and all dependencies to your codebase.

Now that Laravel ships with shadcn/ui, we can use the cli to add components, pages, themes from remote registries. Need a Products page for your dashboard? One command adds the page, component and all dependencies to your codebase.

shadcn

52,962 Aufrufe • vor 1 Jahr