DEV Community

React Cheat sheet (Updated June 2021)

Eric The Coder on June 11, 2021

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...

Read full post

XardoniK • Jun 11 '21 • 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>
        </> 
    )
}

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

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

Eric The Coder • Jun 18 '21

Ok thanks I made the correction

Eli Bates • Jun 12 '21

Thanks! Will use

LinusVallejo • Jun 13 '21

Exactly

Charlie • Feb 7 '22

thanks--helpful post.

there's a typo: import {Greeting} from './Gretting'

guptaarth87 • Jun 14 '21

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.

Josh Ternyak • Jun 14 '21

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.

ZG • Jun 14 '21

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

Eric The Coder • Jun 18 '21

Yeah good catch. Thanks.

Charlotte Isambert • Jun 16 '21 • 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>
    </>
  )
}

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? :)

AxMachina • Jul 17 '21

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).

hunterachieng • Jun 11 '21

Thank you for this post

Amin M. Boulouma • Jun 27 '21

You might also like: How to Master Python Fast and easy: A complete simple Tutorial based on the officiel documentation

Safin Ghoghabori • Jun 13 '21

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

doVa • Jun 13 '21

Can you add Reducer and Context?

Brice • Jun 12 '21

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

Peko • Jun 17 '21 • 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}

)

}

Eric The Coder • Jun 18 '21

Fixed. Thanks

YASH LALPOTU • Jun 14 '21

Very helpful, thanks

Hardy Lutula • Jun 13 '21

Thank you so much..

atuljaiswar • Jun 13 '21

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