From 2354e3d97db93bfaa68fc963b56289c0aced2788 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Mon, 21 Apr 2025 11:08:56 +0200
Subject: [PATCH] feat: Add tabs for React project initialization guide

---
 app/components/Highlight.tsx                  |  11 +-
 app/components/Snippet.tsx                    |   3 +-
 app/pages/docs/react/initialisation/+Page.mdx | 111 ++++++++++++++++++
 app/pages/docs/react/initialisation/tabs.tsx  |  60 ++++++++++
 4 files changed, 176 insertions(+), 9 deletions(-)
 create mode 100644 app/pages/docs/react/initialisation/+Page.mdx
 create mode 100644 app/pages/docs/react/initialisation/tabs.tsx

diff --git a/app/components/Highlight.tsx b/app/components/Highlight.tsx
index 6067ea2..342f69f 100644
--- a/app/components/Highlight.tsx
+++ b/app/components/Highlight.tsx
@@ -64,14 +64,9 @@ export const Highlight: ParentComponent<Props> = (_props) => {
 	};
 
 	return (
-		<div
-			class={clsx(
-				"group relative flex items-start px-4 py-2 w-full",
-				props.class,
-			)}
-		>
+		<div class={clsx("group flex items-start px-4 py-2 w-full", props.class)}>
 			<button
-				class="absolute cursor-pointer top-0 right-2 text-slate-500 bg-slate-200/10 rounded-md hover:bg-linear-to-r hover:from-violet-400/30 hover:via-violet-400 hover:to-violet-400/30 p-px hover:text-violet-300"
+				class="absolute cursor-pointer z-10 top-2 right-2 text-slate-500 bg-slate-200/10 rounded-md hover:bg-linear-to-r hover:from-violet-400/30 hover:via-violet-400 hover:to-violet-400/30 p-px hover:text-violet-300"
 				type="button"
 				onClick={handleCopyToClipboard}
 			>
@@ -113,7 +108,7 @@ export const Highlight: ParentComponent<Props> = (_props) => {
 				)}
 			>
 				<code
-					class={clsx("px-4", "leading-6")}
+					class={clsx("leading-6", props.withLineNumbers ? "px-4" : "pr-4")}
 					innerHTML={highlightedCode()}
 					{...rest}
 				>
diff --git a/app/components/Snippet.tsx b/app/components/Snippet.tsx
index 74e7811..7bdfde7 100644
--- a/app/components/Snippet.tsx
+++ b/app/components/Snippet.tsx
@@ -18,6 +18,7 @@ type SnippetTab = {
 	name: string;
 	codeLanguage: string;
 	code: string;
+	withLineNumbers?: boolean;
 };
 
 type SnippetProps = {
@@ -95,7 +96,7 @@ export function Snippet(props: SnippetProps) {
 								props.dark && "dark text-white",
 							)}
 							language={selectedTab().codeLanguage}
-							withLineNumbers
+							withLineNumbers={selectedTab().withLineNumbers}
 						>
 							{selectedTab().code}
 						</Highlight>
diff --git a/app/pages/docs/react/initialisation/+Page.mdx b/app/pages/docs/react/initialisation/+Page.mdx
new file mode 100644
index 0000000..b5df4c1
--- /dev/null
+++ b/app/pages/docs/react/initialisation/+Page.mdx
@@ -0,0 +1,111 @@
+---
+title: Initialisation d'un projet React
+description: Initialisons un nouveau projet React, avec ou sans TypeScript.
+tags: [Frontend, React, JavaScript, TypeScript, Bibliothèque, Interface utilisateur (UI), Vite, Vike]
+---
+
+import Callout from "@/components/Callout";
+import tabs from "./tabs";
+
+Allez, on se lance dans la création d'un projet React ! 🚀
+
+L'article sera très court, car il n'y a pas grand chose à dire sur la création d'un projet React.  
+Tu vas voir à quel point c'est simple !
+
+## 👴 Ancienne méthode _(CRA)_
+
+
+<Callout type="warning" title="Dépréciation de `create-react-app`">
+  Sur cette courte section on va parler d'une méthode qui est **dépréciée**.
+  Ne l'utilise donc pas pour créer de nouveaux projets !
+</Callout>
+
+Il y a encore quelques mois/années, on passait régulièrement par le **CRA**, ou `create-react-app`, pour initialiser un projet React.  
+L'avantage que proposait cette méthode était de nous fournir un projet prêt à l'emploi, avec une structure de fichiers déjà en place, et des dépendances déjà installées.
+
+Cependant, cette méthode est désormais dépréciée. Au delà d'être dépréciée, cette méthode a même été **totalement retirée** de la documentation officielle de React.
+
+À la place, la documentation nous propose plutôt d'utiliser :
+
+- [Next.js _(App Router)_](https://react.dev/learn/creating-a-react-app#nextjs-app-router)
+- [React Router _(v7)_](https://react.dev/learn/creating-a-react-app#react-router-v7)
+- [Expo _(pour les applications natives)_](https://react.dev/learn/creating-a-react-app#expo)
+- [Vite](https://react.dev/learn/build-a-react-app-from-scratch#vite)
+- [Parcel](https://react.dev/learn/build-a-react-app-from-scratch#parcel)
+- [Rsbuild](https://react.dev/learn/build-a-react-app-from-scratch#rsbuild)
+
+Mais dans cet article, je vais plutôt te montrer comment initialiser un projet React avec Vite et par la suite : [Vike](https://vike.dev/).
+
+Et si tu te demandes "pourquoi" _(à juste titre !)_, c'est tout simplement car il s'agit d'une solution plus légère, plus flexible et qui est en constante amélioration par la communauté !
+
+## 🏃 Vite
+
+Vite est un outil de développement web _(frontend)_ créé par [Evan You](https://evanyou.me/), le créateur de Vue.js.  
+Et si tu connais Vue.js, tu sais déjà qu'on parle d'un outil de qualité !
+
+L'objectif principal derrière Vite, c'est d'améliorer considérablement la rapidité de développement de nos applications web, avec notamment un serveur de développement ultra-rapide, et une compilation de production optimisée.
+
+On peut notamment comparer Vite à Webpack, Grunt ou encore Gulp, mais en beaucoup plus rapide et plus simple à utiliser.  
+Beaucoup moins "usine à gaz", beaucoup plus "plug-and-play".
+
+Et si on voyait comment initialiser un projet React avec Vite ?  
+C'est parti ! 🚀
+
+## 👷 Initialisation
+
+Avant de commencer, assure-toi d'avoir Node.js installé sur ta machine.
+Si ce n'est pas le cas, tu peux le télécharger ici.
+
+Prépare toi maintenant pour la partie la plus difficile de cet article...
+Ouvre ton terminal, et tape la commande suivante :
+
+<tabs.reactInit />
+
+Tu vas ensuite devoir répondre à quelques questions, notamment le nom de ton projet, le template que tu souhaites utiliser _(React, Vue, Vanilla, etc.)_, et si tu souhaites utiliser TypeScript.
+
+Je te laisse la liberté de répondre comme tu veux à ces questions, mais pour un projet React, tu vas devoir choisir le template `react` _(logique non ?)_.
+
+Et voilà, c'est tout !  
+... oui j'ai menti, c'était vraiment pas difficile. 😅
+
+## 🚀 Lancement
+
+Une fois que tu as répondu à toutes les questions, tu vas devoir te rendre dans le dossier de ton projet, et lancer le serveur de développement :
+
+<tabs.reactInstall />
+
+<Callout type="warning" title="Installation des dépendances">
+  Pense à installer les dépendances de ton projet avant de lancer le moindre script _(comme `dev`, `build` etc)_, sinon ça ne va pas très bien se passer !
+</Callout>
+
+Tu auras ensuite un message dans ton terminal qui t'indiquera l'adresse à laquelle tu pourras accéder à ton application.  
+En général, il s'agit de http://localhost:4173 _(le port peut varier)_.
+
+Et voilà, tu as maintenant un projet React initialisé avec Vite ! 🎉
+
+Par contre je préfère te prévenir, avec cette solution on va davantage s'orienter sur des applications **CSR** _(Client-Side Rendering)_, mais on pourra également voir comment faire du **SSR** _(Server-Side Rendering)_ ou du **SSG** _(Static Site Generation)_ avec **Vike**.
+
+## 💪 Vike
+
+**Vike**, ou anciennement `vite-plugin-ssr`, est un **framework** basé sur Vite qui va nous permettre de créer des applications web avec presque n'importe quelle bibliothèque _(React, Vue, Svelte, etc.)_.
+
+Dans notre cas, on s'en servira comme alternative au géant du SSR React : Next.js.
+
+L'énorme avantage de Vike au delà de pouvoir utiliser n'importe quel framework/bibliothèque UI _(et même un framework maison ou du vanilla JS !)_, c'est que tout comme Vite, il est **extrêmement plus léger** et **flexible**.
+
+Au niveau des fonctionnalités natives, on va retrouver un peu la même chose que Next.js, avec notamment :
+
+- De quoi gérer le rendu à effectuer _(SSR, SSG, CSR)_
+- Un système de layouts
+- Un système de routage
+- Un système pour séparer la logique front et la logique back
+
+Et bien d'autres !
+
+Mais on se réserve ça pour un autre article, car il est nécessaire de bien comprendre comment fonctionne React 😉.
+
+## Conclusion
+
+Tu l'auras remarqué, initialiser un projet React avec Vite est vraiment très simple !
+
+On parle ici d'une simple petite commande et de questions auxquelles répondre, et le tour est joué 🚀
diff --git a/app/pages/docs/react/initialisation/tabs.tsx b/app/pages/docs/react/initialisation/tabs.tsx
new file mode 100644
index 0000000..a48fa9c
--- /dev/null
+++ b/app/pages/docs/react/initialisation/tabs.tsx
@@ -0,0 +1,60 @@
+import { Snippet } from "@/components/Snippet";
+
+const reactInitSnippets = [
+	{
+		name: "NPM",
+		codeLanguage: "bash",
+		code: "npm init vite",
+	},
+	{
+		name: "Yarn",
+		codeLanguage: "bash",
+		code: "yarn create vite",
+	},
+	{
+		name: "PNPM",
+		codeLanguage: "bash",
+		code: "pnpm create vite",
+	},
+	{
+		name: "Bun",
+		codeLanguage: "bash",
+		code: "bun create vite",
+	},
+];
+
+const reactInstallSnippets = [
+	{
+		name: "NPM",
+		codeLanguage: "bash",
+		code: `cd mon-projet
+npm install
+npm run dev`,
+	},
+	{
+		name: "Yarn",
+		codeLanguage: "bash",
+		code: `cd mon-projet
+yarn install
+yarn dev`,
+	},
+	{
+		name: "PNPM",
+		codeLanguage: "bash",
+		code: `cd mon-projet
+pnpm install
+pnpm dev`,
+	},
+	{
+		name: "Bun",
+		codeLanguage: "bash",
+		code: `cd mon-projet
+bun install
+bun dev`,
+	},
+];
+
+export default {
+	reactInit: () => <Snippet snippets={reactInitSnippets} />,
+	reactInstall: () => <Snippet snippets={reactInstallSnippets} />,
+};