React Syntax

A list of syntax references

Rendering Components

//Simple Function Component
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Class Component
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// Rendering the component
const element = <Welcome name="world" />;

Changing and updating with useState

const [scale, setScale] = React.useState(1)

const scale = 1

function MyComponent() {
  const [scale, setScale] = React.useState(1)
  return <Frame scale={scale} onTap={() => setScale(2)} />
}

// Writing the interaction separately

function MyComponent() {
  const [scale, setScale] = React.useState(1)
  function onTap() {
    setScale(scale + 0.1)
  }
  return <Frame scale={scale} onTap={onTap} />
}

Function Syntax

function square(value) { return value * value }
const square = (value) => { return value * value }
const square = (value) => value * value // Exactly the same as above

<Frame onCalculate={(value) => value * value} />
<Frame onClick={() => console.log("Hello")} /> // A real world example

Destructuring

const [koen, sara] = names


// Objects
const persons = {
  koen: "Koen Bok",
  sara: "Sara Surh"
}
const { koen, sara } = persons

Styles

function MyComponent() {
  const myStyle = {opacity: 0.5}
  return <div style={myStyle} />
}

JSX

// 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}} />

via Framer Guide to Syntax

References

• Arrow Functions
• In-Depth Destructuring