Loading video...

Video Failed to Load

Go Home

⚛️ React Component Creation with the Factory Pattern: It creates a nice abstraction to simplify component creation, making it easy to read and scale ↓

_georgemoller's profile picture

George Moller

118,111 subscribers

133,151 views • 2 years ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

⚛️ How to use TypeScript type predicates in React to create a more robust, type-safe, and maintainable component. (this pattern is particularly useful when dealing with discriminated unions or when you need to narrow types based on runtime checks)
1:07

⚛️ How to use TypeScript type predicates in React to create a more robust, type-safe, and maintainable component. (this pattern is particularly useful when dealing with discriminated unions or when you need to narrow types based on runtime checks)

George Moller

29,524 views • 1 year ago

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

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

Alex Sidorenko

51,480 views • 1 year ago

you can steal react components from any website without source code most people screenshot UIs and ask AI to recreate them. but with react fiber, you can extract the exact component 1:1 - same styling, props, design system, component structure
0:54

you can steal react components from any website without source code most people screenshot UIs and ask AI to recreate them. but with react fiber, you can extract the exact component 1:1 - same styling, props, design system, component structure

david fant

328,502 views • 8 months ago

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.
6:06

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.

Meng To

171,880 views • 2 years ago

introducing: blur cycle component for Framer use this component to cycle through different words or phrases with a crazy smoooooth blur transition. comment "BLUR" and I’ll send you the component. :)
0:22

introducing: blur cycle component for Framer use this component to cycle through different words or phrases with a crazy smoooooth blur transition. comment "BLUR" and I’ll send you the component. :)

Framer University

10,452 views • 1 year ago

⚛️ React + Typescript Tip: How to create short and easy to remember event types with Typescript ↓
0:32

⚛️ React + Typescript Tip: How to create short and easy to remember event types with Typescript ↓

George Moller

57,750 views • 2 years ago

⚛️ React + Typescript Tip: How to create short and easy to remember event types with Typescript ↓
0:32

⚛️ React + Typescript Tip: How to create short and easy to remember event types with Typescript ↓

George Moller

89,542 views • 1 year ago

i can hear every single component and respond to it differently
1:34

i can hear every single component and respond to it differently

ecco

134,649 views • 9 months ago

GPT-4 has its own compression language. I generated a 70 line React component that was 794 tokens. It compressed it down to this 368 token snippet, and then it deciphered it with 100% accuracy in a *new* chat with zero context. This is crazy!
1:44

GPT-4 has its own compression language. I generated a 70 line React component that was 794 tokens. It compressed it down to this 368 token snippet, and then it deciphered it with 100% accuracy in a *new* chat with zero context. This is crazy!

Mckay Wrigley

1,308,282 views • 3 years ago

Created the image with ChatGPT. Brought it to life with Hedra. Just upload a photo, drop in your script, and hit generate. That’s it. Video creation has never been this easy—or this accessible.
1:02

Created the image with ChatGPT. Brought it to life with Hedra. Just upload a photo, drop in your script, and hit generate. That’s it. Video creation has never been this easy—or this accessible.

Hedra

3,508,557 views • 1 year ago

Introducing Video2Ascii – a WebGL-powered React component that converts Videos to ASCII art. I came across the General Intuition website and loved their animations but there were no open-source React Components so I reverse engineered it.
0:25

Introducing Video2Ascii – a WebGL-powered React component that converts Videos to ASCII art. I came across the General Intuition website and loved their animations but there were no open-source React Components so I reverse engineered it.

Elijah Kurien

199,243 views • 8 months ago

You can now connect your React application to any MCP server! And it only takes a single command: $ npx copilotkit@latest init -m MCP This is massive for anyone building React applications! Using the CopilotKit🪁 MCP Client Component, you can get an MCP Client chat component in your application and instant access to any MCP server out there! It doesn't get easier than this. Check out the link below for instructions on how to proceed ↓
0:43

You can now connect your React application to any MCP server! And it only takes a single command: $ npx copilotkit@latest init -m MCP This is massive for anyone building React applications! Using the CopilotKit🪁 MCP Client Component, you can get an MCP Client chat component in your application and instant access to any MCP server out there! It doesn't get easier than this. Check out the link below for instructions on how to proceed ↓

Santiago

39,944 views • 1 year ago

Component style variants are here! You can now define multiple style options for a single component — like a Button with solid and outline styles, a Card with horizontal and vertical variants, and more 🤯 Read more in the updates post:
0:33

Component style variants are here! You can now define multiple style options for a single component — like a Button with solid and outline styles, a Card with horizontal and vertical variants, and more 🤯 Read more in the updates post:

Webflow

19,997 views • 1 year ago

Automate or simplify your workflow for subtitle creation with Voxtral Transcribe 2.0! From word-level timestamps to diarization and context biasing, take it further by leveraging our other general-purpose models to translate subtitles.
0:24

Automate or simplify your workflow for subtitle creation with Voxtral Transcribe 2.0! From word-level timestamps to diarization and context biasing, take it further by leveraging our other general-purpose models to translate subtitles.

Mistral AI for Developers

14,886 views • 7 months ago

You want to add blur gradients to your website? I've made an easy-to-use, customizable component for Framer that you can place over any element to apply a blur gradient to it. Retweet and comment "BLUR" and I'll send it.
0:27

You want to add blur gradients to your website? I've made an easy-to-use, customizable component for Framer that you can place over any element to apply a blur gradient to it. Retweet and comment "BLUR" and I'll send it.

Framer University

117,496 views • 2 years ago

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
0:27

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,527 views • 2 years ago