About this video
Get started with Framer NOW! https://www.framer.com?via=fullstackme Special Promo 3 Months Free on Annual Plan: partner25proyearly After realising how terrible Framer's own documentation was for building Code Components, I decided to release my own - Transcriptions and More: https://flowst8.dev/ Support me: https://buymeacoffee.com/fakesamgregory Join the Discord: https://discord.gg/WWfVjMhSjx Services I Love Domain Names: https://samuelgregory.co.uk/namecheap Hosting: https://www.hostg.xyz/aff_c?offer_id=6&aff_id=130549 Online Storage ($200 credit): https://samuelgregory.co.uk/digitalocean Online Storage ($100 credit): https://www.vultr.com/?ref=9381598-8H - X: https://x.com/@0x5am5 - -------------------------- ⏰ Timestamps -------------------------- 00:00 - Intro - Framer's documentation SUCKS 01:56 - Creating code components 03:08 - Breaking down the default code component file 06:16 - Code errors 07:11 - React props 08:40 - Importing existing components 09:08 - Props (cont...) 10:34 - JSX, self-closing components, writing JavaScript 12:14 - Styling your component 13:17 - Writing functions in your component 14:39 - State 18:33 - useEffect 19:58 - Default Props 20:57 - Adding your component to the page My Gear (affiliate) Sony A7 III: https://amzn.to/427iMbS Sony 16-35mm: https://amzn.to/3Ehfvxi VIJIM Video Light: https://amzn.to/3N0XdFp Hollyland Mark M1: https://amzn.to/3MIZmUW Macbook Pro M1 Pro: https://amzn.to/3oEVbS0 iPad Pro 2018: https://amzn.to/3AxJWNN Magic Keyboard: https://amzn.to/421B26P Travel Laptop Stand: https://amzn.to/3MDRx2Q Logitech MX Vertical: https://amzn.to/3oCg1Bz My Books The Full Stack Agency: https://flowst8.dev/books/the-full-stack-agency/ Lingo: Agile: https://thefullstackagency.gumroad.com/l/agile-lingo Lingo: Startup: https://thefullstackagency.gumroad.com/l/startup-lingo #CodeComponents #frameratetest #React