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