Aide-mémoire React (Cheat Sheet)
Tags: react, javascript, beginners, tutorial
Published: 2021-07-20 12:13:12

---
title: Aide-mémoire React (Cheat Sheet)
published: true
description: React est une librairie vraiment extraordinaire. Par contre, elle n'est pas si simple et il y a beaucoup de chose qu'il faut mémoriser
tags: react, javascript, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ioow2e6i5q6qx8uwo6lm.png
canonical_url: https://www.ericlecodeur.com/aide-memoire-react-cheat-sheet
---

Cet article fut publié originalement sur mon blog: https://www.ericlecodeur.com

Si vous aimez, svp visitez mon blog et/ou <a href="https://twitter.com/EricLeCodeur" class="twitter-follow-button">suivez-moi sur Twitter</a>
<hr>

React est une librairie vraiment extraordinaire. Par contre, elle n'est pas si simple et il y a beaucoup de chose qu'il faut mémoriser

C'est pourquoi j'ai fait ce monstrueux aide-mémoire avec tous les concepts de base de React.

<h2>Voici mon aide-mémoire React</h2>
&nbsp;

<h4>Création d'une application React</h4>

```bash
npx create-react-app my-app-name

// Exécuter le serveur local
cd my-app-name
yarn start

// http://localhost:3000
```
<h3>Règles pour la création d'un component React</h3>

- La fonction doit avoir la première lettre de son nom en  majuscule

- La fonction doit retourner du JSX

(src/App.js)

Exemple :

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

export default App;
```
Comment ce composant est-il rendu dans le navigateur ? Le fichier principal du projet est src/index.js et dans ce fichier il y a des instructions pour le rendu du component
```javascript
ReactDOM.render(<App />, document.getElementById('root'))
```
Le component App sera ensuite rendu dans public/index.html 'root' div

<h3>Importer un component</h3>
Les components React seront créé dans des fichiers séparé. Chaque component doit être exporté puis importé 

```javascript
function Greeting(){
    return <h1>Hello World</h2>
}
export default Greeting
```
Ce composant peut ensuite être importé

```jsx
import Greeting from './Gretting'

function App(){
    return <Greeting />
}
```

<h3>Règles d'utilisation du JSX</h3>
Renvoie un seul élément (un seul élément parent)

```jsx
// non valide
return <h1>Hello world</h1><h2>Hi!</h2>

// valide grâce à l'utilisation du tag <fragment> 
return (
    <>
        <h1>Hello World</h1>
        <h2>Hi!</h2>
    </>
)
// A noté les parenthèse pour le formatage multiligne
```

- Utiliser className au lieu de class

- De plus, tous les noms d'attributs doivent être camelCase


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

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

```
Fermez le tag de chaque élément

```jsx
return (
    <img src="http:example.com/image.jpg" />
    <input type="text" name="first_name" />
)
```
<h3>Nested Components</h3>

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

<h3>Component CSS</h3>
(src/App.css)

```css
h1 {
    color: red;
}

```
(src/App.js)
Import the CSS file

```jsx
import './App.css'

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

<h3>Inline CSS</h3>

```jsx
function App(){
  return <h1 style={{ color: 'red' }}>Hello World</h1>
} 
```
<h3>Javascript in JSX</h3>

- Écrire entre {}

- Doit être une expression (retourner une valeur)

```jsx
function App(){
    const name = 'Mike'
    return (
      <>
          <h1>Hello {name}</h1>
          <p>{name === 'Mike' ? '(admin)': '(user)'}</p>
      </>
    )
} 
```

<h3>Component Properties (Props)</h3>

```jsx
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>
}
```
<h3>Children Props (slot)</h3>

```jsx
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>
    )
}
```

<h3>Default Props value</h3>

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

Person.defaultProps = {
    name: 'No name',
    age: 0,
}
```
<h3>List</h3>

```jsx
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>
  )
}
```
<h3>List with key (for React internal reference)</h3>

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

<h3>Props object destructuring</h3>

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

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

<h3>Click Event</h3>

```jsx
const clickHandler = () => alert('Hello World')
function App(){
    return (
        <>
            <h1>Welcome to my app</h1>
            <button onClick={clickHandler}>Say Hi</button>
        </> 
    )
} 
```
ou inline...

```jsx
function App(){
    return (
        <>
            <h1>Welcome to my app</h1>
            <button onClick={ () => alert('Hello World') }>Say Hi</button>
        </>
     )
} 
```
Pour passer des arguments, nous devons utiliser les arrow function

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

e pour event arguments
```jsx
const clickHandler = (e) => console.log(e.target)
function App(){
    return (
        <>
            <h1>Welcome to my app</h1>
            <button onClick={clickHandler}>Say Hi</button>
        </> 
    )
} 
```
Passer event du child au parent

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

<h3>useState Hook</h3>
Le but de useState est de gérer les données réactives. toute donnée qui change dans l'application est appelée 'state'. Et lorsque l'état change, vous souhaitez réagir pour mettre à jour l'interface utilisateur.

- Les Hook commence toujours par le préfixe 'use'

- Doit être invoqué uniquement dans un component React

- Doit être appelé au plus haut niveau d'un component

- La déclaration ne peut pas être appelée conditionnellement

- useState renvoie un tableau : [valeur d'état, fonction d'état définie]
```js
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;
```
<h3>useState with object</h3>

```jsx
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>
  </>
};
```
<h3>setState functional form</h3>

```jsx
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>
    </>
  )
}
```
<h3>useEffect</h3>
Dans React, vous souhaiterez peut-être exécuter du code après des événements de lifecylce ou des side effects.

Par défaut, la fonction useEffect est exécutée après chaque nouveau rendu. Vous pouvez ensuite exécuter du code à chaque mise à jour du component.

```jsx
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>
}
```

<h3>Conditional useEffect</h3>
Le conditionnel doit être placé dans la fonction useEffect

```jsx
useEffect(() => {
    if (value > 0) {
        document.title = `New value: ${value}` 
    }
})
```

<h3>useEffect Dependency List</h3>
Que se passe-t-il si vous souhaitez exécuter du code uniquement lors du premier rendu ou uniquement lorsqu'un 'state' particulier change ? Vous pouvez utiliser la fonction useEffect et envoyer un tableau de dépendances en paramètre.

useEffect ne s'exécutera que si l'état est dans la liste de dépendances.
Si la liste est vide [], useEffect ne s'exécutera que lors du rendu initial.

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

<h3>useEffect cleanup function</h3>
Et si vous vouliez exécuter du code à chaque 'destroy' du component ?

Pour exécuter du code uniquement lorsqu'un component est démonté/détruit, vous devez ajouter une instruction 'return' à votre fonction useEffect.
```jsx
useEffect(() =>  { 
    const timer = window.setInterval(() => { 
        setCount(count => count + 1)
    }, 1000)
    return () => clearInterval(timer)
}, [])
```
Le code 'clearInterval(timer)' ne sera exécuté qu'avant la suppression du component de l'interface utilisateur (démontage)

<h3>Conditional Rendering</h3>

```jsx
function DisplayGreeting() {
    const [name, setName] = useState('Mike')
    if (name === 'Mike') {
        return <h1>Hello admin {name}</h1> 
    }
    return <h1>Hello user {name}</h1> 
}
```
Inline If-Else

```jsx
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}
```

Inline Logical && Operator. 
Afficher uniquement si la première expression est vraie
truthy = Not : 0, "", null, undefined, and NaN

```jsx
  function DisplayUserInfo({active}) {
    return (
      <div>
        { active && <h1>User is active</h1>}
      </div>
    );
}
```
Multiple inline If

```jsx
<span className={count === 0 && 'text-gray-500' || count > 0 && 'text-green-500' || count < 0 && 'text-red-500'}>{count}</span>
```
<h3>Form</h3>

```jsx
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;
```
<h3>useRef</h3>
useRef est principalement utilisé pour cibler un élément DOM. Mais il peut également être utilisé pour conserver/préserver une valeur modifiable entre chaque rendu. useRef ne déclenche pas un nouveau rendu (comme un useState).

```jsx
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>
  )
};
```

<h2>Conclusion</h2>
Merci d'avoir lu. J'ai passé beaucoup de temps à la rédaction de cet aide-mémoire, j'espère que vous avez aimé! 

Si vous voulez plus de contenu comme celui-ci, vous pouvez <a href="https://twitter.com/EricLeCodeur" class="twitter-follow-button">me suivre sur Twitter</a>