ES6 React Cheatsheet

1. ES6 / React Cheatsheet For Framer Playground Beta Also see my React for Web Designers post if you are new to React 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).
2. const name = "Koen" name = "Ben" // Big fat error; you cannot change a const varia ble Functions ES6 has multiple ways to write functions. You can study why here, but I’ll keep it simple; these are often the exact same, and you can pick the one you like best. function square(value) { return value * value } const square = (value) => { return value * value } The last one has a shortcut option, notice how you can skip the brackets and return : const square = (value) => value * value // Exactly the same as above This works really well with jsx components (see below), you call these anonymous functions: <Frame onCalculate={(value) => value * value} /> <Frame onClick={() => console.log("Hello")} /> // A real examp le Components The main attraction of React are components. Components allow you to basically write your own html tags that you can use as often as you like. Components are simply defined as functions, but make sure they always start with a capital letter. That way they can be distinguished from regular html tags when you use them (because those are always lowercase).
3. function MyComponent(props) { return <div>Hello {}</div> } You can use them with jsx syntax, which basically just looks like html : function App() { return ( <div> <MyComponent name="Koen" /> <MyComponent name="Jorn" /> <MyComponent name="Sara" /> </div> ) } Which output will exactly equal: function App() { return ( <div> <div>Hello Koen</div> <div>Hello Jorn</div> <div>Hello Sara</div> </div> ) } JSX Syntax
4. Even while jsx is much like html there are some subtle differences that make sense in a JavaScript context. If you remember these you’ll be fine. // Regular jsx syntax <Frame prop={variable} /> // Boolean const enabled = true <Frame enabled={enabled} /> // Or directly <Frame enabled={true} /> <Frame enabled /> // String const name = "Koen" <Frame name={name} /> // Or directly <Frame name="Koen" /> <Frame name={"Koen"} /> // Number const age = 37 <Frame age={age} /> // Or directly <Frame age={37} /> // Object const style = {opacity: 1} <Frame style={style} /> // Or directly <Frame style={{opacity: 1}} />
5. Hooks Hooks are a hip name for things you can do in a component. The most common one that you will use is useState . It allows the component to remember some value, and update when it changes. The syntax looks a bit scary at first, but it’s really not that hard. const [scale, setScale] = React.useState(1) What this does is it just sets the scale variable to the value 1 . Much like: const scale = 1 So why all that other stuff? Well, when you change this scale in the future, you want the component to change with it, it needs to update itself on the screen. So basically React needs to know the value is updated – React needs a hook. This is where the React.useState(1) comes in. It lets React know: Hey React! You want to keep an eye on this value here. Oh by the way the default value for it is 1 . React: no problem! I’ll keep track of it. Here you have two things back: The current value for scale (which is 1 if you never changed it. A function to update the value so that I know about it too called setScale . So the complicated looking const [scale, setScale] is just needed because React gives you back two things instead of one, and this little shortcut is a nice way to give them both names. You could actually write the exact same code without the shortcut like this: const hook = React.useState(1)
6. const scale = hook[0] // First value const setScale = hook[1] // Second value Whew, ok. I hope just enough info for you to now just use the shortcut. The last thing we need to look at is how to change the scale value with setScale . Let’s do that with a full example: function MyComponent() { const [scale, setScale] = React.useState(1) return <Frame scale={scale} onTap={() => setScale(2)} /> } Pretty easy; if you tap the scale gets set to 2 using setScale and React updates the component. To finish off, I’ll show you almost the same but now a little bit more explicit using the function notation I used before. This is mostly a preference, you can pick what you like better. Additionally, this example will increase the scale by 0.1 every time you tap. function MyComponent() { const [scale, setScale] = React.useState(1) function onTap() { setScale(scale * 1.1) } return <Frame scale={scale} onTap={onTap} /> } A little more code, but a little simpler looking maybe. Again, up to you. But I like this.
7. FAQ Class or function based components? There are two ways to define components in React: functions and classes. Until the recent React Hooks release, class based functions gave you more features for your components, but with React Hooks they can both do everything. We built the new Framer library on React hooks because it makes everything quite simple and beginners don't have to learn about classes, this, etc. It's quite elegant really. TLDR; use functions and learn about hooks if you have advanced plans. Isn’t React for engineers? I love this question. Because it use to be: “isn’t programming for engineers”? And this implies that we established it is not. You don’t have be an engineer to code. And you just need enough code “to be dangerous” to greatly increases your possibilities for complex creative expression. It’s also not harder than say learning After Effects. If we are using code as designers, we most often describe interfaces. And the way we think of interface composition is in elements like buttons, lists, navigation etc. React is an optimized way to express interfaces in these elements, through components. It helps you build complex interfaces (and even simple interfaces get complex quickly) in an efficient way. Through organizing your interfaces in three key concepts: components, props and state, you can express everything you can think of and get all these things for free: Clear structure and rules to organize your code, so you don’t have to start over at a certain complexity. A great way to isolate, compose and re-use parts of your code between projects or across teams in the form of simple components all the way to complex design systems.
8. Good rules to collaborate with others, as everything is built in similar ways. React is just a very smart way to organize interface code that has been around for decades with pretty simple concepts and rules. Saying that it is only useful for engineers would be saying that no amateur photographer should ever buy a Leica. If you can, why not work like the best do? Why does React seem so hard? I have noticed that designers with a certain context struggle more with React than others: people who have been building interfaces in jQuery, ActionScript or (ironically) Framer Classic. This has little to do with React, but everything with the programming model. The above mentioned use an imperative model while React uses a declarative model. Let me try to explain: An imperative model is a way to describe changes through the exact steps in between. If the computer follows exactly those steps, it should reach a certain end state. A declarative model describes changes as before and after and lets the computer figure out the steps in between automatically. As designers we are very used to working declaratively. Every timeline application where you tween between two states is a fantastic example. You describe before and after, and the computer figures out the tween. Let’s try and look at this from a programmers perspective and build a simple login flow. This is not real or complete code, it just tries to illustrate the difference in approach. The imperative app uses (fake) jQuery to exactly describes what to change if something happens. This should look very familiar if you used it a lot. $("button .login").onClick(() => { $("form").attr("enabled", false)
9. $("body").append($("div.spinner")) doLogin((success, username) => { if (success) { // Remove the form and show login $("form").remove() $("div.spinner").remove() $("body").append($(`Welcome back ${username}`)) } else { // Stop the spinner and enable form again $("form").attr("enabled", true) $("form.error").text("Could not login") $("div.spinner").remove() } }) }) The declarative (fake) React code describes the three different states of the app: logged_out , logging_in and logged_in . It seems to completely re-render your app at every change, but the trick is that under the hood figures out all the differences and only updates that so everything stays as fast as possible. function App({ state = "logged_out", username = null }) { if (!state === "logged_out") { return <Login /> } if (!state === "logging_in") { return <Spinner /> } if (!state === "logged_in") { return <div>Welcome back {username}</div>
10. } } I hope you can see how the declarative model makes a lot of sense when building interfaces, but it requires a bit of a mind-shift if you got used to the imperative model. How do I do classic Framer things? Create a Frame / Layer layerA = new Layer({size: 400}) layerB = new Layer({size: 200}) layerB.parent = layerA <Frame size={400}> <Frame size={200} /> </Frame> Create a Scroll Component scroll = new ScrollComponent({size: 400}) scroll.content = new Layer({size: 400}) <Scroll size={400}> <Frame size={400} /> </Scroll> Transform a value scrollOffsetY = 0 scale = modulate(scrollOffsetY, [0, 100], [1, 2])
11. const scrollOffsetY = useMotionValue(0) const scale = useTransformedValue(scrollOffsetY, [0, 100], [1, 2])