M crea/react/GraphQL.md → crea/react/GraphQL.md

@@ -10,15 +10,7 @@ 
 
 ![GraphQL](https://graphql.org/img/brand/logos/logo-wordmark.svg)
 
----
-
-**Nouveau format de slides !**
-
-- Moins de contenu sur les slides (prenez les notes qui vous semblent nécessaires)
-- Slides en HTML
-- Plus d'intéractivité, plus de pratique
-
-Ces slides sont disponibles sur https://5ika.ch/slides/GraphQL.md.
+*Tim Izzo - BDWA - Cours React*
 
 ---
 
@@ -32,7 +24,7 @@ ---
 
 ## Avantages de GraphQL
 
-- **Demande de données précise**: Les clients peuvent demander exactement les données dont ils ont besoin, ce qui évite le sur-fetching ou le under-fetching de données.
+- **Demande de données précises**: Les clients peuvent demander exactement les données dont ils ont besoin, ce qui évite le sur-fetching ou le under-fetching de données.
 - **Introspection**: GraphQL fournit un système de type pour découvrir et explorer le schéma de l'API.
 - **Réduction des aller-retours**: Les clients peuvent obtenir toutes les données nécessaires en une seule requête, ce qui réduit les allers-retours entre le client et le serveur.
 
@@ -86,6 +78,12 @@ - Une **Subscription** permet à un front de suivre des changements côté backend [pas abordé]
 
 ---
 
+# Exploration d'un graphe existant
+
+=> https://rickandmortyapi.com/graphql
+
+---
+
 ## Backend
 
 Le backend doit faire correspondre un **resolver** à chaque élément
@@ -96,9 +94,7 @@ 
 ```typescript
 const resolvers = {
     getUser: (id: string) => {
-        const users = knex('users')
-                .select(['id', 'name','email'])
-                .where({id});
+        const users = knex('users').select(['id', 'name','email']).where({id});
         return users?.[0];
     }
 }
@@ -120,20 +116,15 @@ ## Apollo
 
 Apollo est un ensemble d'outils pour:
 
-- Créer un serveur GraphQL: Apollo Server
-- Créer un client GraphQL: Apollo Client
-- Gérer ses schémas à grande échelle: GraphOS
+- Créer un serveur GraphQL: **Apollo Server**
+- Créer un client GraphQL: **Apollo Client**
+- Gérer ses schémas à grande échelle: **GraphOS**
 
 ---
 
 ## Travail pratique
 
 Ensemble, nous allons mettre en place un serveur GraphQL permettant de gérer un blog.
-
-Pour ce TP, nous allons développer ensemble sur les mêmes fichiers de manière
-synchronisée avec un [gitpod](https://www.gitpod.io/1).
-
-➡️ [Accéder au projet](https://gitpod.5ika.ch/?tkn=vvBXK79hp45yZofuTae2&folder=/home/vsc/projects/graphql-project)
 
 ---
 
@@ -269,7 +260,7 @@ ---
 
 ## Travail pratique
 
-Créer un simple frontend avec ViteJS qui va lister les articles de blog
+Créer un simple frontend **Typescript** avec ViteJS qui va lister les articles de blog
 disponibles et en créer un nouveau au clique sur un bouton (avec du 
 contenu par défaut).
 
@@ -299,10 +290,4 @@ 
 ## Travail pratique
 
 Mettre en place [codegen](https://the-guild.dev/graphql/codegen) dans notre projet
-commun pour mieux organiser nos appels GraphQL.
-
----
-
-# Exploration d'un graphe existant
-
-=> https://rickandmortyapi.com/graphql +commun pour mieux organiser nos appels GraphQL.

M crea/react/Typescript.md → crea/react/Typescript.md

@@ -9,6 +9,9 @@ ---
 
 
 # TypeScript
+Du Javascript, mais typé
+
+*Tim Izzo - BDWA - Cours React*
 
 ---
 
@@ -16,15 +19,15 @@ ## Qu'est-ce que TypeScript ?
 
 - TypeScript est un langage de programmation Open Source développé par Microsoft
 - C'est une sorte de surcouche à Javascript qui rend le langage **typé**.
-- TypeScript est conçu pour améliorer le développement d'applications JavaScript à grande échelle en ajoutant des outils de vérification des types, d'autocomplétion et de refactorisation.
+- TypeScript est conçu pour améliorer le développement d'applications JavaScript à *grande échelle* en ajoutant des outils de vérification des types, d'autocomplétion et de refactorisation.
 
 ---
 
 ## Avantages de TypeScript
 
-- **Vérification des types :** TypeScript permet de détecter les erreurs de type pendant la phase de développement, dans l'IDE, ce qui facilite le débogage et rend le code plus robuste.
+- **Vérification des types :** TypeScript permet de détecter les erreurs de type **pendant la phase de développement**, dans l'IDE, ce qui facilite le débogage et rend le code plus robuste.
 - **Intellisense améliorée :** Grâce aux annotations de type, TypeScript offre une meilleure prise en charge de l'autocomplétion et de l'analyse statique du code dans les éditeurs de code.
-- **Meilleure maintenabilité :** Les fonctionnalités avancées de TypeScript, telles que les interfaces, les classes et les modules, favorisent une meilleure organisation et une meilleure maintenabilité du code.
+- **Meilleure maintenabilité :** Les fonctionnalités avancées de TS permettent une meilleure organisation et une meilleure maintenabilité du code.
 
 ---
 
@@ -48,7 +51,10 @@ function add(a: number, b: number): number {
   return a + b;
 }
 
-const result = add(2, 3);
+const resultA = add(2, 3);
+
+// Affiche une erreur dans l'IDE
+const resultB = add('lundi', 'mardi');
 ```
 
 > L'extension de fichier utilisée est `.ts` plutôt que `.js`.
@@ -76,7 +82,7 @@ ---
 
 ## Interfaces en TypeScript
 
-Les interfaces sont utilisées pour définir des contrats de structure de données en TypeScript.
+Les interfaces sont utilisées pour définir des structures d'objet.
 
 Voici un exemple d'utilisation d'interfaces :
 
@@ -127,7 +133,8 @@ ```typescript
 const Compo = () => {
     const [count, setCount] = useState<number>(0);
     const [name, setName] = useState<string>('');
-    const [profile, setProfile] = useState<{name: string, age: number}>();
+    const [profile, setProfile] = 
+        useState<{name: string, age: number}>();
 
     // Cela affiche des erreurs:
     setCount({value:2});
@@ -150,7 +157,9 @@ const [count, setCount] = useState(0); // number
     const [name, setName] = useState('Tim'); // string
     const [profile, setProfile] = useState({age: 45, city: 'GE'}); // {age: number, city: string}
 
-    const arr = [1, 'yop', null]; // (number | string | null)
+    const arr = [1, 'yop', profile];
+    // TS déduit que `arr` est de type
+      // [number, string, {age: number, city: string}]
 }
 ```
 
@@ -181,6 +190,8 @@ 
 Les interfaces peuvent avoir des propriétés facultatives qui ont le droit
 d'être `undefined`.
 
+On utilise pour ça le symbole `?`.
+
 ```typescript
 interface MyCompoProps {
     className?: string;
@@ -215,6 +226,39 @@ ```
 
 ---
 
+# Travail pratique 1
+
+1. Initialiser un nouveau projet **Typescript** avec ViteJS
+2. Créer un composant `Profile` et l'importer dans `App.tsx`
+3. Typer l'objet *props* de Profile pour que le composant accepte les props suivantes:
+  - `firstname` : string
+  - `lastname`: string
+  - `age`: number
+  - `likedPages`: string[]
+4. Dans `App.tsx`, fournir au composant Profile des props qui fonctionnent
+5. Ajouter un peu de contenu JSX pour afficher les props dans la page
+
+---
+
+# Travail pratique 2
+
+1. Dans le composant `Profile`, ajouter un state `promotion`.
+2. Faire en sorte que ce state soit typé pour accepter que les valeurs suivantes: `DEV7`, `DEV6`, `DEV5`.
+   Il ne faut pas utiliser `string` comme type.
+3. Ajouter un sélecteur dans le composant pour pouvoir sélectionner une promotion et adapter le state.
+4. Trouver comment optimiser le code pour le rendre plus DRY.
+
+---
+
+# À partir du travail réalisé
+
+- Dans `App.jsx`, que se passe-t-il quand vous ne fournissez pas une prop (par exemple `lastname`) ?
+- Dans `App.jsx`, que se passe-t-il quand vous fournissez `18ans` (string) comme prop `age` ?
+- Dans le composant `Profile`, que se passe-t-il dans VSCode, quand vous entrez `props.` puis CTRL+Espace ?
+- Dans votre navigateur, retrouvez où se trouve les informations de typage des props du composant `Profile`.
+
+---
+
 ## Dans la pratique
 
 Au début, Typescript est plutôt contraignant.
@@ -227,8 +271,111 @@ est déjà une bonne chose qui améliore le code.
 
 ---
 
-**Hands-on**: Convertir un projet NextJS fait en classe en Typescript
+Vous avez maintenant les bases avec lesquelles on peut tout composer.
+Cela peut vite devenir complexe néanmoins.
+
+Pour aller plus loin => https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
+
+---
+
+# Exemples
+
+<!--v-->
+
+## Fonction
+
+```ts
+function greet(name: string): string {
+  return `Hello, ${name}!`;
+}
+
+let greeting: string = greet("Bob");
+console.log(greeting);  // Output: Hello, Bob!
+```
+
+<!--v-->
+
+# Interface
+
+```ts
+interface Person {
+  firstName: string;
+  lastName: string;
+  age: number;
+}
+
+let user: Person = {
+  firstName: "John",
+  lastName: "Doe",
+  age: 30
+};
+```
+
+<!--v-->
+
+# Union
+
+```ts
+let code: string | number;
+code = 123;
+code = "ABC";
+
+function displayCode(code: string | number) {
+  console.log(code);
+}
+```
+
+<!--v-->
+
+# Alias
+
+```ts
+type StringOrNumber = string | number;
+
+let value: StringOrNumber;
+value = "Hello";
+value = 42;
+```
+
+<!--v-->
+
+# Types optionnels
+
+```ts
+function buildName(firstName: string, lastName?: string): string {
+  if (lastName) {
+    return `${firstName} ${lastName}`;
+  } else {
+    return firstName;
+  }
+}
+
+let result1 = buildName("Alice");
+let result2 = buildName("Alice", "Smith");
+```
+
+<!--v-->
+
+# Promise
+
+```ts
+function fetchCharacters(ms: number): Promise<Character[]> {
+  return axios.get('/api/characters');
+}
 
-Doc: https://nextjs.org/docs/app/building-your-application/configuring/typescript
+const charactersPromise = fetchCharacters();
+const characters = await fetchCharacters();
+```
 
----+<!--v-->
+
+# Générique
+
+```ts
+function identity<T>(arg: T): T {
+  return arg;
+}
+
+let output1 = identity<string>("myString");
+let output2 = identity<number>(100);
+```

M crea/react/_themes/5ika.css → crea/react/_themes/5ika.css

@@ -171,14 +171,17 @@ }
 
 .reveal ol {
   list-style-type: decimal;
+  padding-left: 2rem;
 }
 
 .reveal ul {
   list-style-type: disc;
+  padding-left: 2rem;
 }
 
 .reveal ul ul {
   list-style-type: square;
+  padding-left: 4rem;
 }
 
 .reveal ul ul ul {
@@ -191,6 +194,7 @@ .reveal ol ol,
 .reveal ol ul {
   display: block;
   margin-left: 40px;
+  padding-left: 4rem;
 }
 
 .reveal dt {
@@ -382,3 +386,14 @@ .backgrounds {
     background-color: var(--r-background-color);
   }
 }
+
+
+@media print { 
+  .speaker-notes {
+    display: none !important;
+  }
+
+  .reveal section img {
+    border: none !important;
+  }
+}