Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Conectar React con otros populares Idiomas Web

by
Difficulty:IntermediateLength:MediumLanguages:

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:

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:

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:

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:

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:

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:

.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:

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:

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:

E instalar:

Ahora puede ejecutar el script de instalación:

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:

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

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:

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í:

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:

Inicie la aplicación python:

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:

Meteor

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

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

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

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

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.