[{"data":1,"prerenderedAt":45},["ShallowReactive",2],{"course-react-et-next-js-developper-des-interfaces":3,"highlight-jsx-export default async":44},{"id":4,"name":5,"slug":6,"location":7,"targetAudienceFormatMarkdown":8,"prerequisitesFormatMarkdown":9,"objectivesFormatMarkdown":10,"descriptionFormatMarkdown":11,"teachingMethodsFormatMarkdown":12,"teachingResourcesFormatMarkdown":13,"evaluationMethodsFormatMarkdown":14,"accessibilityFormatMarkdown":15,"accessMethodsFormatMarkdown":16,"minimumParticipants":7,"maximumParticipants":7,"duration":17,"reference":18,"trainerType":7,"updated_at":19,"created_at":20,"price":21,"organizationMode":22,"theme":25,"code":29,"tags":34,"metadata":35},"/api/courses/0b6c494e-b298-11f1-a993-d8ca06000363","React et Next.js : développer des interfaces","react-et-next-js-developper-des-interfaces",null,"Développeurs web souhaitant construire des interfaces et des applications full stack avec l'écosystème React.","Pratique de JavaScript moderne. La connaissance de TypeScript est un plus.","Construire des interfaces réactives avec React et des applications full stack avec Next.js (rendu serveur, routage, API).","--day1--\n\n## Composants React\n\n-   JSX et rendu ; props et composition ; état local avec useState ; événements ; listes et clés.\n\n--break--\n\n## Hooks et effets\n\n-   useEffect et cycle de vie ; useRef, useMemo, useCallback ; hooks personnalisés ; règles des hooks et pièges.\n\n--day2--\n\n## État et données\n\n-   État partagé et contexte ; gestion des données distantes ; chargement, erreurs et cache ; formulaires contrôlés et validation.\n\n--break--\n\n## Structurer une application React\n\n-   Organisation des dossiers ; composition et réutilisation ; typage avec TypeScript ; tests de composants.\n\n--day3--\n\n## Next.js : routage et rendu\n\n-   App Router ; composants serveur et client ; stratégies de rendu et de cache ; chargement des données ; mise en page imbriquée.\n\n--break--\n\n## Next.js : API et formulaires\n\n-   Route handlers et actions serveur ; accès aux données ; authentification ; gestion des erreurs et des états de chargement.\n\n--day4--\n\n## Qualité et performance\n\n-   Optimisation des images et des polices ; découpage du code ; mesure des Core Web Vitals ; accessibilité des composants.\n\n--break--\n\n## Déploiement\n\n-   Variables d'environnement ; build et hébergement ; supervision ; revue du projet fil rouge.","Présentiel, distanciel, hybride","Les supports pédagogiques sont remis aux stagiaires sous format numérique et/ou papier selon les modalités de la formation.\n\nIls comprennent des supports de cours, des présentations, des fiches pratiques, des études de cas, des exercices applicatifs ainsi que des QCM d’entraînement selon la formation. (adapté au choix du formateur)\n\nLes formations s’appuient sur des moyens techniques adaptés : ordinateurs, logiciels professionnels, connexion internet, écran ou vidéoprojecteur, ainsi que des outils collaboratifs et de visioconférence pour les formations à distance.\n\nL’ensemble des supports pédagogiques est accessible pendant et après la formation afin de favoriser l’appropriation et la mise en pratique des compétences acquises.","En amont de la formation, un recueil des besoins permet de récolter des informations sur le stagiaire et ses attentes. L’évaluation se fait en cours de formation, par des études de cas ou des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation et/ou un examen.\n\nUn suivi de qualité est effectué grâce à nos sessions en groupe restreint (entre 2 et 9 participants maximum). Le stagiaire émargera par demi-journée et recevra une attestation de formation.","Nous informons l’ensemble de nos clients et stagiaires que nous sommes dans la capacité d’adapter les sessions selon les handicaps et les situations spécifiques. Nous nous engageons à répondre à toutes vos demandes sous un délai de 48h ouvré.","Si l’une de nos formations vous intéresse, contactez-nous au +33 4 93 65 34 24 ou à l’adresse mail contact@m2g-intellect.fr. Selon votre besoin et vos attentes, nous organiserons un échange téléphonique avec le formateur pressenti afin d’adapter la formation et ses modules, puis nous vous adresserons un devis.\n\nLes dates de la formation seront à convenir sous 30 jours maximum.","28.00","L1-DEV-21","2026-09-18T09:45:10+00:00","2026-09-17T15:02:32+00:00","2510.00",{"id":23,"name":24},"/api/organization_mode_types/6","HYBRID",{"id":26,"name":27,"slug":28},"/api/themes/0ac148c3-b298-11f1-a993-d8ca06000363","Développement logiciel informatique et web","developpement-logiciel-informatique-et-web",{"id":30,"label":31,"domain":32},"/api/training_specialities/163","326 - Informatique, traitement de l’information, réseaux de transmission des données",{"label":33},"32 - Communication et information",[],{"desc-accroche":36,"Description":37,"icon-color":38,"icon-name":39,"code-langage":40,"code-snippet":41,"courte-description":42,"titre-accroche":43},"Maîtrisez les hooks React, la composition de composants, puis le rendu serveur, le routage par fichiers et les routes API de Next.js pour livrer une application full stack complète.","Cette formation couvre React dans ses pratiques actuelles avant d'aborder Next.js pour construire une application full stack complète. Vous apprenez à composer des interfaces avec des composants fonctionnels et les hooks (useState, useEffect, useContext, hooks personnalisés), puis à structurer une application Next.js avec le rendu serveur, le routage par fichiers, les server components et les routes API. La gestion des données, de la mise en cache et des formulaires est traitée avec les patterns actuels de l'écosystème React. Les participants construisent une application complète tout au long de la formation, du composant isolé jusqu'au déploiement, ce qui permet de confronter chaque notion aux contraintes réelles d'un projet. Cette formation s'adresse aux développeurs web souhaitant construire des interfaces et des applications full stack avec l'écosystème React.","#61DAFB","mdi:react","jsx","export default async function OrdersPage() {\n  const orders = await fetch('https://api.shop.dev/orders').then(r => r.json());\n  return \u003COrderList orders={orders} />;\n}\n\nfunction OrderList({ orders }) {\n  const [filter, setFilter] = useState('all');\n  return orders\n    .filter(o => filter === 'all' || o.status === filter)\n    .map(renderOrder);\n}","Formation React et Next.js pour construire des interfaces réactives puis une application full stack avec rendu serveur, routage et API, du composant au déploiement.","Construisez des interfaces réactives avec React puis des applications full stack avec Next.js : rendu serveur, routage et API intégrées.","\u003Cpre class=\"hljs\">\u003Ccode class=\"language-jsx\">\u003Cspan class=\"hljs-keyword\">export\u003C/span> \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">OrdersPage\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> orders = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(\u003Cspan class=\"hljs-string\">'https://api.shop.dev/orders'\u003C/span>).\u003Cspan class=\"hljs-title function_\">then\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">r\u003C/span> =>\u003C/span> r.\u003Cspan class=\"hljs-title function_\">json\u003C/span>());\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">OrderList\u003C/span> \u003Cspan class=\"hljs-attr\">orders\u003C/span>=\u003Cspan class=\"hljs-string\">{orders}\u003C/span> />\u003C/span>\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">OrderList\u003C/span>(\u003Cspan class=\"hljs-params\">{ orders }\u003C/span>) {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [filter, setFilter] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-string\">'all'\u003C/span>);\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> orders\n    .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">o\u003C/span> =>\u003C/span> filter === \u003Cspan class=\"hljs-string\">'all'\u003C/span> || o.\u003Cspan class=\"hljs-property\">status\u003C/span> === filter)\n    .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(renderOrder);\n}\u003C/code>\u003C/pre>",1789717718331]