​​Framer ES6 / React Guide
​​

​​For Framer Playground

​​
​​This guide aims to learn you the basics around React and ES6 to know enough code “to be dangerous”. From there you can use it to build interactive ideas with animations and gestures that we offer in the new Framer API.
​​
  • ​​If you want to really learn programming I can recommend (the free) Watch and Code. 
​​
​​Enjoy! I hope you’ll have fun and make things you could only imagine before – @koenbok
​​
​​
 
​​
​​
​​
​​​✨​ Reference and Examples: framer.com/api

​​Syntax

​​Imports and Exports / Variables / Functions / Destructuring / Components / Styles / JSX

​​Theory

​​Isn’t React for Engineers? / Why does React seem hard? / React for Web Designers
​​Application State / Props vs State / Hooks and State / Class vs Function Components / Overrides in Framer

​​Questions

​​JSX / Common Errors / Real Data / Data Sharing / Git / Code Export / Framer Classic
​​
​​If you get stuck, come hang in the Group or on Slack.
​​
​​
​​

​​Syntax

​​

​​Imports and Exports

​​Always make sure you have a React import on top (or jsx​ / tsx​ files won’t work). This is a bit annoying but JavaScript needs to know where to find your libraries.
​​
​​import * as React from "react"
​​
​​Then, make sure to import anything you need from Framer. You can find everything that is in the Framer library in the docs. The most common ones are Frame​, Scroll​ and Page​.
​​
​​import { Frame, Scroll, Page, useCycle, useMotionValue} from "framer"
​​
​​And if you want to export​ something yourself so that another file can import​ it:
​​
​​export const name = "Koen" // In myFile.jsx
​​
​​import { name } from "./myFile"
​​

​​Variables

​​You can still use var​ but its modern version is let​. Think of it as “Let it be…”.
​​
​​let name = "Koen"
​​
​​You can use const​ if you know this variable should never change (try to always use this).