React er et visningsbibliotek som er skrevet i JavaScript, og det er derfor agnostisk av en hvilken som helst stabelkonfigurasjon og kan gi et utseende i praktisk talt alle webapplikasjoner som bruker HTML og JavaScript for presentasjonslaget.

Som React fungerer som 'V' i 'MVC', kan vi lage vår egen applikasjonsstabel fra våre preferanser. Så langt i denne veiledningen har vi sett React working with Express, et knutepunkt ES6 / JavaScript-basert rammeverk. Andre populære Node-baserte kamper for React er Meteor-rammen og Facebooks Relay.

Hvis du vil dra nytte av Reacts fremragende komponentbaserte JSX-system, den virtuelle DOM og dens super-raske gjengivelse ganger med ditt eksisterende prosjekt, kan du gjøre det ved å implementere en av de mange åpen løsningene.

PHP

Siden PHP er et server-side skriptspråk, kan integrasjon med React komme i flere former:

• Ved hjelp av reaksjons-php-v8js
• Server side Forespørsel / Svar Rutehåndtering (med en ruter, for eksempel Alto)
• JSON-utgang via json_encode ()
• Malpakke, f.eks. Kvist

Server-Side Rendering

For gjengivelse av React-komponenter på serveren, er det et bibliotek tilgjengelig på GitHub.

For eksempel kan vi gjøre følgende i PHP med denne pakken:

"php

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

// print gjengitt markup echo '

// last JavaScript på en eller annen måte - sammenkoblet, fra CDN, etc // inkludert react.js og custom / components.js

// init klient ekko '';

// gjenta setComponent (), getMarkup (), getJS () etter behov // for å gjøre flere komponenter "

Kraften til å kombinere React med et hvilket som helst server-side skriptspråk er muligheten til å mate React with data, og bruke forretningslogikken på serveren samt klientsiden. Gjenoppretting av en gammel applikasjon til en reaktiv app har aldri vært enklere!

Bruke PHP + Alto Router

For et eksempel søk, ta en titt på dette depotet på GitHub.

Konfigurer din AltoRouter og så:

"php

// Router samsvarer // - // Manual $ router-> map ('GET', '/', $ viewPath. 'Reactjs.html', 'reactjs');

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

$ match = $ router-> match (); hvis ($ match) $ result = $ match ['target'];

// Returrute-kamp inkluderer $ resultat;

?>"

Med AltoRouter oppsett som viser programmets sider for de angitte ruter, kan du bare inkludere din Reagere kode i HTML-oppslaget og begynn å bruke komponentene dine.

Javascript:

"javascript" bruk strenge ";

var Kommentar = React.createClass (displayName: "Comment",

gjengi: funksjon gjengivelse () var rawMarkup = merket (this.props.children.toString (), sanitize: true); returnere React.createElement ("div", className: "comment", React.createElement ("h2", className: "commentAuthor", this.props.author), React.createElement ("span", dangerousouslySetInnerHTML : __html: rawMarkup)); ); "

Sørg for at du inkluderer React-biblioteker og også plasser HTML-en i kroppsmerket som skal vises fra PHP AltoRouter app, for eksempel:

"html

"

Laravel Brukere

For den svært populære PHP-rammen Laravel, er det reagere-laravel bibliotek, som gjør det mulig for React.js rett inn i Blade-visningene dine.

For eksempel:

php @react_component ('Message', ['title' => 'Hello, World'], ['prerender' => true])

De prerender flagg forteller Laravel å gjengi komponenten på serversiden og deretter montere den på klientsiden.

Eksempel Laravel 5.2 + React App

Se på dette gode startbilde for et eksempel på å få Laravel + React å jobbe av Spharian.

For å gjengi React-koden inne i din Laravel, sett inn React-filkilden din inne i index.blade.php body tag, ved å legge til følgende for eksempel:

html

.NETT

Ved hjelp av ReactJS.NET-rammen kan du enkelt introdusere React i .NET-applikasjonen.

Installer ReactJS.NET-pakken til Visual Studio IDE via NuGET-pakkeadministratoren for .NET.

Søk de tilgjengelige pakkene for 'ReactJS.NET (MVC 4 og 5)' og installer. Du vil nå kunne bruke noen .jsx-utvidelseskode i asp.net-appen din.

Legg til en ny kontroller i prosjektet ditt for å komme i gang med React + .NET, og velg "Tom MVC Controller" for malen. Når den er opprettet, høyreklikk på returnere visning () og legg til en ny visning med følgende detaljer:

• Se navn: Indeks
• Visningsmotor: Razor (CSHTML)
• Opprett en sterkt skrevet visning: Unticked
• Opprett som delvis visning: Unticked
• Bruk et layout eller en masterside: Unticked

Nå kan du erstatte standardkoden med følgende:

"html @ Layout = null;

"

Nå må vi opprette Example.jsx referert ovenfor, så lag filen i prosjektet ditt og legg til jsx som følger:

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

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

Nå hvis du klikker Spille i Visual Studio IDE, bør du se Hello World-kommentarboksen eksempel.

Her er en detaljert opplæring om å skrive en komponent for asp.net.

rails

Ved bruk av reagere-skinnene, Du kan enkelt legge til React to any Rails (3.2+) søknad. For å komme i gang, legg bare til perlen:

skinner perle 'reaksjonsskinner', '~> 1,7,0'

og installer:

rails bundle installasjon

Nå kan du kjøre installasjonsskriptet:

skinner skinner g reagerer: installere

Dette vil resultere i to ting:

• EN components.js manifest fil i app / eiendeler / Javascript / komponenter /; dette er her du vil sette alle komponentene dine kode.
• Legger til følgende for din application.js:

skinner // = krever reaksjon // = krever react_ujs // = krever komponenter

Nå .jsx koden skal gjengis, og du kan legge til en blokk med React til malen din, for eksempel:

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

"

Ruby JSX

Babel er i hjertet av Ruby-implementeringen av reagere-skinnene perle, og kan konfigureres som slik:

ruby config.react.jsx_transform_options = svarteliste: ['spec.functionName', 'validation.react', 'strict'], # standardalternativer valgfritt: ["transformerName"], # passere ekstra babelalternativer hviteliste: ["useStrict" ] # enda flere alternativer

En gang reagere-skinnene er installert i prosjektet ditt, start serveren din og noen andre .js.jsx filer vil bli forvandlet i din aktivitetsrørledning.

For mer informasjon om reagere-skinnene, gå til den offisielle dokumentasjonen.

Python

Å installere python-reagere, bruk pip slik:

bash pip installere reagere

Du kan nå gjengi React kode med en Python app ved å gi banen til din .jsx komponenter og serverer appen med en gjengiserver. Vanligvis er dette et eget node.js prosess.

For å kjøre en gjengiserver, følg denne enkle korte veiledningen.

Nå kan du starte serveren din slik:

bash node render_server.js

Start python-applikasjonen din:

bash python app.py

Og last opp http://127.0.0.1:5000 i en nettleser for å se React-kode gjengivelsen.

Django

Legg til reagere til din INSTALLED_APPS og gi noen konfigurasjon som sådan:

"bash INSTALLED_APPS = (# ... 'reagerer')

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

"

Meteor

For å legge til React på meteorprosjektet, gjør det via:

bash meteor npm installere - save reagerer reagere dom

Så i klient / main.jsx Legg til følgende for eksempel:

"bash import React from 'reagere', importer Meteor fra 'meteor / meteor'; import render fra 'react-dom';

importer app fra '... /imports/ui/App.jsx';

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

Dette er instantiating en app Reag komponent, som du vil definere i import / ui / App.jsx, for eksempel:

"bash import React, Component fra" reagere ";

Importer overskrift fra './Headline.jsx';

// App-komponenten - representerer hele appen eksport standard klasse App utvider komponent getHeadlines () return [_id: 1, text: 'Legalisering av medisinsk marihuana går over hele verden!' , _id: 2, tekst: 'Matt Brown går inn i kulten av scientology', _id: 3, tekst: 'Den dype nettsiden: En kriminelle drømmer eller fascinerende frihet?' ,];

renderHeadlines () return this.getHeadlines (). kart ((overskrift) => ( ));

gjengivelse () retur (

 
 this.renderHeadlines () 
 

Inne i Headline.jsx, du bruker følgende kode:

"ren import React, Component, PropTypes fra" reagere ";

// Overskriftskomponent - dette vil vise en enkelt nyhetsoverskrift fra en iterert array eksport standard klasse Overskrift utvider komponent render () return (

Headline.propTypes = // Denne komponenten får overskriften til å vises gjennom en React-propp. // Vi kan bruke propTypes for å indikere at det kreves overskrift: PropTypes.object.isRequired,; "

Meteor er klar for React og har offisiell dokumentasjon.

Ingen flere styrer

Et viktig punkt å merke seg: Når du bruker Meteor med React, er standard styret Templeringssystem er ikke lenger brukt som det er avstengt på grunn av React i prosjektet.

Så i stedet for å bruke > Malnavn eller Template.templateName for hjelpere og hendelser i JS, vil du definere alt i dine View-komponenter, som alle er underklasser av React.component.

Konklusjon

React kan brukes på praktisk talt alle språk som bruker et HTML presentasjonslag. Fordelene ved React kan utnyttes fullt ut av en mengde potensielle programvareprodukter.

React gjør at UI View-laget blir komponentbasert. Arbeide logisk med en hvilken som helst stabel betyr at vi har et universelt språk for grensesnitt som designere over alle fasene av webutvikling kan benytte.

React forener prosjekternes grensesnitt, merkevarebygging og generell beredskap over alle distribusjoner, uansett hvilken enhet eller plattformsbegrensning. Også når det gjelder freelance, klientbasert arbeid eller internt i store organisasjoner, sikrer React gjenbrukbar kode for dine prosjekter.

Du kan lage dine egne skreddersydde biblioteker av komponenter og få jobbe med det samme innen nye prosjekter eller renovere gamle, og skape helt og fullt reaktive isometriske applikasjonsgrensesnitt raskt og enkelt..

React er en viktig milepæl i webutvikling, og det har potensial til å bli et viktig verktøy i enhver utvikleres samling. Ikke bli etterlatt.