Remarque: Certains navigateurs (par exemple, Chrome) ne chargeront pas le fichier, sauf s'il est servi via HTTP. Assurez-vous donc que vous utilisez un serveur local. Je recommande le projet browsersync.

Transformation hors ligne

Vous pouvez également utiliser l'interface de ligne de commande (CLI) pour transformer votre JSX à l'aide des outils de ligne de commande babel. Ceci est facilement acquis via la commande npm:

$ sudo npm install --global babel 

le --global ou -g flag for short installera globalement le paquet babel pour qu'il soit disponible partout. C'est une très bonne pratique d'utilisation de Node pour plusieurs projets et outils de ligne de commande..

Maintenant que babel est installé, faisons la traduction du helloworld.js nous venons de créer à l'étape précédente. A l'invite de commande du répertoire racine où vous avez dézippé le kit de démarrage, exécutez:

$ babel src --watch --out-dir build 

Maintenant le dossier build / helloworld.js sera généré automatiquement chaque fois que vous apportez un changement! Si vous êtes intéressé, lisez la documentation CLI de Babel pour approfondir vos connaissances..

Maintenant que babel a généré le build / helloworld.js, qui ne contient que du code JavaScript simple, mettez à jour le code HTML sans balises de script compatibles Babel.

Donc, pour récapituler, avec babel, nous pouvons charger JSX directement dans un scénario tag via le texte / babel attribut de type. C'est utile pour le développement, mais pour la production, nous pouvons fournir un fichier JavaScript généré pouvant être mis en cache sur la machine locale de l'utilisateur..

La génération de cette copie est effectuée sur la ligne de commande. Comme il s’agit là d’une tâche répétitive, il est vivement recommandé d’automatiser le processus à l’aide de la commande --regarder drapeau. Ou vous pouvez aller plus loin et utiliser Webpack et Browsersync pour automatiser entièrement votre flux de travail de développement. Pour le faire de la manière la plus simple possible, nous pouvons automatiser la configuration d'un nouveau projet avec un générateur Yeoman..

Installation avec un échafaudage Yeoman

Yeoman est un outil très utile pour démarrer des projets rapidement avec un flux de travail et une configuration d'outils optimaux. L'idée est de vous laisser consacrer plus de temps au développement qu'à la configuration de la zone de travail du projet et à minimiser les tâches répétitives (sachez que RSI est la raison numéro un pour laquelle les codeurs arrêtent de coder). Donc, comme meilleure pratique, gagner du temps avec les outils et mettre en œuvre D.R.Y (ne vous répétez pas) dans votre vie quotidienne améliorera votre santé et votre efficacité, et vous laissera passer plus de temps à créer du code réel plutôt que de le configurer..

Il y a beaucoup d'échafaudages, de différentes saveurs pour différentes échelles de projet. Pour ce premier exemple, nous utiliserons le réagir à plein échafaudages des générateurs Yeoman; vous pouvez voir une démonstration de ce à quoi ressemble le résultat final.

Remarque: Il s’agit d’une configuration à pile complète, qui est probablement excessive pour tous les petits projets. La raison pour laquelle j'ai choisi cet échafaudage est pour vous donner un environnement entièrement configuré, de sorte que vous puissiez voir comment le kit de démarrage se transforme en une application plus grande. Il y a un en-tête et un pied de page, et vous pouvez voir où iront les fonctions de connexion et d'enregistrement d'un utilisateur, bien qu'elles ne soient pas encore codées dans l'exemple..

Usage

Pour utiliser yeoman, installez-le d'abord, et si vous n'avez pas l'équivalent requis de yeoman gorgée, tonnelle et grunt-cli, installez-les comme suit:

$ sudo npm installer -g yo bower grunt-cli gulp 

Maintenant, installez l'échafaudage React avec:

$ sudo npm installer -g générateur-réagir-fullstack 

Maintenant, créez un répertoire pour votre projet et CD à cela:

$ mkdir react-project $ cd rea-project 

Enfin utiliser le yo commande avec le générateur d'échafaudage React-fullstack pour créer votre application de réaction dans le répertoire:

$ yo réagit-fullstack 

Yeoman va maintenant créer les répertoires et les fichiers nécessaires; vous pourrez voir les mises à jour à ce sujet en ligne de commande.

Avec l'échafaudage maintenant configuré, construisons notre projet:

$ npm start 

Par défaut on commence dans déboguer mode, et pour aller vivre nous ajoutons simplement le -- Libération drapeau, par exemple. npm run start - release.

Vous verrez maintenant le démarrage de la construction et l'initialisation du webpack. Une fois cela fait, vous verrez la sortie du webpack vous donner des informations détaillées sur la construction et les URL auxquelles accéder.

Accédez à votre application via les URL répertoriées à la fin de la sortie, avec votre navigateur par défaut à l'adresse http: // localhost: 3000. Pour accéder à l'interface d'administration du navigateur de synchronisation, accédez à http: // localhost: 3001.

Remarque: vous devrez peut-être ouvrir le port de votre serveur pour le port de développement. Pour les utilisateurs Ubuntu / Debian avec ufw, faire ce qui suit:

$ ufw permettre 3001 / tcp $ ufw permettre 3000 / tcp 

Conversion de votre site existant en JSX

Facebook fournit un outil en ligne si vous devez simplement convertir un extrait de votre code HTML en JSX..

Pour les besoins plus importants, il existe un outil sur npm pour celui nommé htmltojsx. Téléchargez-le avec:

npm installer htmltojsx 

Son utilisation via la ligne de commande est aussi simple que:

$ htmltojsx -c MyComponent existants_code.htm 

Parce que htmltojsx est un module de nœud, vous pouvez également l'utiliser directement dans le code, par exemple:

var HTMLtoJSX = require ('htmltojsx'); var converter = new HTMLtoJSX (createClass: true, outputClassName: 'HelloWorld'); var output = converter.convert ('
Bonjour le monde!
'); 

Exemple de liste

Commençons à créer une liste de tâches de base afin que vous puissiez voir le fonctionnement de React. Avant de commencer, veuillez configurer votre IDE. Je recommande d'utiliser Atom.

À l'invite bash, installez les linters pour React via apm:

apm install linter-linter-eslint react Installation de linter dans /Users/tom/.atom/packages ✓ Installation de linter-eslint dans /Users/tom/.atom/packages ✓ Installation de react à /Users/tom/.atom/packages ✓ 

Remarque: la dernière version de linter-eslint mon MacBook Pro était très lent, je l’ai donc désactivé.

Une fois cela fait, nous pouvons commencer à créer une liste de base dans l’échafaudage que nous avons créée à l’étape précédente avec Yeoman, pour vous montrer un exemple concret du flux de données..

Assurez-vous que votre serveur est démarré avec npm start, et maintenant commençons à faire des changements.

Tout d’abord, il existe trois fichiers de modèle de jade fournis dans cet échafaudage. Nous ne les utiliserons pas pour l'exemple, alors commençons par vider le index.jade fichier donc c'est juste un fichier vide. Une fois le fichier sauvegardé, vérifiez votre navigateur et la sortie du terminal..

La mise à jour est affichée instantanément, sans aucune actualisation. Il s’agit de la configuration du pack Web et de la navigation avec le navigateur fournie par l’échafaudage qui entre en vigueur..

Ensuite, ouvrez le répertoire des composants et créez un nouveau répertoire:

$ cd composants $ mkdir UserList 

Maintenant, à l'intérieur du Liste d'utilisateur répertoire, créer un package.json fichier avec les éléments suivants:

"name": "UserList", "version": "0.0.0", "private": true, "main": "./UserList.js" 

Aussi, toujours à l'intérieur du Liste d'utilisateur répertoire, créez le UserList.js déposer et ajouter ce qui suit:

// Import React import React, PropTypes, Component depuis 'react'; // Création de la classe de composants UserList UserList extend Component // La méthode principale render est appelée dans tous les composants pour display render () // Ne commentez pas ci-dessous pour voir l'objet dans la console //console.log(this.props.data ) // Itère les données fournies ici var list = this.props.data.map (function (item) return 
item.first item.last
 ); // Retourne le retour de l'affichage ( 
 liste 
 )  // Rendez-le accessible au reste de l'application, export User default par défaut; 

Pour terminer, nous devons ajouter des données pour cette liste. Nous ferons cela à l'intérieur composants / ContentPage / ContentPage.js. Ouvrez ce fichier et définissez le contenu comme suit:

/ *! Kit de démarrage React | Licence MIT | http://www.reactstarterkit.com/ * / import React, PropTypes, Component de 'react'; importer les styles de './ContentPage.css'; importer withStyles à partir de '… /… / décorators / withStyles'; importer UserList de '… / UserList'; // Ici nous importons le composant UserList que nous avons créé @withStyles (styles), classe ContentPage étend Component static propTypes = chemin: PropTypes.string.isRequired, contenu: PropTypes.string.isRequired, title: PropTypes.string,; static contextTypes = onSetTitle: PropTypes.func.isRequired,; render () // Définit des données pour la liste var listData = [premier: 'Peter', dernier: 'Tosh', premier: 'Robert', dernier: 'Marley', premier: 'Bunny' , dernier: 'Wailer',]; this.context.onSetTitle (this.props.title); revenir ( 
 
 this.props.path === '/'? nul : 
this.props.title
  
 // Utiliser le composant UserList en tant que JSX  
 
 )  export par défaut ContentPage; 

Maintenant, lorsque nous enregistrons, le pack Web sera reconstruit et Browsersync affichera les modifications dans votre navigateur. Regardez le code source pour voir comment il a été rendu..

Résumé

Nous avons utilisé le générateur d'échafaudage Yeoman réagir à plein démarrer une application Web React basée sur le kit de démarrage. Pour une explication plus détaillée de la disposition des fichiers et des répertoires, consultez le fichier Lisez-moi dans le dossier de démarrage du réacteur git.

De là, nous avons édité le index.jade le fichier a donc été annulé et a commencé à créer notre propre vue, créant ainsi un nouveau composant nommé Liste d'utilisateur.

À l'intérieur composants / UserList / UserList.js nous définissons comment la liste sera rendue avec:

var liste = this.props.data.map (function (item) return 
item.first item.last
 ); 

Il est important de noter ici que React exige que tous les éléments itérés aient un identifiant unique fourni sous clé attribut.

Pour afficher la liste, nous l'incluons à l'intérieur du ContentPage.js déposer avec importer UserList de '… / UserList'; et définir des données de test avec:

 var listData = [premier: 'Peter', dernier: 'Tosh', premier: 'Robert', dernier: 'Marley', premier: 'Bunny', dernier: 'Wailer',]; 

À l'intérieur ContentPage.js nous appelons le Liste d'utilisateur composant avec le JSX .

Maintenant le Liste d'utilisateur composant peut accéder à la Les données attribut via this.props.data.

Chaque fois que nous passons une valeur avec l'attribut d'un composant, il est possible d'y accéder via this.props. Vous pouvez également définir le type de données à fournir à l’aide de la touche propTypes variable statique dans sa classe.

Composants étendus et syntaxe React.createClass

Enfin, il convient de noter que cet exemple utilisait des composants étendus. Cela présente de nombreux avantages pour la structuration sémantique de votre code. Mais vous voudrez peut-être accéder à une approche plus simple, comme le font de nombreux autres exemples..

Donc au lieu de class ComponentName étend le composant que vous avez déjà vu dans ce didacticiel, vous créez une classe React avec la syntaxe suivante, par exemple:

var MyListItem = React.createClass (render: function () return 
this.props.data.text
; ); var MyNewComponent = React.createClass (render: function () return ( 
 this.props.results.map (function (result)) return ; ) 
 ) ); 

Cela nous conclut pour cette introduction à React. Vous devriez maintenant avoir une bonne compréhension de ce qui suit:

• se faire réagir
• comment utiliser Babel avec React
• en utilisant JSX
• création d'un composant via la méthode extend
• en utilisant votre composant et en lui passant des données

Dans les prochaines parties, nous verrons comment utiliser davantage JSX, comment utiliser une base de données en tant que source de données persistante, et comment React fonctionne avec d'autres technologies Web populaires telles que PHP, Rails, Python et .NET..