Ce site est une version en lecture seule. Pour vous abonner ou gérer votre compte, veuillez vous rendre sur le site www.elephorm.com

Structure du code

  • Vidéo 24 sur 36
  • 2h55 de formation
  • 36 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Structure du code
00:00 / 04:53
HD
fullscreen

Sommaire de la formation

Détails de la formation

Dans ce cours en ligne sur ReactJS, le formateur vous montre la structure du code. L’objectif de cette formation est d’améliorer le code source de l’application. Pour commencer, vous créez un nouveau composant que vous nommez TweetBox dans lequel vous ajoutez un index et un fichier de style. Cette action faite, vous éditez le script index.js en y écrivant export {default} from ‘./TweetBox’. Vous allez ensuite dans le script TweetBox et vous éditez l’entête du script comme suit import React, {Component} from ‘react’ ;. Cet entête signifie que vous importez la classe Component dans le projet. Suite à cette action, vous créez une classe TweetBox qui hérite de la classe Component. Pour y parvenir, vous implémentez le code class TweetBox extends Component{}. Vous éditez ensuite cette classe en y implémentant des JSX entre les accolades. Dans le cadre de l’application du code, vous affichez un titre TweetBox à l’aide de la méthode render(). Pour afficher un grand titre, vous utilisez la balise h1 pour le hiérarchiser. Quant à la matérialisation du titre, vous retournez le JSX à l’aide de la fonction return et la syntaxe se présente comme suit return(TWEETBOX). Vous passez après dans le container principal et vous ajoutez le JSX de entre la balise Home. Pour vérifier le fonctionnement du script, vous allez dans le navigateur et vous lancez le mode développeur. Pour lancer le mode développeur, vous utilisez le raccourci Ctrl +Shift +I sous Chrome. Un des avantages du mode développeur est qu’il vous permet d’effectuer un débogage du programme. De ce fait, vous pouvez détecter les erreurs et voir comment fonctionne l’application. Vous observez alors que l’affichage du titre TweetBox s’effectue avant l’affichage des tweets. Pour conclure, cette formation en ligne sur ReactJS vous a montré comment matérialiser un titre en utilisant une technique avancée de la programmation qui est l’héritage.