React este o bibliotecă de vizualizare scrisă în JavaScript și deci este agnostică a oricărei configurații de stivă și poate să apară în practic orice aplicație web care utilizează HTML și JavaScript pentru stratul său de prezentare.

Pe măsură ce reacționează ca "V" în "MVC", putem crea propriul nostru set de aplicații din preferințele noastre. Până acum, în acest ghid, am văzut reacția de lucru cu Express, un nucleu ES6 / bazat pe JavaScript. Alte meciuri populare bazate pe noduri pentru React sunt cadrul Meteor și relay-ul Facebook.

Dacă doriți să profitați de sistemul JSX bazat pe componente excelente de la React, DOM virtual și timpii de redare super-rapizi ai proiectului dvs. existent, puteți face acest lucru prin implementarea uneia dintre multele soluții open source.

PHP

Deoarece PHP este un limbaj de scripting pe partea de server, integrarea cu React poate avea mai multe forme:

• Folosind reactiv-php-v8js
• Cererea / răspunsul la server Cerere / răspuns Manipularea traseului (cu un router, de exemplu Alto)
• Ieșire JSON prin json_encode ()
• Ambalarea pe șabloane, de ex. Crenguţă

Executarea pe server

Pentru a reda componentele React pe server, există o bibliotecă disponibilă pe GitHub.

De exemplu, putem face următoarele PHP cu acest pachet:

„php

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

// imprimare rendered markup echo '

// încărcați JavaScript cumva - concatenat, de la CDN, etc // inclusiv react.js și custom / components.js

// init client echo '';

// repeta setComponent (), getMarkup (), getJS () după cum este necesar // pentru a reda mai multe componente "

Puterea de a combina React cu orice limbaj de scripting pe partea de server este abilitatea de a alimenta React cu date și de a aplica logica de afaceri atât pe server, cât și pe partea clientului. Renovarea unei aplicații vechi într-o aplicație reactivă nu a fost niciodată mai ușoară!

Utilizarea ruterului PHP + Alto

Pentru o aplicație de exemplu, aruncați o privire asupra acestui depozit pe GitHub.

Configurați-vă AltoRouter ca atare:

„php

// potriviri pentru rutere // - // Manual $ router-> map ('GET', '/', $ viewPath. 'Reactjs.html', 'reactjs');

$ result = $ viewPath. '404.php';

$ match = $ router-> potrivire (); dacă ($ match) $ result = $ match ['target'];

// Return match match includ $ result;

?>“

Cu AltoRouter configurarea paginilor aplicației dvs. pentru rutele specificate, puteți să vă includeți doar dvs. Reacţiona cod în interiorul marcajului HTML și începeți să utilizați componentele.

JavaScript:

"javascript" utilizați strict ";

var Comentariu = React.createClass (displayName: "Comentariu",

render: funcția rendere () var rawMarkup = marcat (this.props.children.toString (), sanitize: true); retur React.createElement ("div", className: "comment", React.createElement ("h2", className: commentAuthor, this.props.author), React.createElement : __html: rawMarkup)); ); "

Asigurați-vă că includeți bibliotecile React și plasați HTML-ul în interiorul etichetei corporale care va fi difuzată de la PHP AltoRouter aplicație, de exemplu:

„html

"

Laravel Users

Pentru extrem de popularul cadru PHP Laravel, există reacționează-laravel bibliotecă, care permite React.js din dreptul vizualizărilor Blade.

De exemplu:

php @react_component ('Mesaj', ['title' => 'Bună ziua, Lumea'], ['prerender' => true])

prerender flag-ul îi spune lui Laravel să redea componenta pe partea serverului și apoi să o monteze pe partea clientului.

Exemplu Laravel 5.2 + React App

Uită-te la acest magazin excelent de pornire pentru un exemplu de a obține Laravel + React de lucru de Spharian.

Pentru a face codul dvs. React în interiorul Laravel-ului dvs., setați-vă sursa fișierelor React în interiorul lui index.blade.php etichetă corporală, prin adăugarea următoarelor elemente:

html

.NET

Folosind cadrul ReactJS.NET, puteți introduce ușor React în aplicația .NET.

Instalați pachetul ReactJS.NET în Visual Studio IDE prin intermediul managerului de pachete NuGET pentru .NET.

Căutați pachetele disponibile pentru "ReactJS.NET (MVC 4 și 5)" și instalați-le. Acum veți putea utiliza orice extensie .jsx în aplicația dvs. asp.net.

Adăugați un nou controler la proiectul dvs. pentru a începe să utilizați React + .NET și selectați "Empty MVC Controller" pentru șablonul dvs. Odată ce este creat, faceți clic dreapta pe retur View () și adăugați o vizualizare nouă cu următoarele detalii:

• Nume: Index
• Vizualizare motor: Razor (CSHTML)
• Creați o vizualizare puternic tastat: Unticked
• Creați ca vizualizare parțială: Necunoscut
• Folosiți un aspect sau o pagină principală: Neimprimată

Acum puteți să înlocuiți codul implicit cu următoarele:

"html @ Layout = null;

"

Acum trebuie să creăm Example.jsx menționată mai sus, creați astfel fișierul în proiectul dvs. și adăugați-l JSX după cum urmează:

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

, document.getElementById ("conținut")); "

Acum, dacă faceți clic pe Joaca în IDE-ul Visual Studio, ar trebui să vedeți exemplul casetei de comentarii Hello World.

Iată un tutorial detaliat despre scrierea unei componente pentru asp.net.

Șine

Prin utilizarea reacționează-șine, puteți adăuga cu ușurință React la orice aplicație Rails (3.2+). Pentru a începe, trebuie doar să adăugați bijuteria:

rails gem "reac-rail", 1.700 '

și instalați:

balustrada de instalare a șinelor

Acum puteți rula scriptul de instalare:

șine de cale ferată g reacționați: instalați

Acest lucru va duce la două lucruri:

• A components.js fișier manifest în app / active / / componente / javascript; acesta este locul în care veți pune toate componentele dvs. cod.
• Adăugați următoarele la dvs. application.js:

rails // = necesită reacție // = necesită react_ujs // = necesită componente

Acum .jsx codul va fi redat și puteți adăuga un bloc de React la șablonul dvs., de exemplu:

"șine <%= react_component('HelloMessage', name: 'John') %>

"

Ruby JSX

Babel se află în centrul implementării Ruby reacționează-șine gem, și poate fi configurat astfel:

ruby config.react.jsx_transform_options = listă neagră: ['spec.functionName', 'validation.react', 'strict'], # opțiuni implicite opționale: ["transformerName"], # pass extra babel options whitelist: ] # încă mai multe opțiuni

O singura data reacționează-șine este instalat în proiectul dvs., reporniți serverul și orice altceva .js.jsx fișierele vor fi transformate în fluxul de materiale.

Pentru mai multe informații despre reacționează-șine, mergeți la documentația oficială.

Piton

A instala piton reacționează, utilizați pip ca acesta:

bash pip install react

Acum puteți redacta codul React cu o aplicație Python furnizând calea către dvs. .jsx componente și care deservesc aplicația cu un server de redare. De obicei, acest lucru este separat Node.js proces.

Pentru a rula un server de redare, urmați acest ghid scurt.

Acum puteți să vă porniți serverul ca atare:

bash node render_server.js

Porniți aplicația python:

bash python app.py

Și încărcați http://127.0.0.1:5000 într-un browser pentru a vedea redarea codului dvs. React.

Django

Adăuga reacţiona pentru dumneavoastră INSTALLED_APPS și oferiți o configurație ca atare:

"bash INSTALLED_APPS = (# ..." reacționează ",)

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

"

Meteor

Pentru a adăuga React la proiectul dvs. de meteorit, faceți acest lucru prin:

bash meteor npm install - reacționați react-dom

Apoi în client / main.jsx adăugați următoarele, de exemplu:

"import bash Reacționează din 'react'; import Meteor din" meteor / meteor "; import render de la" react-dom ";

importați aplicația de la "... /imports/ui/App.jsx";

Meteor.startup (() => render (, document.getElementById ( 'face-țintă')); );“

Aceasta este o instanțiere a unui App Componenta reactivă, pe care o veți defini în importuri / Ul / App.jsx, de exemplu:

"import bash React, Component din" reacție ";

import Titlu din './Headline.jsx';

// Componenta App - reprezintă întreaga clasă implicită pentru exportul de aplicații App extinde Component getHeadlines () return _id: 1, text: "Legalizarea marijuanei medicale merge în întreaga lume!" , _id: 2, textul: "Matt Brown intră în cultul scientologiei", _id: 3, text: "Webul profund: Un vis de criminali sau o libertate fascinantă?" ,];

renderHeadlines () return this.getHeadlines () harta ((titlu))> ( ));

render () return (

 
 this.renderHeadlines () 
 

În interiorul Headline.jsx, utilizați următorul cod:

"import simplu, reacționați, Component, PropTypes de la" reacționați ";

// Componenta principală - aceasta va afișa un singur element de titlu de știri dintr-o clasă implicită pentru exportul arrayului. Titlul extinde Component render () return (

Headline.propTypes = // Această componentă primește titlul de afișat printr-o propunere React. // Putem folosi propTypes pentru a indica că este necesar titlul: PropTypes.object.isRequired,; "

Meteor este pregătit pentru React și are documentația oficială.

Nu mai multe handlebars

Un punct important de reținut: când se utilizează Meteor cu React, implicit ghidoane sistemul de template nu mai este utilizat deoarece este defunct din cauza faptului că este în proiect.

Deci, în loc de a folosi > TemplateName sau Template.templateName pentru ajutoarele și evenimentele din JS, veți defini totul în componentele Vizualizării, care sunt toate subclasele din React.component.

Concluzie

Reactul poate fi folosit în practic orice limbă care utilizează un strat de prezentare HTML. Beneficiile React pot fi exploatate pe deplin de o multitudine de produse software potențiale.

React face ca stratul UI View să devină bazat pe componente. Lucrul logic cu orice stiva înseamnă că avem o limbă universală pentru interfața pe care o pot utiliza designerii din toate fațetele dezvoltării web.

React unifică interfețele proiectelor noastre, branding și contingență generală în toate implementările, indiferent de dispozitivul sau sistemele de blocare a platformei. De asemenea, în ceea ce privește independența, munca pe bază de client sau intern în interiorul organizațiilor mari, React asigură codul reutilizabil pentru proiectele dvs..

Puteți crea propriile biblioteci personalizate de componente și puteți lucra imediat în interiorul proiectelor noi sau puteți restaura cele vechi, creând interfețe de aplicație izometrice complet reactive rapid și ușor.

React reprezintă o piatră de hotar semnificativă în dezvoltarea web și are potențialul de a deveni un instrument esențial în colecția de dezvoltatori. Nu te lăsa în urmă.