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'])