all readme learn writer

README.md

Twitter App

Bienvenue dans ce workshop pour la création d'une mini app Twitter. Cette application va nous permettre d'utiliser :

• zod
• react-query
• next

Pré-requis

• JavaScript à connaître pour commencer React
• Les bases de React vue dans BeginReact
• Installer le React DevTools
  • chrome
  • Firefox

Systems

• git - v2 ou plus
• node - v12 ou plus
• npm - v6 ou plus
• pnpm - v7 ou plus

Vérifier les versions

git --version
node --version
npm --version
pnpm --version

Je vais utiliser pnpm durant tous le cours, tu peux utiliser le gestionnaire de dépendances que tu veux.

Setup du projet

git clone https://github.com/Melvynx/nextreact-twitter.git
cd nextreact-twitter
pnpm install

Setup de la database

J'utililise prisma pour la gestion de la database.

Elle est utiliser avec sqlite pour la simplicité de l'installation. (c'est un database dans un fichier, donc rien besoin d'installer)

Pour setup la database tu peux lancer :

pnpm prisma:setup

Lancer le projet

pnpm dev

Construction des exercices

En NextJS le routing est basée sur la structure de fichier qui est dans le dossier pages. Je tiens à préciser qu'on est sur NextJS version 13.

Cette version, hybrid, va nous permettre de faire de NextJS 12 ainsi que NextJS 13 avec le app directory que tu découvriras dans les exercices.

Dans le dossier pages/exercices tu trouveras les exercices accompagner de leur instructions.

Il y a aussi des exercices dans le dossier pages/api/exercices qui sont des exercices qui ne sont pas basés sur le routing NextJS mais sur des API.

Et finalement tu trouveras des exercices dans app/ qui sont des exercices qui ne sont pas basés sur la nouvelle version de NextJS.

Les exercices sont composés de différentes parties. Pour la partie 1, tu trouveras des aides dans le fichiers exercices de la part des émojis. Pour les parties 2 ou plus tu seras livrés à toi même.

Tu trouveras dans le dossiers pages/solutions les solutions de chaque exercices et leur parties. Tu peux les consulter si tu bloques sur un exercice.

Tu trouveras sur la plateforme de formation :

• Une introduction a chaque exercice, qui t'explique où tu devras aller pour trouver les informations dont tu as besoin.
• Une vidéo de correction de chaque exercice, qui te montre comment je l'ai fait.

Guide des émojis :

• 🦁 C'est Lienx le premier lynx dans un corps de lion du monde ! Il te donneras des indications claires que tu devras suivre.
• 💡 C'est des tips et astuces qui te permettront d'avancer. C'est un peu les cheat-code qui te donnent directement une partie de la réponse
• 💌 Elle t'informe pour chaque exercice ce que tu as appris. Ce n'est pas que dans l'exercice que tu apprends mais aussi dans la vidéo correction associée.
• ⚠️ Information importante à lire avant de faire l'exercice
• 📖 Lien vers la documentation officielle
• ℹ️ Petite information qui te permettent de
• 💣 Supprimer une ligne

README_2.md

Module 1 - Les fundamentals

Pour appréhender correctement React, je vais te faire découvrir les fondamentaux de React. Il faut bien comprendre quel problème React résout. Dans ce module, on va faire du React sans React.

Pré-requis

• JavaScript à connaître pour commencer React
• Installer le React DevTools (chrome, Firefox)

Systems

• git - v2 ou plus
• node - v12 ou plus
• npm - v6 ou plus
• vscode - (ou un autre IDE)

Tester :

git -v
node -v
npm -v

Setup du projet

git clone https://github.com/Melvynx/react-beginners-fundamentals.git
cd react-beginners-fundamentals
npm install

Pour lancer le projet :

npm run dev

Construction des exercices

Exercice

Dans le dossier src/exercise tu trouveras un dossier par exercice.

Dans chacun de ses exercises tu trouveras les fichiers suivants :

Exercise: Le fichier où tu vas faire l'exercise. À l'intérieur il y a des émojis pour t'aider.

ExerciseN.md: Le fichier de consigne. Si tu es sur VSCode je te conseille d'ouvrir le fichier md et faire CMD + SHIFT + P puis chercher "Open Markdown" et sélectionner le "Markdown : Open preview to the side" !

Dans les fichiers Exercise.md il y a plusieurs "Extra". Le premier exercise est l'exercise principal, dans le fichier Exercise.html tu trouveras de l'aide pour le réalisé avec les émojis.

Ensuite, il y a 1 à 6 autres exercises que tu vas réaliser seul.

Les Solutions

Dans le dossier src/solution il y a les fichiers solution pour chaque exercice et sous exercice.

Les solutions pour l'exercise 1 sont dans le fichier solution préfixé par 1 puis le numéro du sous exercise. Par exemple dans l'exercise 1 il y a 3 sous exercises donc :

• 1-1.js
• 1-2.js
• 1-3.js

Dans la navigation, quand tu lances le projet, tu peux voir le résultat.

Je te conseille de regarder le résultat des exercices avant de les faire, sans regarder le code, juste le résultat, afin de comprendre ce que j'attends de toi.

Stack exercice

Cette application est une application Vite.JS et est configurée pour faire de l'HTML / CSS / JS basique.

Il y a un seul plugin qui permet "d'injecter" du HTML dans d'autre fichier HTML. J'utilise ce plugin dans les fichiers exercise à l'intérieur du <Head> afin d'avoir tout le contenu de src/chore/partials/head.hbs dans le fichier, ce qui évite d'avoir du contenu superflu dans tes fichiers d'exercice.

Pour l'utiliser, par exemple dans le fichier src/exercise/1-no-react/Exercise.html il y a {{> head}} à la ligne 4.

Donc fais attention à ne pas l'enlever !

Guide des émojis :

• 🦁 C'est Lienx le premier lynx dans un corps de lion du monde ! Il te donnera des indications claires que tu devras suivre.
• 💡 C'est des tips et astuces qui te permettront d'avancer. C'est un peu les cheat-code qui te donnent directement une partie de la réponse
• 💌 Elle t'informe pour chaque exercice ce que tu as appris. Ce n'est pas que dans l'exercice que tu apprends mais aussi dans la vidéo correction associée.
• ⚠️ Information importante à lire avant de faire l'exercice
• 📖 Lien vers la documentation officielle
• ℹ️ Petite information qui te permettent de comprendre le code