DEV Community

loading...
Cover image for React Cheat sheet (Updated June 2021)

React Cheat sheet (Updated June 2021)

Eric The Coder
Businessman and blogger #Javascript, #Python and #PHP. My favorite frameworks/librairies are #React, #Laravel, and #Django. I am also a fan of #TailwindCSS
Updated on ・7 min read

Follow me!: Follow @EricTheCoder_



I don't use React often and so whenever I need to do even the smallest thing in React, I have to check out the documentation, a tutorial, or post a question on a forum.

That's why I decided to do this memory aid and given that my memory is not that good I thought why not make a monstrous memory aid with all the concepts I know about React.

So I can read it from time to time and thereby strengthen my knowledge of React.

If you have ideas or recommendation do not hesitate and do so in the comments section.

React Cheat Sheet

 

Create a React App

// Create a new app
npx create-react-app my-app-name

// Run the created app
cd my-app-name
yarn start

// http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

First React functional Component

  • No need to import React from 'react' (since React 17)
  • Must have uppercase first letter
  • Must return JSX

(src/App.js)

// React component
function App(){
  return <h1>Hello World</h1>
} 

export default App;
Enter fullscreen mode Exit fullscreen mode

How this component get render to the browser? The main project file is src/index.js and in that file there are instruction to render the component

ReactDOM.render(<App />, document.getElementById('root'))
Enter fullscreen mode Exit fullscreen mode

The App component will then be rendered inside public/index.html 'root' div

Import Component

Component will be created in separate files. Each component need to be export and then import

function Greeting(){
    return <h1>Hello World</h2>
}
export default Greeting
Enter fullscreen mode Exit fullscreen mode

This component can then be import

import Greeting from './Gretting'

function App(){
    return <Greeting />
}
Enter fullscreen mode Exit fullscreen mode

or name export...

export function Greeting(){
    return <h1>Hello World</h2>
}
Enter fullscreen mode Exit fullscreen mode

This component can then be import

import {Greeting} from './Gretting'
Enter fullscreen mode Exit fullscreen mode

BEM Naming Convention

return (
<div className="app">
  <h1 className="app_title">Welcome to my application: {appTitle}</h1>
  <div className="product">
    <h1 className="product__name--large">Product name: {product.name}</h1>
<h1 className="product__name--small">Nick name: {product.nickName}</h1>
    <p className="product__description">Product description: {product.description}
  </div>
<div>
)
Enter fullscreen mode Exit fullscreen mode

JSX Rules

Return a single element (only one parent element)

// not valid
return <h1>Hello world</h1><h2>Hi!</h2>

// valid with fragment. 
return (
    <>
        <h1>Hello World</h1>
        <h2>Hi!</h2>
    </>
)
// Noted the parenthesis for multi-line formatting
Enter fullscreen mode Exit fullscreen mode

Use className instead of class
Also all attribute name need to be camelCase

// not valid
return (
    <div class="title">
        Hello World
    </div>
)

// valid
return (
    <div className="title">
    </div>
)

Enter fullscreen mode Exit fullscreen mode

Close every element

return (
    <img src="http:example.com/image.jpg" />
    <input type="text" name="first_name" />
)
Enter fullscreen mode Exit fullscreen mode

Nested Components

// Arrow function shorthand component
const Person = () => <h1>Mike Taylor</h1>

// Arrow function component
const Message = () => {
    return <h1>Hello</h1>
}

// Function component
function HelloWorld(){
  return (
      <>
          <Message />
          <Person />
      </>
  )
} 
Enter fullscreen mode Exit fullscreen mode

Component CSS

(src/App.css)

h1 {
    color: red;
}

Enter fullscreen mode Exit fullscreen mode

(src/App.js)
Import the CSS file

import './App.css'

function App(){
  return <h1>Hello World</h1>
} 
Enter fullscreen mode Exit fullscreen mode

Inline CSS

function App(){
  return <h1 style={{ color: 'red' }}>Hello World</h1>
} 
Enter fullscreen mode Exit fullscreen mode

Javascript in JSX

  • Enclose between {}
  • Must be an expression (return a value)
function App(){
    const name = 'Mike'
    return (
      <>
          <h1>Hello {name}</h1>
          <p>{name === 'Mike' ? '(admin)': '(user)'}</p>
      </>
    )
} 
Enter fullscreen mode Exit fullscreen mode

Component Properties (Props)

function App()
    return <Person name='Mike' age={29} />
} 

const Person = (props) => {
    return <h1>Name: {props.name}, Age: {props.age}</h1>
}

// or props object deconstructing
const Person = ({name, age}) => {
    return <h1>Name: {name} Age: {age}</h1>
}
Enter fullscreen mode Exit fullscreen mode

Children Props (slot)

function App()
    return (
        <Person name='Mike' age={29}>
            Hi, this is a welcome message
        </Person>
    )
} 

const Person = (props) => {
    return (
        <h1>Name: {props.name}, Age: {props.age}</h1>
        <p>{props.children}</p>
    )
}

// or props object deconstructing
const Person = ({name, age, children}) => {
    return (
        <h1>Name: {name} Age: {age}</h1>
        <p>{children}</p>
    )
}
Enter fullscreen mode Exit fullscreen mode

Default Props value

const Person = ({name, age, children}) => {
    return (
        <h1>Name: {name} Age: {age}</h1>
        <p>{children}</p>
    )
}

Person.defaultProps = {
    name: 'No name',
    age: 0,
}
Enter fullscreen mode Exit fullscreen mode

List

const people = [
  {id: 1, name: 'Mike', age: 29},
  {id: 2, name: 'Peter', age: 24},
  {id: 3, name: 'John', age: 39},
]
function App(){
    return (
        people.map(person => {
            return <Person name={person.name} age={person.age}/>
        })
    )
} 

const Person = (props) => {
  return (
      <h1>Name: {props.name}, Age: {props.age}</h1>
  )
}
Enter fullscreen mode Exit fullscreen mode

List with key (for React internal reference)

function App(){
    return (
        people.map(person => {
            return <Person key={person.id} name={person.name} age={person.age}/>
        })
     )
} 
Enter fullscreen mode Exit fullscreen mode

Props object destructuring

function App(){
  return people.map(person => <Person key={person.id} {...person} />)
}

const Person = ({name, age}) => {
  return (
      <h1>Name: {name}, Age: {age}</h1>
  )
} 
Enter fullscreen mode Exit fullscreen mode

Click Event

const clickHandler = () => alert('Hello World')
function App(){
    return (
        <>
            <h1>Welcome to my app</h1>
            <button onClick={clickHandler}>Say Hi</button>
        </> 
    )
} 
Enter fullscreen mode Exit fullscreen mode

or inline...

function App(){
    return (
        <>
            <h1>Welcome to my app</h1>
            <button onClick={ () => alert('Hello World') }>Say Hi</button>
        </>
     )
} 
Enter fullscreen mode Exit fullscreen mode

To pass arguments we need to use arrow function

const clickHandler = (message) => alert(message)
function App(){
    return (
        <>
            <h1>Welcome to my app</h1>
            <button onClick={() => clickHandler('Hello World')}>Say Hi</button>
        </> 
    )
} 
Enter fullscreen mode Exit fullscreen mode

e for event arguments

const clickHandler = (e) => console.log(e.target)
function App(){
    return (
        <>
            <h1>Welcome to my app</h1>
            <button onClick={clickHandler}>Say Hi</button>
        </> 
    )
} 
Enter fullscreen mode Exit fullscreen mode

Pass event from child to parent

function Todo({item, onDelete}) {
    return (
      <div>
        {item}
        <button onClick={() => onDelete(item)} 
      </div>
    )
}

function Todos() {
  const handleDelete = (todo) => {
    const newTodos = todos.filter(item => item !== todo)
    setTodos(() => newTodos)
  }

  return (
    {todos.map(todo => (
       <Todo item={todo} onDelete={handleDelete}/>
    }
  )
}
Enter fullscreen mode Exit fullscreen mode

useState Hook

The purpose of useState is to handle reactive data. any data that changes in the application is called state. And when the state changes, you want react to update the UI.

  • Hook always start with 'use' prefix
  • Must be invoke only in a React component/function
  • Must be call at top level of a functional component
  • Declaration cannot be call conditionally
  • useState return an array of 2: [state value, set state function]
import React, {useState} from 'react';

const DisplayTitle = () => {
  const [title, setTitle] = useState('This is the Title')
  const handleClick = () => setTitle('New Title')
  return <>
    <h2>{title}</h2>
    <button type="button" className="btn" onClick={handleClick}>
      Change Title
    </button>
  </>
};

export default DisplayTitle;
Enter fullscreen mode Exit fullscreen mode

useState with object

const DisplayTitle = () => {
  const [person, setPerson] = useState({name: 'Mike', age: 29})
  const handleClick = () => setPerson({...person, age: 35})
  return <>
    <h2>{title}</h2>
    <button type="button" className="btn" onClick={handleClick}>
      Change Age
    </button>
  </>
};
Enter fullscreen mode Exit fullscreen mode

setState functional form

function Counter() {
  const [count, setCount] = useState(0)
  // Use a function to set State
  const increase = () => setCount(() => count + 1)
  return (
    <>
      <h1>Counter</h1>
      <p>{count}</p>
      <button onClick={increase} className='btn'> + </button>
      <button onClick={() => setCount(() => count - 1)} className='btn'> - </button>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

useEffect

In React you may want to execute code after lifecycle events or side effects.

By default useEffect function is execute after every re-render. You can then execute code everytime component update.

import React, { useEffect } from 'react';

function IncreaseValue() {
    const [value, setValue] = useState(0)
    useEffect(() => {
        document.title = `New value: ${value}` 
    })
    return <button onClick={() => setValue(value + 1)}>Increase</button>
}
Enter fullscreen mode Exit fullscreen mode

Conditional useEffect

Conditional need to be place inside useEffect function

useEffect(() => {
    if (value > 0) {
        document.title = `New value: ${value}` 
    }
})
Enter fullscreen mode Exit fullscreen mode

useEffect Dependency List

What if you want to execute code only on first render or only when a particular state change? You can use the useEffect function and send an array of dependencies as parameter.

useEffect will run only if state is in the Dependency List.
If the list is empty [] the useEffect will only run on initial render.

useEffect(() => {
    document.title = `New value: ${value}` 
}, [])
// Noted the empty array. useEffect will then only run once on initial render

useEffect(() => {
    document.title = `New value: ${value}` 
}, [value])
// Will run each time 'value' state change.
Enter fullscreen mode Exit fullscreen mode

useEffect cleanup function

What if you want to execute code each time the component unmount?

To execute code only when a component is unmount/destroy you need to add a 'return' statement to your useEffect function.

useEffect(() =>  { 
    const timer = window.setInterval(() => { 
        setCount(count => count + 1)
    }, 1000)
    return () => clearInterval(timer)
}, [])
Enter fullscreen mode Exit fullscreen mode

The code 'clearInterval(timer)' will only be execute before component is remove from UI (unmount)

Conditional Rendering

function DisplayGreeting() {
    const [name, setName] = useState('Mike')
    if (name === 'Mike') {
        return <h1>Hello admin {name}</h1> 
    }
    return <h1>Hello user {name}</h1> 
}
Enter fullscreen mode Exit fullscreen mode

Inline If-Else

  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Inline Logical && Operator.
Display only if first expression is truthy
truthy = Not : 0, "", null, undefined, and NaN

  function DisplayUserInfo({active}) {
    return (
      <div>
        { active && <h1>User is active</h1>}
      </div>
    );
}
Enter fullscreen mode Exit fullscreen mode

Multiple inline If

<span className={count === 0 && 'text-gray-500' || count > 0 && 'text-green-500' || count < 0 && 'text-red-500'}>{count}</span>
Enter fullscreen mode Exit fullscreen mode

Form

const UserForm = () => {
  const [userName, setUserName] = useState('')
  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(userName)
  }
return (
<>
    <form onSubmit={handleSubmit}>
      <input 
          value={userName} 
          onChange={(e) => setUserName(e.target.value)} 
          type="text" id="userName" 
          name="userName"
      />
       <button type="submit">Submit</button>
    </form>
</>
)
};

export default UserForm;
Enter fullscreen mode Exit fullscreen mode

useRef

useRef is mostly use to target a DOM element. But it can also be use to keep/preserve a mutable value between each render. useRef does not trigger a re-render (like a useState).

const UseRefBasics = () => {
  const refContainer = useRef(null)
  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(refContainer.current.value)
  }

  useEffect(() => {
    refContainer.current.focus()
  }, [])

  return (
    <div>
      <form className="form" onSubmit={handleSubmit}>
        <div>
          <input ref={refContainer} type="text" />
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  )
};
Enter fullscreen mode Exit fullscreen mode

Conclusion

That's it for today. We still have a lot to do, so see you tomorrow... If you want to be sure to miss nothing click follow me!

Follow me!: Follow @EricTheCoder_


Discussion (27)

Collapse
xardonik profile image
XardoniK • Edited

I found small mistake in "e for event arguments":

This won't work because you pass string as an argument

const clickHandler = (e) => console.log(e.target)
function App(){
    return (
        <>
            <h1>Welcome to my app</h1>
            <button onClick={() => clickHandler(*'Hello World'*)}>Say Hi</button>
        </> 
    )
} 
Enter fullscreen mode Exit fullscreen mode

There are two ways how to do it:
1.

const clickHandler = (e) => console.log(e.target)
function App(){
    return (
        <>
            <h1>Welcome to my app</h1>
            <button onClick={(e) => clickHandler(e)}>Say Hi</button>
        </> 
    )
} 
Enter fullscreen mode Exit fullscreen mode

2.

const clickHandler = (e) => console.log(e.target)
function App(){
    return (
        <>
            <h1>Welcome to my app</h1>
            <button onClick={clickHandler}>Say Hi</button>
        </> 
    )
} 
Enter fullscreen mode Exit fullscreen mode
Collapse
ericchapman profile image
Eric The Coder Author

Ok thanks I made the correction

Collapse
elibates profile image
Eli Bates

Thanks! Will use

Collapse
linusvallejo profile image
LinusVallejo

Exactly

Collapse
guptaarth87 profile image
guptaarth87

This post was amazing actually it is hard to find all essenstial things of any particular technology at one place. You almost covered all topics that a beginner should know but I think u should have also added the routing topic.

Collapse
charlotteisambert profile image
Charlotte Isambert • Edited

Thanks a lot that's very helpful!

There is one thing I don't understand in this part from 'setState functional form' though:

function Counter() {
  const [count, setCount] = useState(0)
  // Use a function to set State
  const increase = () => setCount(() => count + 1)
  return (
    <>
      <h1>Counter</h1>
      <p>{count}</p>
      <button onClick={increase} className='btn'> + </button>
      <button onClick={() => setCount(() => count - 1)} className='btn'> - </button>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

I don't understand why we'd use the functional update of setState without its count param: setCount(() => count - 1).

I would understand if we used the count param from setCount: setCount((count) => count - 1), to make sure we use the last count value

Am I missing something? :)

Collapse
axmachina profile image
AxMachina

Your version is accurate. The point of using functional form is to ensure you get the most current state value and not the stale one (as in the original version).

Collapse
joshternyak profile image
Josh Ternyak

Super in-depth post! I just launched a site bitcoinforecast.io and I developed it myself using React. Your post covers the strategies I used to built the app. "Props" off to you ;) pun intended.

Collapse
amboulouma profile image
Amin M. Boulouma
Collapse
rizogg profile image
ZG

I think, the word deconstructing needed to be changed as destructuring

Collapse
ericchapman profile image
Eric The Coder Author

Yeah good catch. Thanks.

Collapse
hunterachieng profile image
hunterachieng

Thank you for this post

Collapse
pekosong profile image
Peko • Edited

Thank you posting

this component will not work.

const Person = (name, age) => {
return (

Name: {name}, Age: {age}

)
}

should be

const Person = ({name, age}) => {

return (

Name: {name}, Age: {age}


)

}
Collapse
ericchapman profile image
Eric The Coder Author

Fixed. Thanks

Collapse
safinghoghabori profile image
Safin Ghoghabori

Can you provide next parts please? If possible add link to this so we can access it easily.

Collapse
yashlalpotu11 profile image
YASH LALPOTU

Very helpful, thanks

Collapse
dova profile image
doVa

Can you add Reducer and Context?

Collapse
dylut2000 profile image
Hardy Lutula

Thank you so much..

Collapse
atuljaiswar profile image
atuljaiswar

First of all this is not 2021 cheat sheet FYI I am using all this from the end of 2019.
Please be sure before ur posting anything it's not 2021 cheat sheet

Collapse
cags84 profile image
Carlos Guzman

Thanks

Collapse
adithya_baliga profile image
Adithya Baliga

Wow! very useful and informative post

Collapse
gracestefan12 profile image
Grace Stefan

Great post.

Collapse
boly38 profile image
Brice

There is multiples examples without only one root element in a return.
Anyway thanks for this good sharing 👍

Collapse
kunal__satpute profile image
Kunal Satpute

Thank you for this post Eric

Collapse
andrewbaisden profile image
Andrew Baisden

This is a great detailed list.

Collapse
melfordd profile image
Melford Birakor

Well done... It's not an easy task to make such compilations across topics

Collapse
davidcam profile image
David Camarena

Really nice and useful, thanks!