Conectar React con otros populares Idiomas Web

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

React es una biblioteca de vista escrita en JavaScript, por lo que es agnóstica de cualquier configuración y puede hacer una aparecer en cualquier aplicación web que esté usando HTML y JavaScript para su capa de presentación.

Como React funciona como el 'V' en 'MVC', podemos crear nuestra propia pila de aplicaciones de nuestras preferencias. Hasta ahora en esta guía hemos visto React trabajando con Express, un framework de ES6/JavaScript basado en Node. Otros partidos populares basados en node para React son el marco Meteor y el relé de Facebook.

Si desea aprovechar el excelente sistema JSX basado en componentes de React, el DOM virtual y sus tiempos de renderización super rápidos con su proyecto existente, puede hacerlo mediante la implementación de una de las muchas soluciones de código abierto.

PHP

Como PHP es un lenguaje de scripting del lado del servidor, la integración con React puede venir de varias formas:

Usando react-php-v8js
Solicitud/respuesta del lado del servidor manejando la ruta (con un enrutador, por ejemplo Alto)
Salida JSON a través de json_encode()
Plantilla de envoltura, ej. Twig

Rendimiento del lado del servidor

Para representar componentes React en el servidor, hay una biblioteca disponible en GitHub.

Por ejemplo, podemos hacer lo siguiente en PHP con este paquete:

<?php
// the library
$react_source = file_get_contents('/path/to/build/react.js');
// all custom code concatenated
$app_source = file_get_contents('/path/to/custom/components.js');

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

// print rendered markup
echo '<div id="here">' . $rjs->getMarkup() . '</div>';

// load JavaScript somehow - concatenated, from CDN, etc
// including react.js and custom/components.js

// init client
echo '<script>' . $rjs->getJS("#here") . '</script>'; 

// repeat setComponent(), getMarkup(), getJS() as necessary
// to render more components

El poder de combinar React con cualquier lenguaje scripting del lado del servidor es la capacidad de alimentar React con datos, y aplicar su lógica en el servidor, así como en el lado del cliente. ¡Renovar una aplicación antigua en una aplicación Reactive nunca ha sido tan fácil!

Uso de PHP + Alto Router

Para una aplicación de ejemplo, eche un vistazo a este repositorio en GitHub.

Configure su AltoRouter de la siguiente manera:

<?php
// Router setup
require_once 'include/AltoRouter/AltoRouter.php';
$router = new AltoRouter();
$viewPath = 'views/';

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

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

$match = $router->match();
if($match) {
  $result = $match['target'];
}

// Return route match 
include $result;

?>

Con la configuración de AltoRouter que sirve las páginas de su aplicación para las rutas especificadas, sólo puede incluir su código React dentro del HTML y comenzar a utilizar sus componentes.

JavaScript:

"use strict";

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

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

Asegúrese de incluir las bibliotecas de React y también coloque el HTML dentro de la etiqueta de cuerpo que se publicará desde su aplicación PHP AltoRouter, por ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>React Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
  </head>
  <body>
    <div id="myContent"></div>
    <script type="text/jsx;harmony=true" src="assets/js/main.js"></script>
  </body>
</html>

Usuarios de Laravel

Para el muy popular framework PHP Laravel, existe la librería react-laravel, que habilita React.js desde las vistas de Blade.

Por ejemplo:

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

La marca prerender indica a Laravel que procese el componente en el lado del servidor y luego lo monte al lado del cliente.

Ejemplo Laravel 5.2 + Aplicación React

Mira este excelente repositorio inicial para obtener un ejemplo de cómo Laravel + React funcionando por Spharian.

Para que tu código React se encuentre dentro de tu Laravel, configura el origen de tus archivos React dentro de la etiqueta de índice index.blade.php, añadiendo lo siguiente, por ejemplo:

1	<script src="{{ asset('js/my-react-code.js') }}"></script>

.NET

Utilizando el marco ReactJS.NET, puede introducir React fácilmente en su aplicación .NET.

Instale el paquete ReactJS.NET en su IDE de Visual Studio a través del gestor de paquetes NuGET para .NET.

Busca los paquetes disponibles para 'ReactJS.NET (MVC 4 y 5)' e instalar. Ahora podrás usar cualquier código de extensión .jsx en tu aplicación asp.net.

Agregue un nuevo controlador a su proyecto para comenzar con React + .NET y seleccione "Vaciar controlador MVC" para su plantilla. Una vez que se crea, haga clic con el botón derecho del ratón en return View() y agregue una nueva vista con los siguientes detalles:

Nombre de la vista: Index
Motor de vista: Razor (CSHTML)
Crear una vista fuertemente tipificada: Sin marcar
Crear como vista parcial: Sin marcar
Utilizar un diseño o una página maestra: sin marcar

Ahora puede reemplazar el código predeterminado por el siguiente:

@{
    Layout = null;
}
<html>
<head>
    <title>Hello React</title>
</head>
<body>
    <div id="content"></div>
    <script src="https://fb.me/react-15.0.1.js"></script>
    <script src="https://fb.me/react-dom-15.0.1.js"></script>
    <script src="@Url.Content("~/Scripts/Example.jsx")"></script>
</body>
</html>

Ahora necesitamos crear el Example.jsx mencionado anteriormente, así que crea el archivo en tu proyecto y agrega tu JSX como se muestra a continuacion:

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

Ahora, si hace clic en Play en su IDE de Visual Studio, debería ver el ejemplo del cuadro de comentarios de Hello World.

Aquí hay un tutorial detallado sobre cómo escribir un componente para asp.net.

Rails

Mediante el uso de react-rails, puede agregar fácilmente React a cualquier Rails (3.2 +) aplicación. Para empezar, simplemente añada la gem:

1	gem 'react-rails', '~> 1.7.0'

E instalar:

1	bundle install

Ahora puede ejecutar el script de instalación:

1	rails g react:install

Esto resultará en dos cosas:

Un archivo de manifiesto components.js en app/assets/javascripts/components/; Aquí es donde pondrá todo su código de componentes.
Agregando lo siguiente a su application.js:

1	//= require react
2	//= require react_ujs
3	//= require components

Ahora el código .jsx será renderizado, y puedes agregar un bloque de React a tu plantilla, por ejemplo:

1	<%= react_component('HelloMessage', name: 'John') %>
2	<!-- becomes: -->
3	<div data-react-class="HelloMessage" data-react-props="{"name":"John"}"></div>

Ruby JSX

Babel está en el corazón de la implementación Ruby de la gem react-rails y puede configurarse de la siguiente manera:

config.react.jsx_transform_options = {
  blacklist: ['spec.functionName', 'validation.react', 'strict'], # default options
  optional: ["transformerName"],  # pass extra babel options
  whitelist: ["useStrict"] # even more options
}

Una vez que los react-rails estén instalados en su proyecto, reinicie su servidor y cualquier archivo .js.jsx se transformará en su canalización de activos.

Para más información sobre react-rails, vaya a la documentación oficial.

Python

Para instalar python-react, use pip así:

1	pip install react

Ahora puede procesar el código React con una aplicación Python proporcionando la ruta a los componentes .jsx y sirviendo la aplicación con un servidor de renderizado. Normalmente se trata de un proceso Node.js independiente.

Para ejecutar un servidor de procesamiento, siga esta breve guía.

Ahora puede iniciar su servidor de la siguiente manera:

1	node render_server.js

Inicie la aplicación python:

1	python app.py

Y cargar hasta http://127.0.0.1:5000 en un navegador para ver su React código de representación.

Django

Añada react a su INSTALLED_APPS y proporciona alguna configuración como:

INSTALLED_APPS = (
    # ...
    'react',
)

REACT = {
    'RENDER': not DEBUG,
    'RENDER_URL': 'http://127.0.0.1:8001/render',
}


Meteor

Para añadir React a su proyecto meteor, hágalo vía:

1	meteor npm install --save react react-dom

A continuación, en client/main.jsx, agregue lo siguiente, por ejemplo:

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
 
import App from '../imports/ui/App.jsx';
 
Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'));
});

Esta es la instancia de un componente de React de la App, que se definirá en imports/ui/App.jsx, por ejemplo:

import React, { Component } from 'react';

import Headline from './Headline.jsx';

// The App component - represents the whole app
export default class App extends Component {
  getHeadlines() {
    return [
      { _id: 1, text: 'Legalisation of medical marijuana goes worldwide!' },
      { _id: 2, text: 'Matt Brown goes inside the cult of scientology' },
      { _id: 3, text: 'The deep web: A criminals dream or fascinating freedom?' },
    ];
  }
 
  renderHeadlines() {
    return this.getHeadlines().map((headline) => (
      <Headline key={headline._id} headline={headline} />
    ));
  }
 
  render() {
    return (
      <div className="container">
        <header>
          <h1>The latest headlines</h1>
        </header>
 
        <ul>
          {this.renderHeadlines()}
        </ul>
      </div>
    );
  }
}

Dentro del Headline.jsx, utiliza el código siguiente:

import React, { Component, PropTypes } from 'react';
 
// Headline component - this will display a single news headline item from a iterated array
export default class Headline extends Component {
  render() {
    return (
      <li>{this.props.headline.text}</li>
    );
  }
}
 
Headline.propTypes = {
  // This component gets the headline to display through a React prop.
  // We can use propTypes to indicate it is required
  headline: PropTypes.object.isRequired,
};

Meteor está listo para React y tiene documentación oficial.

No mas {{handlebars}}

Un punto importante a tener en cuenta: cuando se utiliza Meteor con React, el sistema de plantillas por defecto {{handlebars}} ya no se utiliza, ya que es depreciado debido a que React esta en el proyecto.

Así que en lugar de usar {{> TemplateName}} o Template.templateName para los ayudantes y eventos en su JS, definirá todo en sus componentes View, que son todas las subclases de React.component.

Conclusion

React puede utilizarse prácticamente en cualquier idioma que utilice una capa de presentación HTML. Los beneficios de React pueden ser totalmente explotados por una plétora de productos de software potenciales.

React hace que la capa de vista de interfaz de usuario se convierta en componente. Trabajar lógicamente con cualquier stack significa que tenemos un lenguaje universal para la interfaz que los diseñadores a través de todas las facetas del desarrollo web pueden utilizar.

React unifica las interfaces de nuestros proyectos, la marca y la contingencia general en todas las implementaciones, sin importar las restricciones de dispositivos o plataformas. También en términos de trabajo freelance, basado en el cliente o dentro de grandes organizaciones, React asegura código reutilizable para sus proyectos.

Puede crear sus propias bibliotecas a medida de componentes y trabajar inmediatamente en nuevos proyectos o renovar los antiguos, creando interfaces de aplicación isométricas completamente reactivas de forma rápida y sencilla.

React es un hito significativo en el desarrollo web, y tiene el potencial de convertirse en una herramienta esencial en la colección de cualquier desarrollador. No te quedes atrás.