React est une bibliothèque de vues écrite en JavaScript. Elle est donc indépendante de toute configuration de pile et peut apparaître dans pratiquement toutes les applications Web utilisant HTML et JavaScript pour sa couche de présentation..

Comme React fonctionne comme le "V" dans "MVC", nous pouvons créer notre propre pile d'applications à partir de nos préférences. Jusqu'à présent, nous avons vu dans ce guide React fonctionner avec Express, un framework basé sur Node ES6 / JavaScript. D'autres correspondances populaires basées sur les nœuds pour React sont le framework Meteor et le relais de Facebook..

Si vous souhaitez tirer parti de l'excellent système JSX de React, du DOM virtuel et de ses temps de rendu ultra-rapides avec votre projet existant, vous pouvez le faire en implémentant l'une des nombreuses solutions open source..

PHP

Comme PHP est un langage de script côté serveur, l'intégration à React peut prendre plusieurs formes:

• Utiliser react-php-v8js
• Gestion de la route de requête / réponse côté serveur (avec un routeur, par exemple Alto)
• Sortie JSON via json_encode ()
• Enveloppement de modèle, par exemple Brindille

Rendu côté serveur

Pour rendre les composants React sur le serveur, une bibliothèque est disponible sur GitHub..

Par exemple, nous pouvons faire ce qui suit dans PHP avec ce package:

"php

$ rjs = new ReactJS ($ react_source, $ app_source); $ rjs-> setComponent ('MyComponent', array ('any' => 1, 'props' => 2));

// imprimer le rendu du balisage echo '

// charge JavaScript d'une manière ou d'une autre - concaténée, à partir de CDN, etc. // y compris react.js et custom / components.js

// init client echo '';

// répète setComponent (), getMarkup (), getJS () si nécessaire // pour rendre plus de composants "

La possibilité de combiner React avec n’importe quel langage de script côté serveur réside dans sa capacité à alimenter React avec des données et à appliquer votre logique métier au serveur ainsi qu’au côté client. Rénover une ancienne application en application Reactive n'a jamais été aussi simple!

Utiliser PHP + Alto Router

Pour un exemple d'application, jetez un coup d'œil à ce référentiel sur GitHub.

Configurez votre AltoRouter comme tel:

"php

// correspond au routeur // - // Manuel $ routeur-> map ('GET', '/', $ viewPath. 'Reactjs.html', 'reactjs');

$ result = $ viewPath. «404.php»;

$ match = $ routeur-> match (); if ($ match) $ resultat = $ match ['cible'];

// Correspondance d'itinéraire de retour include $ result;

?> "

Avec le AltoRouter configuration servant les pages de votre application pour les itinéraires spécifiés, vous pouvez simplement inclure votre Réagir code à l'intérieur du balisage HTML et commencez à utiliser vos composants.

JavaScript:

"javascript“ use strict ”;

var Comment = React.createClass (displayName: “Comment”,

render: function render () var rawMarkup = marqué (this.props.children.toString (), sanitize: true); return React.createElement ("div", className: "comment", React.createElement ("h2", className: "commentAuthor", this.props.author), React.createElement ("span", dangereusementSetInnerHTML : __html: rawMarkup)); ); "

Assurez-vous d’inclure les bibliothèques React et de placer le code HTML dans la balise body qui sera diffusée à partir de votre PHP AltoRouter app, par exemple:

"html

"

Laravel Utilisateurs

Pour le très populaire framework PHP Laravel, il existe le réact-laravel bibliothèque, qui active React.js directement à l'intérieur de vos vues de lame.

Par exemple:

php @react_component ('Message', ['title' => 'Bonjour, Monde'], ['prerender' => true])

le prérandre flag indique à Laravel de rendre le composant côté serveur, puis de le monter côté client.

Exemple Laravel 5.2 + React App

Regardez cet excellent référentiel de départ pour un exemple d'utilisation de Laravel + React par Spharian.

Pour restituer votre code React dans votre Laravel, définissez la source de vos fichiers React dans le index.blade.php balise body, en ajoutant ce qui suit, par exemple:

html

.NET

En utilisant le framework ReactJS.NET, vous pouvez facilement introduire React dans votre application .NET..

Installez le package ReactJS.NET dans votre IDE Visual Studio via le gestionnaire de packages NuGET pour .NET.

Recherchez les packages disponibles pour 'ReactJS.NET (MVC 4 et 5)' et installez-les. Vous pourrez désormais utiliser n’importe quel code d’extension .jsx dans votre application asp.net.

Ajoutez un nouveau contrôleur à votre projet pour commencer à utiliser React + .NET et sélectionnez «Contrôleur vide MVC» pour votre modèle. Une fois créé, faites un clic droit sur retourner Voir () et ajoutez une nouvelle vue avec les détails suivants:

• Nom de la vue: Index
• Moteur de visualisation: rasoir (CSHTML)
• Créer une vue fortement typée: non cochée
• Créer en tant que vue partielle: décoché
• Utiliser une mise en page ou une maquette: Décoché

Vous pouvez maintenant remplacer le code par défaut par ce qui suit:

"html @ Layout = null;

"

Maintenant, nous devons créer le Example.jsx référencé ci-dessus, alors créez le fichier dans votre projet et ajoutez votre JSX comme suit:

"javascript var CommentBox = React.createClass (render: function () return (

, document.getElementById ('content')); "

Maintenant si vous cliquez Jouer dans votre IDE Visual Studio, vous devriez voir l'exemple de la zone de commentaire Hello World.

Voici un tutoriel détaillé sur l'écriture d'un composant pour asp.net.

Des rails

En utilisant rails de réaction, vous pouvez facilement ajouter React à n’importe quelle application Rails (3.2+). Pour commencer, ajoutez simplement la gemme:

rails bijou 'react-rails', '~> 1.7.0'

et installez:

installation du paquet de rails

Maintenant, vous pouvez exécuter le script d'installation:

rails rails g réagir: installer

Cela se traduira par deux choses:

• UNE composants.js fichier manifeste dans app / assets / javascripts / components /; c'est là que vous allez mettre tous vos codes de composants.
• Ajouter ce qui suit à votre application.js:

rails // = nécessite une réaction // = nécessite une réaction // = nécessite des composants

À présent .jsx le code sera rendu, et vous pouvez ajouter un bloc de React à votre modèle, par exemple:

"des rails <%= react_component('HelloMessage', name: 'John') %>

"

Ruby JSX

Babel est au cœur de la mise en œuvre Ruby de la rails de réaction gem, et peut être configuré comme suit:

ruby config.react.jsx_transform_options = liste noire: ['spec.functionName', 'validation.react', 'strict'], # options par défaut optionnelles: ["transformerName"], # passer options extra babel supplémentaires liste blanche: ["useStrict" ] # encore plus d'options

Une fois que rails de réaction est installé dans votre projet, redémarrez votre serveur et tout .js.jsx les fichiers seront transformés dans votre pipeline d'actifs.

Pour plus d'informations sur rails de réaction, aller à la documentation officielle.

Python

À installer python-réagir, utilisez pip comme suit:

bash pip installer réagir

Vous pouvez maintenant rendre le code React avec une application Python en indiquant le chemin d'accès à votre .jsx composants et servir l'application avec un serveur de rendu. Habituellement, ceci est un séparé Node.js processus.

Pour exécuter un serveur de rendu, suivez ce guide rapide et simple..

Maintenant, vous pouvez démarrer votre serveur comme suit:

noeud bash render_server.js

Lancez votre application python:

bash python app.py

Et chargez http://127.0.0.1.1000 dans un navigateur pour voir le rendu de votre code React.

Django

Ajouter réagir à ton INSTALLED_APPS et fournir une configuration comme suit:

"bash INSTALLED_APPS = (#… 'réagir',)

REACT = 'RENDER': pas DEBUG, 'RENDER_URL': 'http://127.0.0.1:8001/render',

"

Météore

Pour ajouter React à votre projet météore, faites-le via:

bash météore npm installer --save réagir réagir

Puis dans client / main.jsx ajoutez ce qui suit par exemple:

"bash import Réagit de 'réagir'; importer Meteor de 'météore / météore'; importer render de 'réagir-dom';

importer l'application depuis '… /imports/ui/App.jsx';

Meteor.startup (() => render (, document.getElementById ('render-target')); ); "

Ceci instancie un App Composant de réaction que vous définissez dans imports / ui / App.jsx, par exemple:

"bash import React, Composant de 'réagir';

importer le titre de './Headline.jsx';

// Le composant App - représente l'ensemble de la classe d'exportation par défaut de l'application. App étend le composant getHeadlines () return [_id: 1, texte: 'la légalisation de la marijuana à des fins médicales va dans le monde entier!' , _id: 2, text: 'Matt Brown entre dans le culte de la scientologie', _id: 3, text: 'Le Web profond: un rêve de criminels ou une liberté fascinante?' ,];

renderHeadlines () return this.getHeadlines (). map ((titre)) => ( ));

render () return (

 
 this.renderHeadlines () 
 

À l'intérieur de Headline.jsx, vous utilisez le code suivant:

"importation simple Réagir, Composant, PropTypes de 'réagir';

// Composant de titre - ceci affichera un seul article de journal d'une classe par défaut d'exportation d'un tableau itéré. Headline expand Component render () return (

Headline.propTypes = // Ce composant obtient le titre à afficher par le biais d'un prop React. // Nous pouvons utiliser propTypes pour indiquer qu'il est obligatoire headline: PropTypes.object.isRequired,; "

Meteor est prêt pour React et dispose de la documentation officielle.

Non plus guidon

Un point important à noter: lorsque vous utilisez Meteor avec React, le paramètre par défaut guidon le système de gabarit n'est plus utilisé car il est obsolète en raison de la présence de React dans le projet.

Donc, au lieu d'utiliser > TemplateName ou Template.templateName pour les assistants et les événements de votre JS, vous définissez tous les éléments de vos composants View, qui sont tous des sous-classes de React.component.

Conclusion

React peut être utilisé dans pratiquement tous les langages utilisant une couche de présentation HTML. Les avantages de React peuvent être pleinement exploités par une pléthore de produits logiciels potentiels.

React rend la couche UI View basée sur des composants. Travailler de manière logique avec n’importe quelle pile signifie que nous avons un langage universel pour l’interface que les concepteurs de tous les aspects du développement Web peuvent utiliser..

React unifie les interfaces, la stratégie de marque et la contingence générale de nos projets dans tous les déploiements, quelles que soient les contraintes de l'appareil ou de la plate-forme. Également en termes de travail indépendant, basé sur le client ou en interne au sein de grandes organisations, React assure un code réutilisable pour vos projets..

Vous pouvez créer vos propres bibliothèques de composants sur mesure et travailler immédiatement dans de nouveaux projets ou en rénover d'anciens, créant ainsi des interfaces d'application isométriques entièrement réactives, rapidement et facilement..

React est une étape importante dans le développement Web et il est en passe de devenir un outil essentiel dans la collection de tout développeur. Ne soyez pas laissé pour compte.