Formation Next.js avancé: JS client

Description

Cette formation Next.js côté client vous permettra d’orchestrer proprement le code spécifique au navigateur (DOM, window, API Web) dans un app rendue côté serveur et hydratée côté client.

Pendant 3 jours, vous apprendrez à :

• utiliser next/dynamic pour charger Leaflet uniquement côté client
• hydrater proprement des composants et diagnostiquer les erreurs d’hydratation
• manipuler le DOM via refs et callbacks d’effets
• exploiter window, Date, et les APIs de localisation du navigateur
• importer D3 côté serveur mais l’exécuter côté client
• transformer un Browser Component en Client Component réutilisable

Public

Cette formation de niveau intermédiaire s'adresse aux développeurs et développeuses web avec un minimum d'expérience dans le développement d'applications web avec rendu serveur.

Les objectifs

• Comprendre les concepts de mounting et hydration dans React et leur lien avec le code spécifique au navigateur
• Importer une librairie qui ne fonctionne que dans le navigateur (Leaflet pour la cartographie)
• Afficher des informations en utilisant l'objet window
• Utiliser une librairie qui peut être importée côté serveur mais ne peut être utilisée que côté client (D3 pour la visualisation de données)
• Apporter des modifications impératives au DOM dans une callback d'effet
• Gérer le code isomorphique qui est identique mais se comporte différemment côté client et côté serveur

Pré-requis

• Savoir programmer en JavaScript au quotidien: syntaxe async/await, fonctions, variables, conditions
• Avoir déjà créé des composants simples avec React: concepts de hooks, d'état, format JSX, props, émettre des requêtes côté client
• Avoir une connaissance minimale de Next.js
• Avoir déjà travaillé sur une application fullstack: soit savoir mettre en place un serveur web Node.js qui sert des pages React, soit connaître les bases d'un framework JavaScript avec backend (Next, Nuxt, Angular, Vite, SvelteKit, QuickCity, Remix...)
• Connaître les bases de Node.js et son écosystème, notamment savoir installer un package avec NPM
• Ordinateur portable à apporter

Le programme de la formation Next.js avancé: JS client

Matin : Lazy loading et manipulation du DOM

• Importer une librairie uniquement côté client avec next/dynamic (Leaflet pour la cartographie)
• Découverte du principe du lazy loading
• Utiliser une librairie importable côté serveur mais qui ne fonctionne que côté client (D3 pour la visualisation de données)
• Implémenter la modification impérative du DOM compatible avec le rendu serveur via les refs et les effets
• Introduction du concept de Browser Component qu'il faut transformer en Client Component

Mises en pratique :
- Importer et utiliser Leaflet
- Importer et utiliser D3
- Identification des Browser Components

Après-midi : Composants utilitaires et hydration dans React

• Afficher des informations en utilisant l'objet window
• Implémenter et utiliser les utilitaires useMounted et NoSsr
• Découverte des concepts d'hydration et mounting dans React
• Gérer le code isomorphique (localisation)

Mises en pratique :
- Afficher le titre de la page
- Manipuler un composant non modifiable qui utilise l'objet window
- Afficher la date courante via l'objet Date
- Afficher du contenu localisé via les fonctionnalités du navigateur

Télécharger le programme

Formateur

FAQ

8 raisons de participer à une formation Human Coders

• Satisfaction client élevée : Un taux de statisfaction de 4,6/5 depuis 2012 (sur 1719 sessions réalisées). 99% des participants se disent satisfaits de nos formations
• Approche pédagogique unique : Des formations en petit groupe, des formateurs passionnés et expérimentés, de véritables workshops... (Plus d'infos sur notre manifeste)
• Catalogue de formations complet : 184 formations au catalogue, de quoi vous accompagner sur tout vos projets
• Écosystème dynamique : Nous accompagnons les dev depuis 13 ans avec des initiatives comme Human Coders News, les Human Talks, le podcast ou encore notre serveur Discord
• Financement facilité : Organisme certifié Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• Références clients prestigieuses : De nombreux clients qui nous font confiance depuis des années
• Accompagnement sur mesure : Nous vous proposons un accompagnement personnalisé par nos consultants pour vous aider dans vos projets au-delà de la formation
• Valorisation professionnelle : Remise d'un diplôme, d'une attestation et d'une certification, suivant les formations effectuées, que vous pourrez afficher sur vos CV et réseaux sociaux