Exploring Webflow’s Devlink with Finsweet CTO part 1
HTML-код
- Опубликовано: 5 авг 2024
- In this video, Alex Iglesias takes a first look at @Webflow's Devlink. With DevLink, you can build components in Webflow for use in React projects. Watch Alex explore the docs and set up a project to put Devlink to the test.
-----------------------------------------------
// TIMECODES
0:00 Intro
0:48 Overview
2:37 Getting access to Devlink
3:30 Initial setup
8:04 Connect to local dev
10:09 Creating and syncing elements
14:45 Using Components
28:19 Using Slots
36:52 Using Props
45:00 Outro
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Devlink: webflow.com/devlink
Webflow: finsweet.info/webflow
Next.js: nextjs.org/
Subscribe to Finsweet RUclips: ruclips.net/user/Finsweet?su...
Get the full list of FREE Finsweet products: www.finsweet.com/subscribe
-----------------------------------------------
// ABOUT US
We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!
🙌 Join our community: finsweet.com/plus
🔥 Add superpowers to your Webflow website: finsweet.com/attributes
🧰 Extend your Webflow workflow: finsweet.com/extension
🚀 Build clear, scalable & organized Webflow websites: www.finsweet.com/client-first
👀 Check out products used at Finsweet: www.finsweet.com/recommended
🛍️ Buy Finsweet merch: finsweet.com/merch
-----------------------------------------------
// SOCIAL
Podcast: anchor.fm/finsweet
Twitter: / thatsfinsweet
Tik Tok: / thatsfinsweet
Instagram: / thatsfinsweet
Facebook: / thatsfinsweet
Dribbble: dribbble.com/thatsfinsweet
Behance: www.behance.net/thatsfinsweet/
Webflow: webflow.com/team/Finsweet/
-----------------------------------------------
// TAGS
#webflow #devlink #test
-----------------------------------------------
Thanks for your support! 🤟
Being waiting for this
I tried to play with Webflows devlink clonable. It would be very hard if you've never done react. Get to know basic react and things will make a lot more sense. Don't even worry about slots just go and learn how to structure components in react and how properties are passed down.
Great intro video! Thanks for explaining the props and slots in the video. I'm wondering if you managed to use the grid component to properly print out multiple cards as in the designed layout? This bit still baffles me. A tutorial on loops would be great as this is the main part in a lot of navigations, lists, etc.
It was just a simple case of using the grid as a component with a slot.
Pro tip: name slots "children" as per React convention. This way you don't have to pass child elements/components via a component prop like: all the children
You flawed your api access at 10:09 but we can still manage to see it
VUE++