Share
Reageren is een weergavebibliotheek die is geschreven in JavaScript en dus agnostisch is voor elke stapelconfiguratie en kan worden weergegeven in vrijwel elke webtoepassing die HTML en JavaScript gebruikt voor zijn presentatielaag.
Aangezien React werkt als de 'V' in 'MVC', kunnen we onze eigen toepassingsstack maken vanuit onze voorkeuren. Tot nu toe hebben we in deze gids React gezien die werkt met Express, een Node ES6 / JavaScript-gebaseerd framework. Andere populaire Node-gebaseerde matches voor React zijn het Meteor-framework en Facebook's Relay.
Als u wilt profiteren van het uitstekende componentgebaseerde JSX-systeem van React, de virtuele DOM en de supersnelle weergavetijden met uw bestaande project, kunt u dat doen door een van de vele open-sourceoplossingen te implementeren.
Omdat PHP een server-side scriptingtaal is, kan integratie met React verschillende vormen aannemen:
Voor het weergeven van componenten op de server is er een bibliotheek beschikbaar op GitHub.
We kunnen bijvoorbeeld het volgende doen PHP met dit pakket:
"php
$ rjs = nieuwe ReactJS ($ react_source, $ app_source); $ rjs-> setComponent ('MyComponent', array ('any' => 1, 'props' => 2));
// print rendered markup echo '
// laad JavaScript op een of andere manier - samengevoegd, van CDN, etc // inclusief react.js en custom / components.js
// init client echo '';
// herhaal setComponent (), getMarkup (), getJS () indien nodig // om meer componenten weer te geven "
De kracht van het combineren van React met elke serverzijdige scriptingtaal is de mogelijkheid om React met gegevens te voeden en uw bedrijfslogica zowel op de server als op de client toe te passen. Het vernieuwen van een oude applicatie in een Reactive-app was nog nooit zo eenvoudig!
Bekijk voor een voorbeeldtoepassing deze repository op GitHub.
Configureer uw AltoRouter als zodanig:
"php
// Router komt overeen // - // Manual $ router-> map ('GET', '/', $ viewPath. 'Reactjs.html', 'reactjs');
$ result = $ viewPath. '404.php';
$ match = $ router-> match (); if ($ match) $ result = $ match ['target'];
// Return-routevergelijking bevat $ resultaat;
?>"
Met de AltoRouter instellen van de pagina's van uw toepassing voor de opgegeven routes, u kunt dan alleen uw Reageer code in de HTML-markup en begin met het gebruik van uw componenten.
JavaScript:
"javascript" gebruik strict ";
var Commentaar = React.createClass (displayName: "Reactie"),
render: function render () var rawMarkup = gemarkeerd (this.props.children.toString (), sanitize: true); return React.createElement ("div", className: "comment", React.createElement ("h2", className: "commentAuthor", this.props.author), React.createElement ("span", dangerousouslySetInnerHTML : __html: rawMarkup)); ); "
Zorg ervoor dat u de React-bibliotheken opneemt en plaats de HTML ook in de body-tag die vanuit uw PHP wordt aangeboden AltoRouter app, bijvoorbeeld:
"html
"
Voor het zeer populaire PHP-framework Laravel is er de reactie-laravel bibliotheek, waardoor React.js direct vanuit je Blade-weergaven wordt geopend.
Bijvoorbeeld:
php @react_component ('Message', ['title' => 'Hello, World'], ['prerender' => true])
De prerender flag geeft Laravel de opdracht om de component aan de serverzijde te renderen en vervolgens aan de clientzijde te koppelen.
Kijk eens naar deze uitstekende startersrepository voor een voorbeeld van hoe Laravel + React werkt door Spharian.
Om uw React-code in uw Laravel weer te geven, stelt u de bron van uw React-bestanden in de index.blade.php body-tag, door bijvoorbeeld het volgende toe te voegen:
html
Met behulp van het ReactJS.NET-framework kunt u React gemakkelijk introduceren in uw .NET-toepassing.
Installeer het ReactJS.NET-pakket op uw Visual Studio IDE via de NuGET-pakketbeheerder voor .NET.
Zoek in de beschikbare pakketten naar 'ReactJS.NET (MVC 4 en 5)' en installeer. U kunt nu elke .jsx-extensiecode gebruiken in uw asp.net-app.
Voeg een nieuwe controller toe aan uw project om aan de slag te gaan met React + .NET en selecteer "Empty MVC Controller" voor uw sjabloon. Klik met de rechtermuisknop zodra het is gemaakt return View () en voeg een nieuwe weergave toe met de volgende details:
Nu kunt u de standaardcode vervangen door het volgende:
"html @ Layout = null;
"
Nu moeten we het maken Example.jsx waarnaar hierboven wordt verwezen, dus maak het bestand in uw project en voeg uw toe JSX als volgt:
"javascript var. CommentBox = React.createClass (render: function () return (
, document.getElementById ('content')); "
Nu als u klikt Spelen in uw Visual Studio IDE zou u het voorbeeldvakje Hello World moeten zien.
Hier is een gedetailleerde tutorial over het schrijven van een component voor asp.net.
Door het gebruiken van reactie-rails, je kunt eenvoudig React to any Rails (3.2+) applicatie toevoegen. Voeg gewoon de edelsteen toe om te beginnen:
rails gem 'react-rails', '~> 1.7.0'
en installeer:
rails bundel installeren
Nu kunt u het installatiescript uitvoeren:
rails rails g reageren: installeer
Dit zal in twee dingen resulteren:
Accentsconagua
components.js manifest bestand in app / assets / javascripts / components /; hier zet je al je componentencode in.application.js:rails // = vereisen reageren // = vereisen react_ujs // = componenten vereisen
Nu .JSX code wordt weergegeven en u kunt een blok Reageren toevoegen aan uw sjabloon, bijvoorbeeld:
"rails <%= react_component('HelloMessage', name: 'John') %>
"
Babel vormt de kern van de Ruby-implementatie van de reactie-rails edelsteen, en kan als volgt worden geconfigureerd:
ruby config.react.jsx_transform_options = blacklist: ['spec.functionName', 'validation.react', 'strict'], # standaardopties optioneel: ["transformerName"], # pass extra babel opties whitelist: ["useStrict" ] # nog meer opties
Een keer reactie-rails is geïnstalleerd in uw project, herstart uw server en alle .js.jsx bestanden worden omgezet in uw activapijplijn.
Voor meer informatie over reactie-rails, ga naar de officiële documentatie.
Installeren python reageren, gebruik pip zoals zo:
bash pip install react
Je kunt nu React-code met een Python-app weergeven door het pad naar je te bieden .JSX componenten en de app bedienen met een weergaveserver. Meestal is dit een afzonderlijke Node.js werkwijze.
Volg deze eenvoudige korte handleiding om een weergaveserver uit te voeren.
Nu kunt u uw server als volgt starten:
bash-knooppunt render_server.js
Start je python-applicatie:
bash python app.py
En laad http://127.0.0.1:5000 in een browser om uw React-code te zien renderen.
Toevoegen Reageer aan jouw INSTALLED_APPS en geef als volgt een configuratie:
"bash INSTALLED_APPS = (# ... 'reageer',)
REACT = 'RENDER': not DEBUG, 'RENDER_URL': 'http://127.0.0.1:8001/render',
"
React aan uw meteoorproject toevoegen, doe dit via:
bash meteor npm install --save react-dom reageren
Dan in client / main.jsx voeg bijvoorbeeld het volgende toe:
"bash import Reageren van 'reageren'; import Meteor uit 'meteor / meteor'; import render uit 'react-dom';
importeer de app van '... /imports/ui/App.jsx';
Meteor.startup (() => render (render)
Dit is een instantine App Reageer component, waarin je definieert invoer / ui / App.jsx, bijvoorbeeld:
"bash import Reageren, Component uit 'reageren';
kop van './Headline.jsx' importeren;
// De app-component - vertegenwoordigt de hele standaardwaarde voor het exporteren van app App-component getHeadlines () return [_id: 1, tekst: 'Legalisatie van medische marihuana gaat wereldwijd!' , _id: 2, tekst: 'Matt Brown gaat in de cultus van scientology', _id: 3, tekst: 'Het deep web: droom van een crimineel of fascinerende vrijheid?' ,];
renderHeadlines () return this.getHeadlines (). map ((kop) => (
render () retour (
Binnen in de Headline.jsx, je gebruikt de volgende code:
"plain import Reageren, Component, PropTypes uit 'reageren';
// Headline-component - hier wordt een enkel nieuwskopregelitem weergegeven uit een geïllustreerde array-export standaardklasse Headline extends Component render () return () (
Headline.propTypes = // Dit onderdeel krijgt de titel te zien via een React-prop. // We kunnen propTypes gebruiken om aan te geven dat het vereiste kop is: PropTypes.object.isRequired,; "
Meteor is klaar voor React en heeft officiële documentatie.
Een belangrijk punt om op te merken: Bij gebruik van Meteor met React, de standaard Stuur sjabloneringssysteem wordt niet meer gebruikt omdat het niet beschikbaar is omdat React deel uitmaakt van het project.
Dus in plaats van gebruiken > Sjabloonnaam of Template.templateName voor helpers en evenementen in uw JS, definieert u alles in uw View-componenten, die allemaal subklassen zijn van React.component.
React kan in praktisch elke taal worden gebruikt die gebruikmaakt van een HTML-presentatielaag. De voordelen van React kunnen ten volle worden benut door een overvloed aan potentiële softwareproducten.
React maakt de UI View-laag componentgebaseerd. Logisch werken met elke stapel betekent dat we een universele interfacetaal hebben die ontwerpers over alle facetten van webontwikkeling kunnen gebruiken.
React verenigt de interfaces, branding en algemene onvoorziene omstandigheden van onze projecten in alle implementaties, ongeacht het apparaat of de beperkingen van het platform. Ook in termen van freelance, klantgericht werk of intern binnen grote organisaties, zorgt React voor herbruikbare code voor uw projecten.
U kunt uw eigen op maat gemaakte componentenbibliotheken maken en onmiddellijk aan de slag in nieuwe projecten of oude versies renoveren, zodat u snel en eenvoudig volledig reactieve isometrische toepassingsinterfaces kunt maken.
React is een belangrijke mijlpaal in webontwikkeling en heeft de potentie om een essentieel hulpmiddel te worden in de verzameling van elke ontwikkelaar. Blijf niet achter.
