Commencer react

Pour commencer, on va construire une application react rapide avec Vite et Tailwind.

Objectifs

• Comprendre comment react fonctionne (VDOM, keys, etc)
• Démarrer un projet Vite + React + Tailwind
• Construire une UI statique de Kanban (Board, Column, Card) avec fausses données

Prérequis

• NodeJS
• VSCode ou autre IDE

Ça sert à quoi React ?

React est un framework qui permet de construire des interfaces utilisateur. Il est très populaire et est utilisé par de nombreuses entreprises. React a été crée par Facebook en 2013.

Ok mais en quoi c'est mieux que d'utiliser du HTML, CSS et JS classique ? En fait, React nous aide à gérer l'affichage de données et les interactions avec l'utilisateur, de manière "réactive".

Créer le projet

Pour créer le projet, on va utiliser Vite :

		npm create vite@latest my-react-app -- --template react
	

Cette commande peut ne pas marcher pareil chez vous, mais si on vous demande de choisir un framework, choisissez "React". Ensuite, choisissez "JavaScript".

Puis, après avoir navigué jusqu'au dossier du projet, on va installer tailwind :

		npm install tailwindcss @tailwindcss/vite
	

Puis, on modifie le fichier vite.config.ts :

		import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
	plugins: [react(), tailwindcss()]
});
	

Et pour finir, on va importer tailwind dans le fichier src/index.css :

		@import 'tailwindcss';
	

Et vous pouvez maintenant lancer le projet ! 🎉

		npm run dev
	

Cela vous donnera un lien pour accéder à la page de votre application. (Ex : http://localhost:5173/). Votre navigateur devrait afficher une page "Vite + React" un peu bizarre, parce que Tailwind est venu un peu casser l'ancien CSS de la template.

Quelques concepts de React

React, c'est plutôt simple en surface. À la place de définir nos variables comme en JS classique puis modifier le DOM nous même, on va définir nos variables réactives avec React, et laisser React intégrer la variable dans le DOM pour nous.

Les variables réactives

Les variables réactives sont des variables qui sont liées à un élément du DOM. Lorsque la variable change, le DOM est mis à jour. On les crée avec la fonction useState de React, un exemple :

		import { useState } from 'react';
 
export default function App() {
	const [count, setCount] = useState(0);
 
	return (
		<div>
			<p>Count: {count}</p>
			<button onClick={() => setCount(count + 1)}>Increment</button>
		</div>
	);
}
	

Dans cet exemple, le {count} est une manière d'intégrer la variable dans l'HTML, et elle se mettra à jour automatiquement lorsque la variable change. Le setCount sert à modifier la variable. Au click sur le bouton, on dit que count = count + 1.

Les évènements

Petit apparté sur les évènements. En JS classique, on vient ajouter un "EventListener" sur un élément (element.addEventListener('click', () => { ... })). En React, on peut directement ajouter l'évènement dans le JSX, en utilisant onClick={() => { ... }}. On vous a sûrement appris que c'était une mauvaise pratique en JS classique, mais avec React on fait comme ça.

Construire une UI statique

Maintenant qu'on a vu les bases, vous allez construire une UI statique de Kanban. Vous n'allez pas utiliser de base de données ni de variable reactives pour le moment, mais vous allez construire une UI, avec tailwind, qui ressemble à celle-ci :

Je vous conseille d'enlever tout le CSS de index.css (hormis le @import 'tailwindcss';) ainsi que celui de src/App.css, et de mettre le contenu de l'image ci-dessus dans le fichier src/App.jsx.