feat: Add premier composant React documentation page

app/pages/docs/react/jsx/+Page.mdx

@@ -0,0 +1,122 @@
+---
+title: La syntaxe JSX de React
+description: Découvrons la syntaxe JSX, un langage de balisage utilisé par React pour décrire l'interface utilisateur.
+tags: [Frontend, React, JavaScript, TypeScript, Bibliothèque, Interface utilisateur (UI)]
+---
+
+import Callout from "@/components/Callout";
+import tabs from "./tabs";
+
+Avant de commencer à parler des composants React, découvrons tranquillement la syntaxe **JSX**.
+
+Le **JSX** est un sucre syntaxique _(une syntaxe plus lisible et plus simple que le JavaScript pur)_ qui permet de décrire l'interface utilisateur _(UI)_ de notre application.
+
+Le sigle en lui-même signifie **JavaScript XML**, dans le sens où l'on va retrouver une syntaxe proche du **XML** _(eXtensible Markup Language)_ qui est un langage de balisage _(comme le **HTML**)_.
+
+## 🔍 Différences entre HTML et JSX
+
+Et oui, le **JSX** ressemble beaucoup au **HTML** et c'est normal !  
+C'est l'objectif premier de **React** : rendre la création d'interfaces utilisateur _(UI)_ plus simple et plus intuitive.
+
+Cependant il ne faut pas oublier que le **JSX** n'est pas du **HTML**, mais du **JavaScript**.
+
+Pour faire plus simple, voici un élément **HTML** et son équivalent avec React _(avec et sans JSX)_ :
+
+<tabs.reactCreateElement />
+
+Comme tu peux le constater, la différence entre le **JSX** et le **HTML** est minime.  
+Il y a toutefois des différences, comme certains mots réservés _(comme `class` qui devient `className`)_ ou encore la manière de déclarer des événements _(comme `onclick` qui devient `onClick`)_.
+
+Par contre si on regarde la différence entre le **JSX** et le **JavaScript pur** _(en utilisant React quand même)_, on voit bien que le **JSX** est beaucoup plus lisible et plus simple à écrire.
+
+Là où c'est encore plus flagrant, c'est quand on commence à imbriquer des éléments _(comme des composants React par exemple)_ !
+
+<tabs.advancedReactCreateElement />
+
+Et bien même si le code final est **identique**, le **JSX** apporte une lisibilité et une simplicité d'écriture qui est très appréciable. Pas mal non ? 😄
+
+Et donc oui ! En faisant du **JSX**, on fait en réalité du **JavaScript** et **pas du HTML** !
+
+
+<Callout type="note" title="Importation de React et ses exports">
+  Au sein de ses pages, tu verras **toujours** que j'importe le contenu de React en intégralité _(comme `import React from 'react';`)_.
+
+  Dans la réalité, on va destructurer les exports de React pour n'importer que ce dont on a besoin.
+
+  Cependant, pour te donner l'information d'où provient chaque élément, je préfère importer React en intégralité et que tu puisses visualiser les éléments de React utilisés avec leur provenance.
+</Callout>
+
+## 🧩 Intégration de JavaScript dans le JSX
+
+Mais l'un des autres avantages du **JSX** est la possibilité d'ajouter du JavaScript directement dans le code !
+
+Pour pouvoir ajouter du JavaScript dans le **JSX**, il suffit d'entourer le code JavaScript avec des accolades `{}`.
+C'est un peu comme si on "ouvrait un portail" pour insérer du JavaScript dans notre code **JSX**.
+
+### 📦 Variables et fonctions
+
+Par exemple, si tu veux afficher une variable dans ton JSX, tu peux le faire directement.  
+Et si tu veux appeler une fonction, c'est tout aussi simple !
+
+<tabs.reactVariablesAndFunctions />
+
+### 📝 Expressions
+
+Tu peux également ajouter des expressions _(comme des conditions ternaires par exemple)_.  
+Mais tu peux aussi faire un **affichage conditionnel** pour séparer plus facilement les éléments d'interface.
+
+<tabs.reactExpressions />
+
+### 🔄️ Boucles
+
+Maintenant imagine que tu souhaites créer une interface qui liste des éléments provenant d'un tableau.
+
+<tabs.reactLoopsFruits />
+
+Dans un premier temps, on va revoir très rapidement comment on peut parser un tableau en JavaScript :
+
+<tabs.reactLoops />
+
+En soit, toutes ces méthodes sont très bien et font ce qu'on leur demande sans souci.
+Cependant, React ne va pas forcément aimer ça sauf pour `map`.
+
+La raison est simple :  
+React a besoin qu'on lui **retourne un élément** _(ou un tableau d'éléments)_ pour pouvoir les afficher.
+
+Alors avec des `console.log` on ne va pas aller loin, mais si au lieu de retourner un `console.log` on retournait un élément **JSX** ? 🤔
+
+<tabs.reactMapLoop />
+
+[Voir l'exemple sur PlayCode](https://playcode.io/1940876)
+
+Et là : **BAM** ! 💥  
+Tu viens de créer une liste de fruits en utilisant un tableau de fruits.
+
+Mais par contre...
+
+<Callout type="question" title="C'est quoi ce `key` qui vient d'apparaître ?">
+  La `key` est une propriété spéciale que React utilise pour identifier chaque élément de manière unique.  
+  Cela permet à React de savoir quel élément a été ajouté, modifié ou supprimé.
+
+  Il est **obligatoire** d'avoir une `key` **unique** pour chaque élément d'une liste.  
+  Si tu listes des éléments qui ont un identifiant unique _(comme l'`id` qu'on aura dans nos données stockées dans une base de données par exemple)_, tu peux utiliser cet identifiant comme `key`.
+</Callout>
+
+## 📦 Les props
+
+Les **props** _(ou propriétés)_ sont des arguments que l'on peut passer à un composant React.  
+Je ne vais pas trop rentrer dans les détails ici, car on va les voir dans l'article d'après !
+
+Mais pour te donner un aperçu, voici comment on peut passer des **props** à un composant :
+
+<tabs.reactProps />
+
+Ici, on a un composant `Button` qui prend deux **props** : `onClick` et `children`.  
+`onClick` est une fonction qui sera appelée lorsqu'on cliquera sur le bouton, et `children` est tout ce qui se trouve entre les balises ouvrante et fermante du composant.
+
+## Conclusion
+
+Alors, plutôt cool le **JSX** non ? 😎
+
+Même si cette syntaxe rebute certains développeurs _(souvent ils se la jouent puristes, mais chuuuuut 🤫)_, elle est toutefois très appréciée pour sa simplicité et sa lisibilité.  
+Question de goût après tout !

app/pages/docs/react/jsx/tabs.tsx

@@ -0,0 +1,222 @@
+import { Snippet } from "@/components/Snippet";
+
+const reactCreateElementSnippets = [
+	{
+		name: "HTML",
+		codeLanguage: "html",
+		code: '<button class="button">Clique moi !</button>',
+	},
+	{
+		name: "React sans JSX",
+		codeLanguage: "js",
+		code: `React.createElement("button", { className: "button" }, "Clique moi !");`,
+	},
+	{
+		name: "React avec JSX",
+		codeLanguage: "tsx",
+		code: `<button className="button">Clique moi !</button>`,
+	},
+];
+
+const advancedReactCreateElementSnippets = [
+	{
+		name: "React sans JSX",
+		codeLanguage: "js",
+		withLineNumbers: true,
+		code: `React.createElement(
+  React.Fragment,
+  null,
+  React.createElement("h2", null, "Formulaire de contact"),
+  React.createElement(
+    "form",
+    { onSubmit: handleSubmit },
+    React.createElement(
+      "fieldset",
+      null,
+      React.createElement("label", { htmlFor: "lastname" }, "Nom"),
+      React.createElement("input", { type: "text", name: "lastname", id: "lastname", required: true }),
+    ),
+    React.createElement(
+      "fieldset",
+      null,
+      React.createElement("label", { htmlFor: "email" }, "Email"),
+      React.createElement("input", { type: "email", name: "email", id: "email", required: true }),
+    ),
+    React.createElement(
+      "fieldset",
+      null,
+      React.createElement("label", { htmlFor: "message" }, "Message"),
+      React.createElement("textarea", { name: "message", id: "message", required: true }),
+    ),
+    React.createElement(
+      "fieldset",
+      null,
+      React.createElement(
+        "label",
+        { htmlFor: "gdpr" },
+        React.createElement("input", { type: "checkbox", name: "gdpr", id: "gdpr", required: true }),
+        "J'accepte que mes données soient utilisées pour me recontacter",
+      ),
+    ),
+    React.createElement("button", { type: "submit" }, "Envoyer"),
+  ),
+);`,
+	},
+	{
+		name: "React avec JSX",
+		codeLanguage: "tsx",
+		withLineNumbers: true,
+		code: `<React.Fragment>
+  <h2>Formulaire de contact</h2>
+  <form onSubmit={handleSubmit}>
+    <fieldset>
+      <label htmlFor="lastname">Nom</label>
+      <input type="text" name="lastname" id="lastname" required>
+    </fieldset>
+
+    <fieldset>
+      <label for="email">Email</label>
+      <input type="email" name="email" id="email" required>
+    </fieldset>
+
+    <fieldset>
+      <label for="message">Message</label>
+      <textarea name="message" id="message" required></textarea>
+    </fieldset>
+
+    <fieldset>
+      <label for="gdpr">
+        <input type="checkbox" name="gdpr" id="gdpr" required>
+        J'accepte que mes données soient utilisées pour me recontacter
+      </label>
+    </fieldset>
+
+    <button type="submit">Envoyer</button>
+  </form>
+</React.Fragment>`,
+	},
+];
+
+const reactVariablesAndFunctionsSnippets = [
+	{
+		name: "Variables",
+		codeLanguage: "jsx",
+		code: `const name = "Jean Dupont";
+
+return <h1>Bonjour {name} !</h1>;`,
+	},
+	{
+		name: "Fonctions",
+		codeLanguage: "jsx",
+		code: `const sayHello = () => "Bonjour !";
+
+return <p>{sayHello()}</p>;`,
+	},
+];
+
+const reactExpressionsSnippets = [
+	{
+		name: "Condition ternaire",
+		codeLanguage: "jsx",
+		code: `const age = 18;
+
+return <p>{age >= 18 ? "Majeur" : "Mineur"}</p>;`,
+	},
+	{
+		name: "Affichage conditionnel",
+		codeLanguage: "jsx",
+		code: `const isLogged = false;
+
+return (
+  <div>
+    {isLogged && <p>Bienvenue sur notre site !</p>}
+    {!isLogged && <p>Connectez-vous pour accéder à notre site</p>}
+  </div>
+);`,
+	},
+];
+
+const reactLoopsFruitsSnippets = [
+	{
+		name: "Définition des fruits",
+		codeLanguage: "js",
+		code: `const fruits = ["pomme", "banane", "fraise"];`,
+	},
+];
+
+const reactLoopsSnippets = [
+	{
+		name: "for",
+		codeLanguage: "js",
+		code: `for (let i = 0; i < fruits.length; i++) {
+	console.log(fruits[i]);
+}`,
+	},
+	{
+		name: "forEach",
+		codeLanguage: "js",
+		code: `fruits.forEach((fruit) => {
+	console.log(fruits[i]);
+	});`,
+	},
+	{
+		name: "for",
+		codeLanguage: "js",
+		code: `fruits.map((fruit) => {
+	console.log(fruits[i]);
+	});`,
+	},
+];
+
+const reactMapLoopSnippets = [
+	{
+		name: "Mapping",
+		codeLanguage: "jsx",
+		code: `const fruits = ["pomme", "banane", "fraise"];
+
+return (
+  <ul>
+    {fruits.map((fruit) => (
+      <li key={fruit}>{fruit}</li>
+    ))}
+  </ul>
+);`,
+	},
+];
+
+const reactPropsSnippets = [
+	{
+		name: "JSX",
+		codeLanguage: "jsx",
+		code: `const Button = (props) => {
+  return <button onClick={props.onClick}>{props.children}</button>;
+};`,
+	},
+	{
+		name: "TSX",
+		codeLanguage: "tsx",
+		code: `type ButtonProps = {
+  onClick: () => void;
+  children: React.ReactNode;
+};
+
+const Button = (props: ButtonProps) => {
+  return <button onClick={props.onClick}>{props.children}</button>;
+};`,
+	},
+];
+
+export default {
+	reactCreateElement: () => <Snippet snippets={reactCreateElementSnippets} />,
+	advancedReactCreateElement: () => (
+		<Snippet snippets={advancedReactCreateElementSnippets} />
+	),
+	reactVariablesAndFunctions: () => (
+		<Snippet snippets={reactVariablesAndFunctionsSnippets} />
+	),
+	reactExpressions: () => <Snippet snippets={reactExpressionsSnippets} />,
+	reactLoopsFruits: () => <Snippet snippets={reactLoopsFruitsSnippets} />,
+	reactLoops: () => <Snippet snippets={reactLoopsSnippets} />,
+	reactMapLoop: () => <Snippet snippets={reactMapLoopSnippets} />,
+	reactProps: () => <Snippet snippets={reactPropsSnippets} />,
+};

app/pages/docs/react/premier-composant/+Page.mdx

@@ -0,0 +1,169 @@
+---
+title: Premier composant React
+description: Voyons ensemble comment notre premier composant React !
+tags: [Frontend, React, JavaScript, TypeScript, Bibliothèque, Interface utilisateur (UI)]
+---
+
+import Callout from "@/components/Callout";
+import tabs from "./tabs";
+
+Rentrons maintenant dans le vif du sujet en créant notre premier composant React !  
+Dans cet article, on va faire un composant très simple : un **dumb component** qui sera tout simplement un bouton.
+
+<Callout type="question" title="Un... Dumb component ?">
+  Un **dumb component** est un composant React qui ne contient pas de logique.  
+  Enfin si, il peut en contenir _(mais rien de foufou)_, son rôle est de simplement afficher des données.
+
+  En gros :
+
+  - Il ne fait que de l'affichage
+  - Il ne fait pas de calculs
+  - Il ne fait pas de requêtes HTTP
+</Callout>
+
+## ⚙️ Syntaxes pour créer un composant
+
+Il existe plusieurs façons de créer un composant React.
+
+La plus simple est de créer une fonction qui retourne du JSX, mais il est aussi possible de créer une classe qui hérite `React.Component`.
+
+Cependant, on ne va pas s'attarder sur la déclaration de composants dans des classes.
+
+Pourquoi ? Déjà parce que la documentation officielle recommande désormais de définir des composants en tant que fonctions, mais surtout parce que c'est plus simple et plus lisible ! 🚀
+
+## 👷 Création du composant
+
+Allez c'est parti, occupons-nous de notre premier composant React !
+
+<tabs.reactButtonComponent />
+
+... et c'est tout ! 🎉  
+On a créé notre premier composant React, c'est pas beau ça ?
+
+Bon évidemment, il reste extrêmement sommaire et n'a pas d'intérêt à l'heure actuelle, mais c'est un bon début !
+
+Avant d'aller plus loin, décortiquons un peu ce code :
+
+- On importe `React` depuis la bibliothèque `React` _(ligne 1)_
+- On crée une fonction `Button` _(lignes 3 à 5)_
+  - Cette fonction retourne un élément JSX `<button>Click me</button>`
+
+## 🧩 Utilisation du composant
+
+C'est bien beau d'avoir un composant, mais maintenant il faut l'utiliser !
+
+<tabs.reactUseButtonComponent />
+
+On importe notre composant `Button` _(ligne 3)_ et on l'utilise dans notre composant `App` _(ligne 9)_.
+
+Rien de bien sorcier, n'est-ce pas ? 😊
+
+Mais maintenant, on va vouloir donner un peu plus de vie à notre bouton...  
+Parce que là pour le coup, il est inutile. 😅
+
+## 📦 Props
+
+Les **props** _(pour properties)_ sont des arguments que l'on peut passer à un composant React.  
+Il s'agit en quelque sorte des paramètres d'une fonction.
+
+Imaginons ici que l'on veut rajouter :
+
+- Un texte au bouton
+- Une action à effectuer lorsqu'on clique dessus
+
+Avant de t'expliquer comment faire, je vais te montrer ce que ça donne pour son utilisation :
+
+<tabs.reactUseButtonComponentProps />
+
+Voyons un peu ce qui change !
+
+- Fonction `handleClick` qui affiche un message dans la console _(ligne 6)_
+- On passe la fonction `handleClick` en tant que prop onClick à notre composant `Button` _(ligne 11)_
+- On passe le texte `Clique-moi !` entre la balise ouvrante et fermante de notre composant `Button` _(ligne 12)_
+
+Mais alors, comment on fait pour récupérer ces props dans notre composant Button ?
+
+<tabs.reactButtonComponentProps />
+
+Comme tu peux voir, on récupère les props passées à notre composant `Button` en tant que paramètre de la fonction.
+
+Mais tu peux également remarquer qu'il y a une propriété `children` qui n'est pas passée de la même manière que `onClick`.
+
+C'est totalement normal ! `children` est une prop spéciale qui contient tout ce qui se trouve entre les balises ouvrante et fermante du composant.
+
+<Callout type="note" title="Le JavaScript inline, c'est pas bien !">
+  Tu as totalement raison ! On recommande effectivement de ne pas faire du JS inline dans notre HTML et de privilégier un fichier distinct pour notre JavaScript.  
+  Et donc tu sais déjà qu'on va préférer l'utilisation des `addEventListener` 😏
+
+  ... cependant ici, **on ne fait pas du HTML** mais du JSX, et c'est une autre histoire !
+</Callout>
+
+## 🖇️ Les différentes props
+
+Il existe plusieurs props que l'on peut passer à un composant React :
+
+- `children` : Contient tout ce qui se trouve entre les balises ouvrante et fermante du composant
+- Les autres props : Tout ce qui est passé en dehors des balises ouvrante et fermante du composant
+
+Alors évidemment, cette explication est très réductrice, mais on va s'en contenter pour le moment.
+
+Mais tu te doutes bien qu'il existe des props spécifiques à certains éléments HTML qui peuvent être passées à un composant React.
+
+## 🔒 Mots clés protégés
+
+En HTML, il existe des attributs qui sont utilisés dans certains éléments HTML. Cependant, comme ici on ne fait pas du HTML mais du JSX, on ne va pas pouvoir les utiliser tels quels.
+
+Pour te donner un exemple concret, si tu veux ajouter une classe CSS à un élément, tu ne pourras pas utiliser l'attribut `class` mais `className`.
+
+Mais alors, pourquoi ?
+
+Comme le JSX reste avant tout du JavaScript, on ne peut pas utiliser des mots-clés réservés comme `class`, `for`, `default`, etc.
+
+<Callout type="note" collapsible title="Plus d'informations sur les mots-clés protégés">
+  React comprendra ces mots clés au sein des composants, cependant il va générer un avertissement dans la console du navigateur pour te prévenir que tu utilises un mot-clé protégé qui est "ambigu".
+
+  Cependant, certaines bibliothèques qui utilisent le JSX, comme SolidJS par exemple, utilisent ces mots-clés protégés au sein des composants. Ca ne veut pas dire que c'est "bien" ou "pas bien", mais qu'il faut être conscient de ce que l'on fait et de comment est interprété notre code par la bibliothèque 😉
+</Callout>
+
+On va donc utiliser des noms d'attributs qui sont similaires à ceux du HTML, mais qui sont adaptés pour le JSX.
+
+- `class` devient `className` _(pour les classes CSS)_
+- `for` devient `htmlFor` _(pour les labels)_
+- `default` devient `defaultValue` _(pour les champs de formulaire)_
+
+Et il en existe bien d'autres, mais on va s'arrêter là pour le moment ! 😊
+
+## 👂 Écouteurs d'événements
+
+Il existe également des attributs spécifiques pour les écouteurs d'événements.  
+Tu as notamment pu déjà faire la rencontre de `onClick`, mais il en existe bien d'autres !
+
+Il s'agit de la syntaxe à adopter avec React pour ajouter des écouteurs d'événements à des composants JSX, et non pas d'utiliser `addEventListener` directement dans le JavaScript 😉
+
+J'aimerai beaucoup pouvoir te donner une liste d'exemples d'écouteurs d'événements, mais il y en a tellement que je ne pourrais pas tous les citer ici.  
+La forme étant toujours la même, tu peux facilement savoir comment les écrire !
+
+La forme est simple :
+
+- Préfixe : `on`
+- Événement : nom de l'événement en camelCase
+
+Par exemple :
+
+- `click` => `onClick`
+- `change` => `onChange`
+- `submit` => `onSubmit`
+- `mouseenter` => `onMouseEnter`
+- `mouseleave` => `onMouseLeave`
+
+Et si tu cherches une liste complète des écouteurs d'événements, je t'invite à tout simplement consulter le [MDN Web Docs](https://developer.mozilla.org/fr/docs/Web/Events) qui est une mine d'or pour tout ce qui est lié au développement web !
+
+Au début, on peut trouver ça un peu déroutant puisqu'on va naturellement les associer à du HTML, mais il faut se rappeler qu'on est dans du JSX _(oui, j'insiste beaucoup là-dessus !)_.
+
+## Conclusion
+
+Et voilà, on a créé notre premier composant React !  
+On a même rapidement vu comment passer des props à un composant et comment les récupérer.
+
+Et si pour le prochain article, on parle un peu des states pour rajouter un peu d'intéractivité à nos composants ?  
+Parce que c'est déjà cool ce qu'on a pu faire, mais on peut faire tellement plus avec React ! 🚀

app/pages/docs/react/premier-composant/tabs.tsx

@@ -0,0 +1,101 @@
+import { Snippet } from "@/components/Snippet";
+
+const reactButtonComponentSnippets = [
+	{
+		name: "Composant Button",
+		codeLanguage: "jsx",
+		withLineNumbers: true,
+		code: `import React from "react";
+
+export function Button() {
+  return <button>Click me</button>;
+}`,
+	},
+];
+
+const reactUseButtonComponentSnippets = [
+	{
+		name: "Utilisation du composant Button",
+		codeLanguage: "jsx",
+		withLineNumbers: true,
+		code: `import React from "react";
+
+import { Button } from "./Button";
+
+export function App() {
+  return (
+    <div>
+      <h1>Mon premier composant React</h1>
+      <Button />
+    </div>
+  );
+}`,
+	},
+];
+
+const reactButtonComponentPropsSnippets = [
+	{
+		name: "JSX",
+		codeLanguage: "jsx",
+		withLineNumbers: true,
+		code: `import React from "react";
+
+export function Button(props) {
+  return <button onClick={props.onClick}>{props.children}</button>;
+}`,
+	},
+	{
+		name: "TSX",
+		codeLanguage: "tsx",
+		withLineNumbers: true,
+		code: `import React from "react";
+
+type ButtonProps = {
+  onClick: () => void;
+  children: React.ReactNode;
+};
+
+export function Button(props: ButtonProps) {
+  return <button onClick={props.onClick}>{props.children}</button>;
+}`,
+	},
+];
+
+const reactUseButtonComponentPropsSnippets = [
+	{
+		name: "Ajout de la prop `onClick`",
+		codeLanguage: "jsx",
+		withLineNumbers: true,
+		code: `import React from "react";
+
+import { Button } from "./Button";
+
+export function App() {
+  function handleClick() {
+    console.log("Je suis cliqué !");
+  }
+
+  return (
+    <div>
+      <h1>Mon premier composant React</h1>
+      <Button onClick={handleClick} />
+    </div>
+  );
+}`,
+	},
+];
+
+export default {
+	reactButtonComponent: () => (
+		<Snippet snippets={reactButtonComponentSnippets} />
+	),
+	reactUseButtonComponent: () => (
+		<Snippet snippets={reactUseButtonComponentSnippets} />
+	),
+	reactButtonComponentProps: () => (
+		<Snippet snippets={reactButtonComponentPropsSnippets} />
+	),
+	reactUseButtonComponentProps: () => (
+		<Snippet snippets={reactUseButtonComponentPropsSnippets} />
+	),
+};