React
Le JSX (ou TSX): Kézako ?
Pour éviter d’avoir à écrire React.createElement
à chaque fois, on utilise le JSX. C’est un langage qui permet d’écrire du HTML dans du JS. Il est transpilé en JS par Babel.
Créer un composant
import React from 'react'
const MonComposant = () => {
return <div>Bonjour</div> // L'affichage de mon composant
}
Utiliser un composant
import React from 'react'
const MonComposant = () => {
return <div>Bonjour</div> // L'affichage de mon composant
}
const MonAutreComposant = () => {
return (
<div>
<MonComposant />
</div>
)
}
Affichage dynamique
Pour éviter d’afficher tout le temps la meme chose, on peut utiliser des variables. Mais comment on fait pour afficher une variable dans du JSX ? On utilise des accolades (les moustaches, j’aime bien les appeler comme ca).
import React from 'react'
const MonComposant = () => {
const ma_variable = 'Bonjour'
return <div>{ma_variable}</div> // L'affichage de mon composant
}
Affichage conditionnel
import React from 'react'
const MonComposant = () => {
const ma_condition = true // Disons qu'elle est toujours vraie
return <div>{ma_condition ? <p>Vrai!</p> : <p>Faux!</p>}</div> // L'affichage de mon composant
}
Géstion de l’état
React permet de gérer l’état de ses composants. C’est à dire que l’on peut modifier les valeurs de nos variables à l’intérieur de nos composants.
Il faut pour cela utiliser le hook useState
.
import React, { useState } from 'react'
const MonComposant = () => {
const [count, setCount] = useState(0)
return (
<div>
<p>Le compteur est à: {count}</p>
<button onClick={() => setCount(count + 1)}>Incrementer</button>
</div>
)
}
Cycles de vie
import React, { useEffect } from 'react'
const MonComposant = () => {
// Le composant vient d'être monté
useEffect(() => {
console.log("Le composant vient d'être monté")
}, [])
// Le composant vient d'être mis à jour
useEffect(() => {
console.log("Le composant vient d'être mis à jour")
})
// Le composant va être démonté
useEffect(() => {
return () => {
console.log('Le composant va être démonté')
}
}, [])
return <div>Bonjour</div> // L'affichage de mon composant
}
Cycle de vie avec dépendances
import React, { useEffect } from 'react'
const MonComposant = () => {
const [count, setCount] = useState(0)
useEffect(() => {
console.log('count est à: ' + count)
}, [count])
return (
<div>
<button onClick={() => setCount(count + 1)}>Incrementer</button>
</div>
)
}
Utiliser des props
import React from 'react'
const MonComposant = (props) => {
return <div>Bonjour {props.name}</div> // L'affichage de mon composant
}
const MonAutreComposant = () => {
return (
<div>
<MonComposant name="John" />
</div>
)
}
Utiliser les functions async/await
import React, { useState, useEffect } from 'react'
const MonComposant = () => {
const [count, setCount] = useState(0)
const fetchData = async () => {
const response = await fetch('https://api.github.com/users/JohnDoe')
const data = await response.json()
setCount(data.public_repos)
}
useEffect(() => {
fetchData()
}, [])
return (
<div>
<p>Le compteur est à: {count}</p>
</div>
)
}
Ajouter un élément dans un tableau
const [list, setList] = useState([1, 2, 3, 4, 'boo'])
setList([...list, 'foo'])