Dans ce tutoriel, nous allons voir comment commencer à créer une application React et essayer de comprendre les bases de JSX. Le didacticiel suppose que vous maîtrisez bien le langage HTML et JavaScript..

Qu'est-ce que React?

React est une bibliothèque JavaScript développée par Facebook pour gérer facilement l'interface utilisateur des applications Web. L'un des principaux avantages de React est qu'il permet de créer des composants d'interface utilisateur gérables, ce qui facilite la mise à l'échelle d'applications Web volumineuses. React fonctionne sur le concept de Virtual DOM, où il conserve une image miroir du DOM actuel. Chaque fois qu’une modification est apportée, React exécute un processus, identifie la modification et la met à jour dans le DOM actuel. Le concept de Virtual DOM accélère le rendu des applications et améliore les performances.

Qu'est-ce que JSX??

JSX est une extension de syntaxe JavaScript qui ressemble à XML. Voici un exemple:

ReactDOM.render ( 
Bienvenue React, TutsPlus !!
, document.getElementById ('conteneur'));

Le code JSX ressemble au HTML mais est en réalité un mélange de JavaScript et HTML. Le code ci-dessus rend le message à l'intérieur du h1 tag dans le récipient élément. JSX est plus rapide que JavaScript car il effectue une optimisation lors de la compilation du code source. JSX est également préféré car il est plus facile à utiliser que du code JavaScript simple.

De la documentation officielle:

JSX est une extension de syntaxe de type XML à ECMAScript sans sémantique définie. Ce n'est pas destiné à être mis en œuvre par les moteurs ou les navigateurs. Ce n'est pas une proposition d'intégrer JSX dans la spécification ECMAScript elle-même. Il est destiné à être utilisé par divers préprocesseurs (transpilers) pour transformer ces jetons en ECMAScript standard..

Pourquoi utiliser JSX?

L'utilisation de JSX lorsque vous travaillez avec des applications React n'est pas vraiment nécessaire. Vous pouvez aller avec le vieux code JavaScript simple. Mais utiliser JSX a ses propres avantages:

1. Comparé à JavaScript, il est plus facile d’écrire en JSX. C'est aussi simple que d'ouvrir et de fermer des balises XML. Voici un exemple JSX:

 
Bienvenue sur TutsPlus
 

Voici le code React compilé: 

"use strict"; React.createElement ("div", null, React.createElement ("p", null, "Bienvenue dans TutsPlus"));

2. Le code JSX assure la lisibilité et facilite la maintenabilité.

3. JSX optimise le code lors de la compilation, de sorte qu'il s'exécute plus rapidement que le code JavaScript équivalent.

Commencer

Apprenons plus loin en écrivant du code JSX et en le rendant dans le navigateur. Pour commencer à créer une application React, créez un simple index.html page avec la structure de page suivante:

Comme indiqué dans le code ci-dessus, nous avons référencé le réagir et réact-dom scripts dans le index.html page. Nous avons également utilisé le babel référence de script, qui transformerait le code JSX pour réagir aux appels de fonction. Par exemple, considérons le code JSX suivant:

var grp = 
 
Bienvenue sur TutsPlus
 
;

Babel transformerait le code JSX ci-dessus en fonction de réaction requise, comme indiqué:

var grp = React.createElement ("div", null, React.createElement ("p", null, "Bienvenue dans TutsPlus"));

Écrire des composants React en utilisant JSX

Créons un composant React qui afficherait un message de bienvenue. Voici à quoi ressemblerait le code:

Message est un composant de réaction qui renvoie ce qui précède JSX code, qui est ensuite compilé en code de fonction React en utilisant Babel. En utilisant ReactDOM.render, nous rendons le composant à l'intérieur de l'élément HTML div principale. 

Enregistrez les modifications ci-dessus et essayez de parcourir la index.html page dans le navigateur, et vous devriez pouvoir voir le message Bienvenue sur TutsPlus dans le navigateur.

Passage d'attributs à des composants

La plupart du temps, il est nécessaire de transmettre des données à nos composants, qui seraient évaluées ou modifiées, puis restituées. Voyons comment nous pouvons passer des attributs à nos composants et afficher les données.

Supposons que nous voulions donner un nom à notre Message composant et afficher le nom dans notre message. Tout d'abord, nous allons ajouter un attribut personnalisé à notre composant.

ReactDOM.render (,document.getElementById ('main'));

L'attribut passé peut être lu à l'intérieur de la fonction de rendu du composant à l'aide de this.props sur la clé de composant. Modifiez le code comme indiqué ci-dessous:

var Message = React.createClass (render: function () return 
Bienvenue sur TutsPlus, this.props.name
 );

Enregistrez les modifications ci-dessus et parcourez les index.html page et vous devriez pouvoir voir le message.

Bienvenue à TutsPlus, Roy

Création d'un composant Google Map React à l'aide de JSX

Maintenant que nous maîtrisons JSX et que nous créons des composants React à l'aide de JSX, essayons de créer un composant React pour afficher Google Maps.. 

Commencez par ajouter une référence à l'API Google Maps dans le index.html.

Créer un Ma carte composant comme indiqué ci-dessous:

var MyMap = React.createClass (render: function () return ( 
 ) ); ReactDOM.render (,document.getElementById ('main'));

Ajouter une méthode appelée composantDidMount dans le composant React, et à l'intérieur de cette méthode, définissez les variables liées à la carte comme indiqué:

var MyMap = React.createClass (composantDidMount: function () var latLong = nouveau google.maps.LatLng (-47.888723, 444.675360); var options = zoom: 2, centre: latLong, map = nouveau google.maps. Map (ReactDOM.findDOMNode (this), options), marker = new google.maps.Marker (map: map, animation: google.maps.Animation.BOUNCE, position: latLong);, rendu: function ()  revenir ( 
 ) );

le composantDidMount La méthode est appelée immédiatement après le rendu initial et tous les objets de la carte sont initialisés dans cette méthode.. ReactDOM.findDOMNode trouve une référence au nœud DOM du composant et crée l'objet de la carte. marqueur a été défini pour définir les propriétés du marqueur comme carte, position, et animation.

Essayez de rendre le composant de carte à l'intérieur du #principale div.

ReactDOM.render (,document.getElementById ('main'));

Enregistrez les modifications ci-dessus et essayez de parcourir la index.html page, et vous devriez pouvoir voir Google Maps en action.

Envelopper

Dans ce tutoriel, nous avons vu une introduction de base à React et à JSX pour vous aider à démarrer. Nous avons vu comment créer des composants React à l'aide de JSX et avons également créé un composant Google Map React. Dans les prochains tutoriels, nous nous concentrerons sur quelques fonctionnalités supplémentaires de React..

Le code source de ce tutoriel est disponible sur GitHub.

Avez-vous essayé de créer un composant React récemment? J'aimerais entendre votre expérience. Faites-moi savoir vos pensées dans le commentaire ci-dessous.