React.js Cheat Sheet

Who needs Vanilla-js?

#Components

Why components?

React.js components allow you to split the whole app into individual components and reuse them. The idea follows the don't-repeat-yourself philosophy.

Functional Component

const Person = () => {
    return <p>Max</p>
} 
// or:
function Person() {
    return <p>Max</p>
}
<Person/>  // renders <p>Max</p>

Component with Props

function Person(props) {
    return <p>{props.name}</p>
}
<Person name='Anna'/> // renders <p>Anna</p>
Props work like parameters in functions. We can pass them into a component, generating an individual output.

Multiple Props

function Person(props) {
    return <p>{props.name}, {props.age}</p>
}
<Person name='Anna' age={23} /> 
// renders <p>Anna, 23</p>
Thanks to the Spread Operator, we can decompose the object.

#Shorthands

ES6 Shorthands in React.js

Many Shorthands of JavaScript can be used in React.js - they make your code cleaner, easier readable and slimmer.
I wrote an article on this topic: 4 Useful JavaScript-Shorthands for React.js

if-else-shorthand in JSX

const OurComponent = () => {
    return (
        <div>
        {6 > 5 ? (
            <p>6 is greater</p>
        ) : (
            <p>6 is less or equal</p>
        )}
        </div>
    )
}

Another example

function App() {
    return (
        <div>
        {!loading ? (
            <p>Main content</p>
        ) : (
            <p>loading...</p>
        )}
        </div>
    )
}
A more useful example

Spread Operator in JSX

const PersonComponent = (props) => {
    return (
        <p>
            {props.name} is {props.age} years old
        </p>
    )
}
function App() {
    const props = { name: 'Max', age: 23 }
    return <PersonComponent {...props} />
}
Thanks to the Spread Operator, we can decompose the object.

Destructuring in React.js

const [count, changeCount] = useState(0)
count 
// returns the current state '0'

changeCount(5) 
// function, to change the state to '5'
We usually use destructuring when setting up our state with hooks. Learn more about destructuring here

Destructuring with props

const Person = (props) => {
    return (
        <div>
            <p>Name: {props.name}</p>
            <p>Age: {props.age}</p>
        </div>
    )
}
const Person = (props) => {
    const { name, age } = props
    return (
        <div>
            <p>Name: {name}</p>
            <p>Age: {age}</p>
        </div>
    )
}
Same result, but the second example looks much better, right?

#Event Handling in React

Onclick events

function hello() {
    alert("hello")
}

function App() {
    return <button onClick={hello}>
        Click me
    </button>
}
Providing the function, which should me executed as a variable, will work. Important: Do not call the function with the bracktes-syntax. This will executed the function instantly.

Onclick events - anonymous function

function App() {
    return <button onClick={() => alert('hello')}>
        Click me
    </button>
}
Same result as in the example before, but without declaring a function.

Handling Forms

function App() {
  const [input, changeInput] = useState("")

  function handleChange(event) {
    changeInput(event.target.value)
  }

  return (
    <form onSubmit={() => alert(input)}>
      <input type="text" value={input} onChange={handleChange}/>
      <input type="submit" value="Submit"/>
    </form>
  )
}
This example uses hooks to save the input in the form. With the onSubmit attribute we can handle submitting forms on our own.