From 459e83a0c80ed5f7a560e089da475c93ff2d0186 Mon Sep 17 00:00:00 2001
From: Eric NGUYEN <enguyen@techform.fr>
Date: Fri, 23 Sep 2022 18:16:37 +0200
Subject: [PATCH] Revert "md: Replace tsx by ts for highlightjs support"

This reverts commit 8535416acc89d2b5d76f31aadc983b1b4bdea03e.
---
 docs/DevDocs/Pages/BasesReact.md            | 12 ++++-----
 docs/DevDocs/Pages/Heroicon.md              |  2 +-
 docs/DevDocs/Pages/PremierComposantReact.md | 30 ++++++++++-----------
 docs/DevDocs/Pages/Tailwind.md              | 14 +++++-----
 4 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/docs/DevDocs/Pages/BasesReact.md b/docs/DevDocs/Pages/BasesReact.md
index cad9b23..6131465 100644
--- a/docs/DevDocs/Pages/BasesReact.md
+++ b/docs/DevDocs/Pages/BasesReact.md
@@ -24,7 +24,7 @@ Selon comment vous écrivez le composant, classe ou fonctionnelle, la manière d
 
 Pour les props :
 
-```ts
+```tsx
 // functional
 function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
@@ -110,9 +110,9 @@ La documentation qui suivra utilisera donc l'écriture fonctionnelle. Pour en sa
 
 Les props sont des données entrer d'un composant. Comme pour un composant html ils décrivent simplement ce que le composant doit représenter.
 
-Exemple :
+Exemple : 
 
-```ts
+```tsx
 function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
 }
@@ -125,7 +125,7 @@ Un composant ne possédant pas d'état est dit `stateless`.
 
 Voici donc un exemple de composant React **avec état** :
 
-```ts
+```tsx
 // Clock.tsx
 interface IClockProps {
 }
@@ -157,7 +157,7 @@ export const Clock: React.FC<IClockProps> = (props) => {
 
 Et voici la version **sans état** :
 
-```ts
+```tsx
 // Clock.tsx
 interface IClockProps {
   time: Date
@@ -218,7 +218,7 @@ const [value, setValue] = React.useState(defaultValue);
 
 Revenons sur l'exemple de `useTicking`:
 
-```ts
+```tsx
 const useTicking = (setTime) => {
   React.useEffect(() => {
     // componentDidMount
diff --git a/docs/DevDocs/Pages/Heroicon.md b/docs/DevDocs/Pages/Heroicon.md
index bee6f22..ac82f9b 100644
--- a/docs/DevDocs/Pages/Heroicon.md
+++ b/docs/DevDocs/Pages/Heroicon.md
@@ -11,7 +11,7 @@ L'icône Home peut être importé comme tout composant React.
 
 Il existe plusieurs type de chaque icône de Heroicon : `outline`, `solid`, `mini`. Utilisons donc `outline`.
 
-```ts
+```tsx
 import { HomeIcon } from '@heroicons/react/outline';
 
 ...
diff --git a/docs/DevDocs/Pages/PremierComposantReact.md b/docs/DevDocs/Pages/PremierComposantReact.md
index 4e99bde..6d8ca2a 100644
--- a/docs/DevDocs/Pages/PremierComposantReact.md
+++ b/docs/DevDocs/Pages/PremierComposantReact.md
@@ -25,7 +25,7 @@ Par convention comme il est dit dans la section [Pour commencer](PourCommencer.m
 
 Maintenant créons le squelette du composant. Pour rappel, on utilise la syntaxe *fonctionnelle* (i.e. une fonction = un composant).
 
-```ts
+```tsx
 // Home.tsx
 export function Home(): JSX.Element {
   return <></>;
@@ -38,7 +38,7 @@ La convention de nommage indique qu'il faut prioriser les fonctions nommées (do
 
 Mettons le bouton html et mettons du texte dedans :
 
-```ts
+```tsx
 export function Home(): JSX.Element {
   return (
     <button>
@@ -53,7 +53,7 @@ export function Home(): JSX.Element {
 
 Pour que le bouton appelle une fonction nous allons utiliser la propriété `onClick`. Pour lui équiper d'une variable/fonction, on la met entre accolades `prop={var}`.
 
-```ts
+```tsx
 function GoHome(): void {
   location.reload();
 }
@@ -79,7 +79,7 @@ On sait que l'on doit l'ajouter dans la **barre** à gauche, soit `Bar.tsx`
 
 Commençons par importer le composant dans `Bar.tsx`:
 
-```ts
+```tsx
 // Bar.tsx
 import { Home } from '../Home/Home';
 ...
@@ -87,7 +87,7 @@ import { Home } from '../Home/Home';
 
 Puis ajoutons-le dans la vue :
 
-```ts
+```tsx
 // Bar.tsx
 export function Bar(props: IBarProps): JSX.Element {
   return (
@@ -120,7 +120,7 @@ Ce que l'on veut faire est donc de renverser cette opération, autrement dit cha
 
 Allons donc dans le composant `MainMenu.tsx` et analysons le contenu du bouton `Start from scratch`.
 
-```ts
+```tsx
 // MainMenu.tsx
     ...
     default:
@@ -137,7 +137,7 @@ Allons donc dans le composant `MainMenu.tsx` et analysons le contenu du bouton `
 
 On trouve la fonction `onClick` suivante :
 
-```ts
+```tsx
 // MainMenu.tsx
 {
   setWindowState(WindowState.Loading);
@@ -155,7 +155,7 @@ Pour rappel `setWindowState` est un setteur d'état, et qu'elle est définie **d
 
 Regardons donc le composant parent de `MainMenu`: `App`.
 
-```ts
+```tsx
 // App.tsx
 ...
       <MainMenu
@@ -173,7 +173,7 @@ Regardons donc le composant parent de `MainMenu`: `App`.
 
 Cette fonction `newEditor` appelle donc une autre fonction `NewEditor`.
 
-```ts
+```tsx
 export function NewEditor(
   setEditorState: Dispatch<SetStateAction<IEditorState>>,
   setLoaded: Dispatch<SetStateAction<boolean>>
@@ -197,7 +197,7 @@ Cette fonction à l'air assez compliquée, mais on sait qu'elle utilise `setEdit
 
 Donc pour renverser l'état de `App` il faut appeler soit `setEditorState` ou soit `setLoaded`. En analysant un peu plus près `App.tsx`, on remarque l'évidante condition permettant d'afficher ou non le menu principal :
 
-```ts
+```tsx
 // App.tsx
   ...
   if (isLoaded) {
@@ -218,9 +218,9 @@ Donc pour renverser l'état de `App` il faut appeler soit `setEditorState` ou so
     </div>
 ```
 
-Ainsi, on sait qu'il faut juste appeler `setLoaded` le setteur d'état de `isLoaded`:
+Ainsi, on sait qu'il faut juste appeler `setLoaded` le setteur d'état de `isLoaded`: 
 
-```ts
+```tsx
 // App.tsx
 const [isLoaded, setLoaded] = useState<boolean>(false);
 ```
@@ -229,7 +229,7 @@ Cependant comment appeler cette fonction depuis `Home` ? Et bien nous allons uti
 
 Comme pour `MainMenu`, dans `Home.tsx` nous allons mettre la fonction `GoHome` dans les props :
 
-```ts
+```tsx
 import React from 'react';
 
 interface IHomeProps {
@@ -251,7 +251,7 @@ Note: vous pouvez utiliser `Home(props: IHomeProps)` et appeler `props.goHome` c
 
 Home est utilisé dans les composants Bar, UI, et Editor avant d'être appelé dans App. Il faut faire la même chose, ajouter la fonction dans les props et l'appeler dans le composant :
 
-```ts
+```tsx
 // Bar.tsx
 interface IBarProps {
   goHome: () => void
@@ -272,7 +272,7 @@ export function Bar(props: IBarProps): JSX.Element {
 
 Enfin dans `App.tsx`, créez la fonction permettant de changer `isLoaded` vers `false`:
 
-```ts
+```tsx
   ...
   if (isLoaded) {
     return (
diff --git a/docs/DevDocs/Pages/Tailwind.md b/docs/DevDocs/Pages/Tailwind.md
index 15bcd1e..eeeb5e9 100644
--- a/docs/DevDocs/Pages/Tailwind.md
+++ b/docs/DevDocs/Pages/Tailwind.md
@@ -27,7 +27,7 @@ Pour positionner le bouton tout en bas il faut modifier le layout de la barre
 
 Voici le layout actuel du composant Bar.
 
-```ts
+```tsx
 // Bar.tsx
 <div className='bar'>
   <BarIcon>(...)</BarIcon>
@@ -71,7 +71,7 @@ On va utiliser la premiere méthode, mais libre à vous la méthode.
 
 Pour ajouter une classe sur React, on utilise le mot-clé `className`. C'est pour ne pas rentrer en conflit avec le mot-clé `class` servant de classe d'objet en JavaScript que ce mot-clé a été choisi.
 
-```ts
+```tsx
 // Bar.tsx
 <div className='bar'>
   <BarIcon>(...)</BarIcon>
@@ -92,7 +92,7 @@ Continuons avec les couleurs avec le curseur. Cette fois ci, on va utiliser Reac
 
 Revenons sur le composant Home définie par un simple bouton :
 
-```ts
+```tsx
 // Home.tsx
 import React from 'react';
 
@@ -115,7 +115,7 @@ Dans ce composant, initialisons la liste des couleurs que l'on veut utiliser. Le
 
 Il nous suffit donc de juste mettre une liste de mots-clés de couleurs :
 
-```ts
+```tsx
 // Home.tsx
 ...
 
@@ -146,7 +146,7 @@ const colors = [
 
 Et d'en sélectionner une au hazard.
 
-```ts
+```tsx
 // Home.tsx
 const colors = [
   ...
@@ -187,7 +187,7 @@ Indice: Cela implique l'utilisation de `state` ;)
 
 Suivons donc l'indice et créons un hook d'état afin de sélectionner la couleur et de pouvoir la changer quand la souris passe dans le composant
 
-```ts
+```tsx
 // Home.tsx
 export function Home({ goHome }: IHomeProps): JSX.Element {
   const defaultIndex = Math.floor(Math.random() * (colors.length - 1));
@@ -209,7 +209,7 @@ export function Home({ goHome }: IHomeProps): JSX.Element {
 
 Ensuite utilisons la propriété `onMouseEnter` pour jeter l'évent.
 
-```ts
+```tsx
 // Home.tsx
 export function Home({ goHome }: IHomeProps): JSX.Element {
   const defaultIndex = Math.floor(Math.random() * (colors.length - 1));