west

West

town: Le Mesnil le Roi
Joined 22 March 2012
Personal website: www.pirates-corsaires.com
  1. Créer un CV en 3D
    ----------------------

    Le cours
    favicon https://www.youtube.com/watch?v=pGMKIyALcK0&t=561s&ab_channel=WawaSensei

    Le CV du formateur (CV)
    favicon https://david-hckh.com/

    Le code de base à cloner :
    favicon https://github.com/wass08/r3f-vite-starter

    La librairie React Three Fiber à utiliser pour la 3D en WebGl, qui s'appuie sur ThreeJs
    favicon https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

    Un tuto ThreeJs si besoin
    favicon https://www.youtube.com/watch?v=tyNt9Qse1mg&ab_channel=WawaSensei

    Date May 31, 2023
  2. ReactJS / React Native
    Les HOOKS
    -------------

    Les 15 hooks React résumés en 1 post


    - Les "State Hooks" qui servent à gérer le state d'un composant

    1 useState

    2 useReducer

    C'est grâce à ces 2 hooks qu'un composant fonctionnel (en opposition au composant de classe) à accès à une gestion de state et à un cycle de vie

    - Le context Hook

    3 useContext

    Avec ce hook, un composant enfant peut recevoir des informations d'un composant parent (peut importe sa distance à ce parent) sans passer par des props

    - Les "Ref Hooks"

    Ils permettent à un composant de garder des informations qui ne sont pas utilisées pour les renders (ie: noeud de DOM ou ID de timeout).

    Contrairement aux states, la mise à jour d'une ref ne re render pas le composant

    4 useRef, pour déclarer une ref

    5 useImperativeHandle, permet de personnaliser la ref exposée par le composant. Dans les faits, c'est jamais utilisé

    - Les "Effect Hooks"

    Ils sont utiles pour connecter et synchroniser le composant avec un système externe (et ducoup pour déconnecter et désynchroniser quand ils sont détruits.

    Pour désynchroniser, vous devez retourner la fonction de désynchro à la fin du hook

    Svp, n'utilisez PAS ces hooks pour des calls API

    6 useEffect, comme dit juste avant, il connecte un composant à un système externe.
    Ne pas l'utiliser pour un call API : en utilisant le useEffect tu vas avoir des problèmes de perf, des doublons de call Api, tu n'auras aucun moyen de savoir l'état du call (loading, pending, terminé..)
    Sans compter que tu dois gérer les dépendances du hook.
    Voilà problème sur problème =p

    7 useLayoutEffect. C'est comme un useEffect mais il se déclenche avant que le navigateur ne redessine l'écran.

    Il est très peu utiliser et React préconise de ne l'utiliser qu'en dernier recourt car il peut affecter les perfs

    8 useInsertionEffect. C'est comme un useEffect mais il se déclenche avant que React n'apporte des modifications au DOM

    Sa seule utilisation est pour les libs CSS-in-JS car il permet d'insérer du CSS dynamique (donc tu l'utilisiera probablement jamais)

    - Les "Performance Hooks"

    Ils permettent d'ignorer les calculs et les rendus inutiles

    9 useMemo. Permet de mettre en cache le résultat d'un calcul coûteux.

    10 useCallback. Permet de mettre en cache une définition de fonction avant de la transmettre à un composant optimisé

    Certains hooks de perf servent à prioriser les rendering :

    11 useTransition. Permet de marquer une transition de state comme non bloquante et d'autoriser d'autres mises à jour à l'interrompre

    12 useDeferredValue. Permet de différer la mise à jour d'une partie non critique de l'interface utilisateur et de laisser les autres parties se mettre à jour en premier

    - Les autres hooks

    13 useDebugValue. Permet de personnaliser le label que React DevTools affiche pour votre hook custom

    14 useId. Permet à un composant de créer un Id unique sans lib externe (au revoir uuid)

    15 useSyncExternalStore. Permet à un composant de se sync à un store externe

    Date April 13, 2023
  3. Utilisation ReactJS & Visual Studio Code
    -------------------------------------------------

    Pour installer et utiliser REACT :

    - installer NodeJS : favicon https://nodejs.org/en/
    Permet d'utiliser NPM et l'outil Create React App
    Sur Mac, taper : sudo npm install -g create-react-app

    - Visual Studio Code
    Ouvrir un terminal : CTRL+ù (u accent grave)

    - Créer une application React, via le terminal,
    > npx create-react-app 1-react-app
    Cela permet d'installer plein d'outils :
    - Webpack est un bundle (paquet), qui permet de gérer plein de dossiers et dépendances de manière à tout mettre en ligne facilement
    - BabelJs, est un Javascript compiler, qui permet d'utiliser du Javascript bien compris par tous les navigateurs
    > cd 1-react-app
    > npm start

    - Explications des dossiers générés
    - package.json : contient les commandes à taper, les dépendances installées
    - package-lock.json : "photo" de tout ce qui a été installé pour faire fonctionner l'app
    - .gitignore : pour l'utilisation de Git, ca ignore certains dossiers et fichiers, notamment le doffier nods_modules à le pas mettre sur github
    - dossier public :
    - index.html : c'est une SPA (Single Page Application), qui ne contient qu'une seule div où tout le site sera généré dedans
    avantages : gain de temps en chargement
    - manifest.json : utile pour créer des PWA (progressive Web App), fonctionne pour mobile et navigateurs
    - robot.txt : utile pour le SEO, pages qu'on veut ignorer ou non
    - dossier src : endroit où on va développer
    - App.js : c'est un composant, la page qui tourne actuellement après avoir tapé > npm start
    - App.test.js : permet de faire des tests
    - setupTests.js : faire du testing
    - reportWebVitals.js : permet de tester les performances de l'app
    - index.js : permet de retourner (faire un render) toute l'application qu'on a dans la div id="root"

    - Si on a installé l'extension Emmet pour Visual Studio Code, ne pas oublier d'ajouter les infos suivantes dans les settings :
    Fichier->Preferences->Parametres->extensions->Emmet->le lien "modifier dans settings.json"
    ou pour aller plus vite : CTRL+MAJ+P, puis tapper json pour atterrir directment dans settings.json
    et ajouter :
    ,
    "emmet.includeLanguages": {
    "javascript": "javascriptreact"
    },

    Ajouter également :
    "explorer.compactFolders": false,
    "editor.wordWrap": "on"
    Permet d'avoir l'affichage des folders en hiérarchie.


    INFOS
    -------

    JSX : c'est le langage qui ressemble à de l'HTML qu'on écris dans les composants, c'est compris par React.
    Important : le JSX accepte les expressions, PAS les déclaration.
    donc ça accepte les opérateurs ternaires, les variables gérés sous formes de fonctions fléchées
    mais ça n'accepte pas les conditions, les boucles for, etc.

    En JSX, tous les éléments html doivent être fermés. En HTML5 ce n'est plus la peine de fermer les balises, mais en JSX c'est obligatoire,
    exemple : <br/>

    2 familles de composants :
    STATE : contient des données d'un composant
    STATELESS : pas de données, servent juste à la présentation (du jsx seul sans données)
    Le useState déclanche un mécanisme de mise à jour du composant.


    PROPS :
    C'est placé en paramètre dans une fonction, dans un composant. si on console.log PROPS
    ca retourne un objet.
    exemple :
    function Item (props) {
    }
    Les props fonctionnent de haut en bas, donc du composant parent au composant enfant


    BOOTSTRAP
    Pour installer Bootstrap :
    > npm install bootstrap


    Avec l'extention ES7 React/reduc/GraphQL, taper dans un fichier nouveau composant.js:
    rfc
    et cela crée le contenu du code source d'un composant !


    UUID
    Pour installer la gestion des ID : UUID (55 millions de download par semaine !!!)
    > npm install uuid


    REACT ROUTER DOM
    Pour installer react router :
    > npm install react-router-dom


    LES IMAGES
    Quand on met le site en prod, il faut les préfixer :
    - urls public : <img src="%PUBLIC_URL%/monlogo.jpg' />
    - urls src : <img src={process.env.PUBLIC_URL + '/monlogo.jpg'} />>

    Date April 13, 2022
  4. Outils React JS
    ------------------

    1. Extensions navigateur : React developer Tool

    2. Injecter React et React Dom sans avoir besoin de l'installer
    favicon https://unpkg.com/
    Il suffit de copier/coller deux lignes de script à accès distant dans le head d'une page Html.
    ex:
    <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
    - Si on veut utliser les versions de développement de React, il faut remplacer production.min par development (il n'y a pas de version minifiée en dev). Le logo de l'extension React sur le navigateur devient ROUGE.

    Pour utiliser du JSX, il faut ajouter Babel via unpkg.com
    favicon https://unpkg.com/browse/babel-standalone@6.26.0/

    Date February 08, 2022
  5. ReactJS / React Native
    Installation React Native
    -------------------------------

    C'est quoi NPM ou NPX ?

    NPM : Node Package Manager, est le gestionnaire de paquets officiel de Node.js. Il permet de télécharger et d'installer les dépendances du projet en lisant le package.json. Exemple :
    > npm install
    > npm start
    > npm run mon-package
    info : package = paquet = module : bloc de code composé de fonctions permettant d'effectuer une tâche. Inutile d'inventer la roue, on prends des packages sur le net plutôt que de les créer.

    NPX : plus simple, il se débrouille à chercher si le package existe dans le projet (node_modules), si oui, il l'exécute, sinon, il recherche dans global, sinon il va le chercher sur le net pour l'installer temporairement.
    L'intérêt est aussi de'installer à la volée sans installation durable ! Et plus besoin d'installation globale


    INSTALLER NPM

    Il faut installer Node.js car npm est livré avec.
    favicon https://nodejs.org/fr/
    Node.Js est un environnement d'exécution Javascript construit avec le moteur Javascript V8 de Chrome.

    INSTALLER EXPO

    > npm i -g expo-cli

    Expo est installé en ligne de commande.
    Mais on peut aussi installer un client Expo sous windows, depuis ce lien :
    favicon https://github.com/expo/xde/releases
    Et sélectionner le fichier exe (normalement xde-Setup-(n° version).exe

    DEMARRER PROJET

    > expo init my-app
    Choisir template blank, le projet est créé !

    Installer EXPO sur le mobile via le store
    J'aurai un QR Code sur Android pour exécuter l'app.
    Sur iOS pas de QRCode, mais un lien à s'envoyer par sms

    quelques commandes pour lancer projet depuis cmd
    - cd my-app
    - npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
    - npm run android
    - npm run ios # requires an iOS device or macOS for access to an iOS simulator
    - npm run web

    Donc pour exécuter le projet my-app qui vient d'être créé, sur cmd :
    > cd my-app
    > expo start (ou yarn start si yarn est installé)

    Ca lance Expo sur navigateur web (voi image 1, dernière de maximemo)
    Sur web : mode LAN plus rapide, mode Tunnel moins rapide mais fonctionne mieux si LAN ne marche pas.

    VERIFIER QUE TOUT EST BIEN INSTALLE

    > node -v
    > npm -v


    SCANNER LE QR CODE (activer wifi)

    L'application se lance sur le mobile.
    Si je veux modifier le texte qui s'affiche, je modifie le fichier App.js à la racine du dossier my-app. Texte à modifier entre les balises <Text></Text>

    Date October 25, 2021
Advertising