Dans cet article, je vais vous montrer comment créer votre première application “react.js”. Aucune compétence n’est requise à part une petite connaissance des notions de base en JavaScript et en HTML.
Notez bien que nous sommes là pour apprendre les pratiques de base et comprendre le mécanisme et ce n’est pas necessaire (entant que débutants) de commencer la pratique en essayant d’ajouter trop de fonctionnalités (même si simples qu’elles vous semblent!) cela risque de compliquer inutilement votre apprentissage.Quand vous arriverez à maitriser les notions et les pratiques de base, vous pourriez ajouter ce qui vous semble nécessaire à tout moment.
Nous allons créer l’application. “react.js” sous sa forme la plus simple. Le résulltat en fin de projet ressemblera à ça:
En observant à quoi ressemble le projet final, dire que c’est une application paraîtra une exagération!On dirait une page de profil (comme vous le voyez à l’image) et non une application.
La procédure de la création de l’application “react.js” passe par quatres majeures étapes: décomposer la page, écrire notre premier composant, ajoutez les autres composants et enfin ajouter les données correctes à notre projet. Passons à la pratique.
Table Des Matières
Tache -1: Décomposons notre page:
Comme toute application, “react.js” est un ensemble de composants; Ce que vous voyez sur la page sont des éléments faisant partie d’un composant. Avant de commencer le codage, se serait une bonne idée de créer un croquis des composants, comme nous l’avons fait içi:
Le composant principal est marqué en rouge, c’est le composant (parent) qui enveloppe tous les autres composants (enfants). ce composant n’est autre que l’application “react.js” elle même puisqu’il inclue tous les autres composants (enfants).
Une fois que nous avons compris que cette application est notre composant principal dite composant parent, nous saurons facilement que les sous-composants seront les composants enfants.
Je dirais que le nom et l’image de profil peuvent être regroupés en un composant enfant, que nous appelerons Profile (rectangle jaune), et la section Hobbies peut être un autre composant enfant (rectangle bleu).
La structure de nos composants peut également être visualisée de la manière suivante:
Nous pourrions diviser davantage les composants en volets; Comme ProfileImage et HobbyItem, mais nous allons nous arrêter ici pour des raisons de simplicité.
Tache -2: Écrivons notre premier composant
Avant de commencer le codage, vous devez télécharger le fichier source. Il est disponible içi. Il suffit d’ouvrir le fichier index.html dans le navigateur ou avec Wordpad. (Le code complet est disponible dans le fichier intitulé finished_project.html).
J’ai configuré correctement le fichier, de sorte que vous verrez des liens vers le code source de l’application “react” et les autres bibliothèques nécessaires dans la section <head /> du fichier. Votre code commencera à la ligne 12.
Pour un projet approprié, vous n’utiliseriez pas cette configuration. Mais je ne veux pas que ce tutoriel soit autre chose que le codage dansReact, alors nous le simplifierons.
Ok alors, écrivons notre premier composant:
Sur la première ligne, nous créons un composant appelé “createClass” sur l’objet React.
Nous passons par un seul paramètre, le soi-disant objet de spécification “specification object”. Cet objet peut avoir autant de méthodes que vous voulez, bien que la plus importante soit la méthode de rendu “render”. Dans cette méthode, vous renvoyez “return” ce que vous voulez que “react” dessine sur la page. Dans notre cas, nous voulons simplement créer une balise “div” avec le texte “Hello World”.
Ensuite, suivez ceci:
C’est ainsi que nous spécifions l’endroit où nous voulons que le composant de l’application soit rendu. Cela se fait en appelant“ReactDOM.render”, passer dans le composant App comme premier argument et comme référence à un div avec l’Id du contenu comme deuxième. Notre application entière ira dans cette division de contenu “div”.
Actualisez la page et vous verrez ‘Hello World’ imprimé sur l’écran.
Tache -3: Ajoutons les autres composants
Ajoutons d’autres composants. En ce qui concerne l’aperçu de nos composants, nous avons vu que le composant de l’application (composant parent) a deux composants enfants appelés “Profile” et “Hobbies”.
Écrivons ces deux composants. Nous commencerons par “Profile”:
Il n’y a rien de nouveau ici. Juste un peu plus de contenu dans “return” qu’il en était dans “App”
Écrivons le composant “Hobbies”:
Toutefois, si vous actualisez la page, vous ne verrez aucun de ces composants.C’est dû au fait que seul le composant de l’application (parent) a été rendu dans DOM. Nous devrons modifier le composant de l’application (parent) afin de transformer “profile” et “Hobbies” en composants enfants. C’est ce que nous allons faire tout de suite:
Si vous actualisez la page, vous verrez que tout le contenu apparaît sur la page. (Bien que l’image n’apparaisse pas, car le lien que nous avons ajouté n’est pas coerrect).
Tache -4: ajouter les données correctes à notre projet
Maintenant que nous avons configuré la structure de base, nous sommes prêts à ajouter les données correctes à notre projet.
React a quelque chose appelé un flux de données directionnel “one directional data flow“, ce qui signifie que les données sont transmises des composants parent aux composants enfants.
Collez ce code au dessus de tous les composants:
var DATA = {
name: 'John Smith',
imgURL: 'http://lorempixel.com/200/200/',
hobbyList: ['coding', 'writing', 'skiing']
}Vous pouvez imaginer que ces données soient extraites d’une API conçue et publiée par d’autres organismes.
Une API (Application Programming Interface) est une Interface Applicative de Programmation qui permet d’établir des connexions entre plusieurs logiciels pour échanger des données. Plus techniquement, il s’agit d’un ensemble de fonctions qui vont permettre à un développeur d’utiliser simplement une application dans son programme.
La prochaine chose que nous devons faire est d’ajouter ces données aux composants de l’application comme accessoires ” props”.
Les données dans React sont traitées comme “props” ou “state”. Nous ne prendrons que les “props” dans ce tutoriel. En général, les “props”sont immuables et peuvent être partagés entre les composants, tandis que les “state” sont mutables et privés.
Ci-dessous, vous verrez comment vous transmettez les données dans le composant de l’application, en changeant simplement un peu sur la méthode “ReactDOM.render”. C’est la même façon quand vous ajoutez des attributs dans un HTML normal.
Le crochet informe React que nous allons nous échapper de la syntaxe JSX pour ajouter une expression Javascript (DATA).
Maintenant, nous pouvons accéder à ces données à partir du composant “App” à l’aide de “this.props.profileData”. Cependant, le composant de l’application est simplement une enveloppe autour des composants “Profile” et “Hobbies”, nous allons donc envoyer les données plus loin dans la hiérarchie, en utilisant la même technique que celle décrite ci-dessus.
C’est ainsi que nous passons les données du composant parent“App” aux composants enfants:
Nous passons le profil de l’image et le nom au composant “Profile”, alors que seul la liste des loisirs se classe dans le composant “Hobbies”. Vu que le composant ” Hobbies” n’a pas besoin du reste des données; Il va simplement afficher une liste de loisirs.
Examinons la façon dont nous devrons réécrire l’ordre du composant “Profile” pour utiliser les données que nous leur avons transmises:
Nous nous sommes tout simplement echapés de la syntaxe JSX par les accolades et récupérez les données à partir de “this.props”.
Dans le composant “Hobbies”, nous avons besoin d’utiliser une technique pour boucler à travers “Hobbies”.
Comme vous pouvez le voir, nous effectuons une boucle dans le tableau des “hobbies” stocké dans this.props.hobbies. Nous utilisons le tableau prototype de la methode “map”, qui crée un nouveau tableau basé sur tout ce que nous renvoyons dans “callback function”.
Une fois que nous avons stocké tous les éléments de la liste dans la variable “var hobbies”, nous l’ajoutons simplement à l’instruction “return”, de sorte qu’il sera rendu à l’écran.
Voilà le fameux code complet:
Et c’est ainsi que vous pourriez construire votre premier projet React.js!
vous utilisez l’ancienne version de react, fait le mise à jour:
class Profile extends React.Component {
render() {
return
Hello{this.props.name}
}
}