• 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 08/02/2024

Créez votre première application complète avec Create React App

Compétences évaluées

  • Créer une application React complète
  • Question 1

    Create React App est un outil qui sert à :

    • créer une base de code avec des outils préconfigurés.

    • installer React Router.

    • écrire du code.

    • styliser une application node.

  • Question 2

    La base de code que nous avons initialisée contient un certain nombre de fichiers. Le fichier  package.json   a une importance particulière puisqu'il permet de :

    Attention, plusieurs réponses sont possibles.
    • Gérer les dépendances.

    • Gérer les scripts.

    • Importer les fichiers nécessaires.

    • Connecter React au  index.html  .

    • Lancer les tests automatisés.

    • Lancer le build de l’application.

    • Générer un fichier HTML unique.

    • Transformer votre code JavaScript en PHP.

  • Question 3

    Vous avez un tableau de strings pour vos catégories de plantes comme ci-dessous :

    const categories = ["plantes d'ombre", "cactus", "plantes d'extérieur", "plantes pour débutants", "plantes fleuries"]
    

    Quel snippet de code en JSX vous permet de créer un composant qui génère facilement et proprement une liste d'éléments React ? Attention, le code ne doit produire aucune erreur dans la console !

    • <ul>
          {categories.map(category => <li>
          {category}
          </li>;)}
      </ul>
      

       

    • <ul>
          {categories.map((category, index) => <li key={`${category}-${index}`}>
          {category}
          </li>;)}
      </ul>
      

       

    • <ul>
          <li>plantes d'ombre</li>
          <li>cactus</li>
          <li>plantes d'extérieur</li>
          <li>plantes pour débutants</li>
          <li>plantes fleuries</li>
      </ul>
      

       

    • <ul>
          {categories.filter(category => category.length > 0)}
      </ul>
      

       

    •  const i = 0
          while(i < categories.length) {
              ++i
              return <li>{categories[i]}</li>
          }
       }
      
Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous