Code Components | Episode 1 - Coding in Framer

Create your first code component from scratch in Framer Web. This tutorial will help you take the first step for making your Framer prototypes more feature rich. We’ll take a look at what code components are and how to use them to create simple but flexible React components. Whether it’s your first time coding or you’re a web developer looking at how you can leverage Framer Web, this tutorial series will give you the tools to create and deliver great products. 📦 Framer Web Template: https://framer.com/projects/new?dupli... 🧑🏻‍🎨Try Framer for Free: https://framer.com/codingwithseth We’ll cover the basics of a React component, styling your components in JSX and how to leverage default props all within the context of Framer Web. The skills you learn here are applicable to React apps too. You can take your prototypes from Framer Web into code and that’s just what we’ll be doing throughout the series. The Coding in Framer series, in collaboration with Framer, will take you through the process of working with code in Framer Web. It’s best viewed in the context of the Framer Web tutorial player but you can also follow along in YouTube. Throughout the series we’ll be taking a look at a fictional banking app. This project based context will help ground the things you learn for real-world apps so you can translate your skills into your own projects. Chapters: 0:00 Introduction 1:05 Create a Code Component 1:44 Framer API Documentation 2:03 Create the LineItem component 3:48 Add default props to LineItem 4:04 Style LineItem 6:01 Create BarChart Component 9:18 Create Transactions Component 10:42 Conclusion --- 🐦 Follow me on twitter:   / darth_knoppix   📝 Read my blog: https://blog.sethcorker.com/ 👨‍💻Join me on the DEV community: https://dev.to/darthknoppix 📰 Read my articles on Medium:   / front-end-field   🐙 See my public code on GitHub: https://github.com/Darth-Knoppix --- If you have any suggestions for new tutorials, leave a comment or tweet me. --- Subscribe to my channel for more tutorials helping you to craft cool user interfaces on the web with all the tools which are available from JavaScript, CSS and HTML to specific web APIs. I cover Framer Motion and React libraries in-depth so you can learn how to achieve animations on the web and build more intuitive web apps.