Nouveauté 2025 : Découvrez les formations sur l'Intelligence Artificielle

Plus d'infos
Espace Client
Contactez-nous

Formations Javascript / JS - Programmation Web

Formation ReactJs

Niveau :

Tous niveaux

Satisfaction de nos apprenants en 2024 : 98%
Taux d’assiduité : 100%

Tout savoir sur votre formation :

Formez-vous selon vos disponibilités ! Vous proposez 3 dates au choix et votre formateur vous confirme la date souhaitée.

En présentiel dans votre entreprise, dans l’un de nos 54 centres de formation ou en distanciel par visioconférence.

Contexte de la formation ReactJs

Vous voulez devenir un expert en développement web avec ReactJs ? Êtes-vous prêt à booster votre carrière en maîtrisant l’une des technologies les plus demandées sur le marché ? Alors, vous êtes au bon endroit.

La maîtrise de ReactJs est devenue un incontournable pour tout développeur web sérieux. Cette bibliothèque JavaScript, développée par Facebook, est largement utilisée pour créer des applications web uniques et performantes. Elle offre des avantages professionnels indéniables : une meilleure productivité, une grande flexibilité et une forte demande sur le marché du travail. De plus, elle donne un avantage concurrentiel majeur en permettant de créer des applications web interactives de haute qualité, favorisant ainsi l’engagement des utilisateurs. En maîtrisant ReactJs, vous pouvez accélérer votre carrière, augmenter votre valeur sur le marché et vous démarquer dans le monde compétitif du développement web.

Mais attendez, ce n’est pas tout !

Avec Expertisme, Organisme de Formations certifié QUALIOPI, vous avez l’opportunité de vous former intensivement sur ReactJs. Notre formation de 35 heures, réparties sur 5 jours, vous permettra de maîtriser cette technologie de pointe. Vous apprendrez à créer des composants React, à gérer le « state » et les « props », à appliquer le style avec CSS ou CSS-in-JS et à intégrer des API back-end avec des hooks personnalisés. Votre Formateur Expert Métier vous guidera à travers chaque étape du processus, assurant ainsi un apprentissage complet et efficace. De plus, notre programme de formation est conçu pour être adaptable à vos besoins spécifiques, vous garantissant ainsi d’acquérir les compétences nécessaires pour exceller dans votre carrière.

Alors, n’attendez plus ! Boostez votre carrière avec notre formation ReactJs. Profitez de cette opportunité unique d’apprendre et de maîtriser l’une des technologies les plus demandées sur le marché. Ne manquez pas cette chance de vous démarquer dans le domaine du développement web et d’ouvrir de nouvelles perspectives pour votre carrière. Agissez maintenant !

À qui s’adresse cette formation ?

Cette formation s’adresse aux développeurs web débutants ou avancés

Objectifs

  • Utiliser React et créer des composants
  • Gérer le « state » et les « props » dans react
  • Appliquer le style avec CSS ou CSS-in-JS.
  • Intégrer des API back-end avec des hooks personnalisés.

Programme

  • 1. PRESENTATION GENERALE
    • Écosystème des Librairies/Frameworks Front-End :
      • Brève histoire : De jQuery aux frameworks modernes (Angular, Vue, Svelte…).
      • Pourquoi utiliser un framework/librairie ? (Organisation, performance, réutilisabilité).
    • Présentation de React :
      • Qu’est-ce que React ? (Librairie UI, approche déclarative).
      • Concepts clés : Composants, Virtual DOM, JSX.
      • Avantages : Performance, écosystème riche, communauté active, flexibilité.
      • Qui utilise React ?
    • Prérequis et Environnement :
      • Rappel rapide : HTML, CSS, JavaScript moderne (ES6+ : let/const, fonctions fléchées, déstructuration, modules…).
      • Outils nécessaires : Node.js & npm/yarn, éditeur de code (VS Code recommandé), navigateur récent, React DevTools (extension navigateur).
  • 2. PREMIER PROJET REACT
    • Création d’un Projet React :
      • Utilisation de Vite (recommandé) ou Create React App (alternative).
      • Commande : npm create vite@latest mon-app –template react (ou CRA).
      • Exploration de la structure du projet (public, src, package.json, vite.config.js…).
      • Lancement du serveur de développement (npm run dev ou npm start).
    • Modifier le Code Source :
      • Le point d’entrée : main.jsx (ou index.js).
      • Le composant principal : App.jsx.
      • Faire ses premières modifications (texte, structure simple). Live Reload.
    • Utilisation du JSX (JavaScript XML) :
      • Syntaxe : Écrire du « HTML » dans JavaScript.
      • Différences avec HTML : className vs class, attributs en camelCase (ex: onClick).
      • Intégrer des expressions JavaScript : { variable }, { 2 + 2 }, { fonction() }.
      • Commentaires en JSX : {/* Commentaire */}.
      • Fragments (<>…</> ou <React.Fragment>…</>) pour retourner plusieurs éléments.
      • Exercice Pratique : Transformer une structure HTML simple en JSX. Afficher des variables JS dans le JSX.
  • 3. LES COMPOSANTS
    • Philosophie des Composants : Découper l’UI en blocs réutilisables et indépendants.
    • Créer un Premier Composant Fonctionnel :
      • Syntaxe : function MonComposant() { return (…); }.
      • Convention de nommage : PascalCase.
      • Exporter (export default MonComposant) et Importer (import MonComposant from ‘./MonComposant’).
      • Exercice Pratique : Créer un composant Header simple et l’intégrer dans App.jsx.
    • Afficher Plusieurs Composants : La Composition
      • Intégrer des composants dans d’autres composants.
      • Exercice Pratique : Créer un composant Footer et un composant MainContent, les afficher dans App.jsx.
    • Organisation des Fichiers :
      • Créer un dossier components.
      • Bonnes pratiques de nommage des fichiers (Header.jsx).
    • Composants Classe (Mention rapide) :
      • Présenter la syntaxe class MonComposantClasse extends React.Component { render() { … } }.
      • Expliquer leur existence (historique) mais indiquer que le focus sera sur les composants fonctionnels avec les Hooks.
  • 4. LES STATES
    • Concept du State :
      • Pourquoi ? Gérer des données qui changent au fil du temps et qui affectent l’affichage du composant.
      • Distinction : State vs Variables classiques. Le state déclenche un re-rendu.
      • Le state est local au composant.
    • Introduction au Hook useState :
      • Importer : import { useState } from ‘react’;
      • Syntaxe : const [nomVariableState, setNomVariableState] = useState(valeurInitiale);
      • Fonctionnement : setNomVariableState met à jour la variable et provoque un re-rendu.
    • Créer et Mettre à Jour le State :
      • Utiliser la fonction de mise à jour.
      • Principe d’Immutabilité : Ne jamais modifier le state directement (surtout pour objets/tableaux). Utiliser la fonction de mise à jour avec une nouvelle valeur/référence.
      • Exercice Pratique : Créer un compteur +/-. Créer un champ de saisie qui met à jour une variable de state affichée à l’écran.
  • 5. LES PROPS
    • Concept de Props (Properties) :
      • Comment passer des données d’un composant Parent à un composant Enfant.
      • Les props sont en lecture seule pour l’enfant. Flux de données unidirectionnel (Top-Down).
    • Passer des Props Simples (String, Number, Boolean) :
      • Syntaxe côté Parent : <EnfantComponent nom= »Alice » age={30} estActif={true} />.
      • Récupérer côté Enfant : function EnfantComponent(props) { … props.nom … } ou déstructuration : function EnfantComponent({ nom, age, estActif }) { … nom … }.
      • Exercice Pratique : Créer un composant Greeting qui reçoit un name en prop et affiche « Bonjour [name] ! ». L’utiliser dans App.jsx avec différents noms.
    • Passer des Données Complexes (Objets, Tableaux) :
      • Syntaxe : <UserProfile user={{ name: ‘Bob’, email: ‘…’ }} />, <ItemList items={[‘A’, ‘B’, ‘C’]} />.
      • Accès dans l’enfant : props.user.name, props.items.map(…).
      • Exercice Pratique : Créer un composant UserDetails qui affiche les détails d’un objet user passé en prop.
    • Passer des Fonctions (Callbacks) : Communication Enfant -> Parent
      • Scénario : Un enfant doit notifier le parent d’un événement (ex: clic sur un bouton).
      • Technique : Le parent passe une fonction en prop à l’enfant. L’enfant appelle cette fonction lors de l’événement.
      • Exercice Pratique : Créer un bouton dans un composant enfant qui, au clic, appelle une fonction du parent (passée en prop) pour incrémenter un compteur (géré par le state du parent).
    • La Prop Spéciale children :
      • Utilité : Créer des composants « Wrapper » ou de mise en page (Layout).
      • Syntaxe côté Parent : <Card> Contenu ici… </Card>.
      • Récupérer côté Enfant : props.children.
      • Exercice Pratique : Créer un composant Card qui affiche une bordure et un titre (prop), et rend le contenu passé entre ses balises (props.children).
  • 6. LES CONDITIONS
    • Scénarios : Afficher/masquer des éléments, choisir quel composant rendre selon une condition (state, props).
    • Techniques courantes :
      • Opérateur Ternaire : condition ? <ElementSiVrai /> : <ElementSiFaux /> (ou null).
      • Opérateur Logique && : condition && <ElementSiVrai /> (si la condition est fausse, ne rend rien).
      • Variables intermédiaires (avec if/else classique avant le return).

     

  • 7. LES BOUCLES
    • Scénarios : Afficher une liste d’utilisateurs, de produits, de commentaires…
    • Méthode Array.prototype.map() :
      • Transformer un tableau de données en un tableau d’éléments JSX.
      • Syntaxe : monTableau.map((element) => <MonComposant key={element.id} data={element} />).
    • L’Attribut key : Importance Cruciale
      • Pourquoi ? Aide React à identifier quels éléments ont changé, ont été ajoutés ou supprimés (performance, évite les bugs de state).
      • Quoi utiliser comme key ? Un identifiant unique et stable (ex: item.id). Utiliser l’index du tableau (index) est déconseillé si la liste peut changer (ordre, suppression).
  • 8. LE STYLE
    • CSS Pur et Importation :
      • Créer un fichier .css par composant ou global.
      • Importer : import ‘./MonComposant.css’;.
      • Problématique du scope global : Risques de collisions de noms de classes. Conventions (BEM…).
    • CSS Modules : Styles Scoped
      • Convention de nommage : MonComposant.module.css.
      • Importation : import styles from ‘./MonComposant.module.css’;.
      • Utilisation : className={styles.maClasse}. Génère des noms de classes uniques.
      • Avantages : Isolation des styles par composant.
    • CSS-in-JS :
      • Concept : Écrire le CSS directement dans les fichiers JavaScript.
      • Exemple avec Styled Components ou Emotion (librairies populaires).
      • Avantages : Styles scopés, styles dynamiques basés sur les props, co-localisation du style et du composant.
      • Démonstration rapide : Créer un bouton stylisé avec styled-components.
    • Styles Inline :
      • Syntaxe : style={{ color: ‘blue’, fontSize: ’16px’ }} (objet JS, propriétés en camelCase).
      • Cas d’usage : Styles très dynamiques ou spécifiques à une instance. À utiliser avec modération pour la performance et la lisibilité.
  • 9. LES HOOKS
    • Concept des Hooks :
      • Permettent d’utiliser le state et d’autres fonctionnalités React dans les composants fonctionnels.
      • Règles d’or : Appeler les Hooks au niveau supérieur, uniquement depuis des fonctions React (composants ou autres Hooks).
    • Revisite Approfondie de useState :
      • Gestion d’objets et tableaux dans le state (rappel immutabilité, utilisation du spread operator {…} / […]).
    • Le Hook useEffect : Gestion des Effets de Bord
      • Quand l’utiliser ? Actions après le rendu : appels API (fetch data), abonnements, manipulation directe du DOM (rarement).
      • Le Tableau de Dépendances :
        • [] : Exécute l’effet une seule fois après le premier rendu (montage).
        • [var1, var2] : Exécute après le premier rendu ET à chaque fois qu’une des dépendances change.
        • Absence de tableau : Exécute après chaque rendu (souvent non souhaité).
      • La Fonction de Nettoyage (Cleanup) : Essentielle pour éviter les fuites mémoire (ex: clearInterval, removeEventListener, annuler un abonnement).
      • Exercice Pratique 1 : Utiliser useEffect et Workspace pour récupérer des données depuis une API publique (ex: JSONPlaceholder) et les afficher. Gérer l’état de chargement.
      • Exercice Pratique 2 : Utiliser useEffect pour mettre à jour le titre du document (document.title) en fonction d’une variable de state.
  • 10. GESTION DES FORMULAIRES
    • Formulaires HTML Classiques en JSX :
      • Balises <form>, <input>, <label>, <select>, <textarea>, <button type= »submit »>.
      • Attribut htmlFor sur les labels.
    • Composants Contrôlés (Controlled Components) : La Méthode React
      • Principe : L’état React est la source de vérité pour la valeur des champs.
      • Implémentation
      • Exercice Pratique : Créer un formulaire simple (ex: nom, email) avec des champs contrôlés. Afficher les valeurs du state en temps réel.
    • Gestion de la Soumission du Formulaire :
      • Attribut onSubmit sur la balise <form>.
      • Fonction de handler qui reçoit l’événement (event).
      • event.preventDefault() pour empêcher le rechargement de la page.
      • Accéder aux valeurs des champs via le state à l’intérieur du handler.
      • Exercice Pratique : Ajouter un bouton de soumission au formulaire précédent. Dans le handler onSubmit, afficher les valeurs du state dans la console.
    • Gérer Différents Types de Champs :
      • Checkboxes (event.target.checked).
      • Radio buttons (même name, value différent).
      • Select (event.target.value).
    • Gérer la Validation Côté Front (Manuellement) :
      • Stratégies : Validation onChange ou onSubmit.
      • Ajouter un state pour les erreurs (useState({})).
      • Fonctions de validation simples (champ requis, format email, longueur minimale…).
      • Afficher les messages d’erreur conditionnellement (erreur.email && <p>{erreur.email}</p>).
      • Désactiver le bouton de soumission si erreurs.
      • Exercice Pratique : Ajouter une validation simple (champs requis) au formulaire créé la veille. Afficher les messages d’erreur.
    • Introduction aux Librairies de Formulaires (Mention) :
      • Pourquoi ? Simplifient la gestion de formulaires complexes (state, validation, soumission).
      • Exemples populaires : React Hook Form, Formik.
      • Bénéfices : Moins de code répétitif, gestion de la validation (ex: avec Yup), performance.

Version 4. Mise à jour le 01/01/2025
© EXPERTISME – Groupe SELECT® 2025 Tous droits réservés. Les textes présents sur cette page sont soumis aux droits d’auteur.

Pré-requis

Avoir des connaissances en HTML, CSS, JS, GIT (Optionnel)

Être muni d’un ordinateur relié à Internet, possédant une caméra, un micro et un haut-parleur.

Points forts de la formation

  • Votre plan pédagogique de formation sur-mesure avec l’évaluation initiale de votre niveau de connaissance du sujet abordé
  • Des cas pratiques inspirés de votre activité professionnelle, traités lors de la formation
  • Un suivi individuel pendant la formation permettant de progresser plus rapidement
  • Un support de formation de qualité créé sur-mesure en fonction de vos attentes et des objectifs fixés, permettant un transfert de compétences qui vous rende très rapidement opérationnel
  • Les dates et lieux de cette formation sont à définir selon vos disponibilités
  • Animation de la formation par un Formateur Expert Métier
  • La possibilité, pendant 12 mois, de solliciter votre Formateur Expert sur des problématiques professionnelles liées au thème de votre formation
  • Un suivi de 12 mois de la consolidation et de l’évolution de vos acquis.

Approche Pédagogique

L’approche pédagogique a été construite sur l’interactivité et la personnalisation : Présentation illustrée et animée par le Formateur Expert, partage d’expériences, études de cas, mise en situation réelle.
Tous les supports sont fournis par support papier, mail ou clé USB à chaque stagiaire.

Méthodologie pédagogique employée :
Chaque formation en présentiel ou en distanciel est animée par un Formateur Expert Métier sélectionné selon ses compétences et expériences professionnelles. Apport d’expertise du Formateur, quiz en début et fin de formation, cas pratiques, échanges d’expérience. Accès en ligne au support de formation.

Méthodes utilisées et évaluation :
Evaluation et positionnement lors de la définition du projet pédagogique avec le(s) stagiaire(s). Un QCM est donné aux stagiaires le dernier jour de la formation pour valider leurs apprentissages. Une correction collective est effectuée par le Formateur. Une évaluation de fin de stage en direct est organisée entre le Formateur et le(s) stagiaire(s) pour recueillir et prendre en compte leurs appréciations. Une attestation de fin de stage est remise aux stagiaires.

Accessibilité

Toute demande spécifique d’accessibilité à la formation par des personnes handicapées donnera lieu à une attention particulière et, si nécessaire, à une adaptation des supports de formation.
Public en situation de handicap, contactez notre référent handicap au 01 42 66 36 42.

Formateur

Nos Formateurs sont des Experts Métiers qui interviennent sur le thème de la formation. Ils réalisent les audits et co-construisent l’offre et le parcours de formation avec l’Ingénieur Pédagogique avant validation par le Responsable Pédagogique. Ils sont sélectionnés pour leurs compétences pédagogiques et leur expérience en formation d’adultes.

Référence : LWEB-86302

Durée : 35 heures soit 5 jours

Tarif : 4.875 € HT / Personne

Cette formation vous intéresse ?

Nos Experts conçoivent votre formation
individuelle sur mesure lors de la définition
de votre projet pédagogique !

Remplissez le formulaire suivant :

L’un de nos conseillers vous contactera
dans les meilleurs délais.

Contactez-nous
Je demande un devis

Partagez cette formation :

Référence : LWEB-86302

Durée : 35 heures soit 5 jours

Tarif : Sur Devis

Formez vos équipes !

à partir de 4 collaborateurs
Nos Experts conçoivent votre formation intra-entreprise sur mesure lors de la définition de votre plan pédagogique !

Contactez-nous
Je demande un devis

Partagez cette formation :

Votre parcours de formation

Étape par Étape

Je découvre

Formations complémentaires - Formations Javascript / JS / Programmation Web sur-mesure

Vous avez besoin
d’une formation ?

Vous avez
besoin
d’une
formation ?

Contactez-nous
Activateur
France Num

Contact

Tél. : 01 42 66 36 42
[email protected]

52, rue du Faubourg Saint-Honoré
75008 Paris

Suivez-nous
Espace Client
Suivez-nous
Notre Newsletter
Inscrivez-vous à
notre Newsletter
Contact

Tél. : 01 42 66 36 42
[email protected]

52, rue du Faubourg Saint-Honoré 75008 Paris

Suivez-nous
Espace Client
Suivez-nous
Inscrivez-vous à
notre Newsletter
Activateur
France Num

Mentions légales -
Politique de confidentialité

2025 © Expertisme - Tous droits réservés

VOUS AVEZ UN PROJET ?