Crear y ejecutar un proyecto React

¿Qué es React?

React es una biblioteca JavaScript de código abierto para construir interfaces de usuario, mantenida por Facebook. Se centra en construir la capa de vista y permite a los desarrolladores construir interfaces de usuario complejas de manera eficiente mediante componentes. Los conceptos clave de React son los componentes y el flujo de datos unidireccional, lo que hace que el código sea más fácil de entender y mantener.

Principales características y ventajas de React

Componentización: Construir interfaces de usuario mediante componentes, haciendo que el código sea más modular y reutilizable.
DOM virtual: React utiliza un DOM virtual para optimizar el rendimiento, actualizando el DOM real solo cuando es necesario.
Flujo de datos unidireccional: Los datos fluyen en una sola dirección entre los componentes, lo que hace que la gestión del estado de la aplicación sea más clara y predecible.
Comunidad y ecosistema robustos: React cuenta con una amplia comunidad y soporte de numerosas bibliotecas de terceros, facilitando el desarrollo.

Usar React puede ayudar a los desarrolladores a construir aplicaciones web modernas y responsivas de manera más eficiente.

Crear y ejecutar un proyecto React usando ServBay

En este artículo, utilizaremos el entorno Node.js provisto por ServBay para crear y ejecutar un proyecto React. Usaremos la funcionalidad de 'Host' de ServBay para configurar el servidor web y acceder al proyecto a través de proxy inverso y servicio de archivos estáticos.

Crear el proyecto React

Inicializar el proyecto
Primero, asegúrate de haber instalado el entorno Node.js provisto por ServBay. Luego, inicializa un nuevo proyecto React con el siguiente comando:
bash
```
cd /Applications/ServBay/www
npx create-react-app servbay-react-app
```
1
2
Instalar dependencias
Ingresa al directorio del proyecto e instala las dependencias:
bash
```
cd servbay-react-app
npm install
```
1
2

Modificar el contenido de salida del proyecto React

Modificar el archivo src/App.js

Abre el archivo src/App.js y modifica el contenido para que la página web muestre "Hello ServBay!":

javascript

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello ServBay!</h1>
      </header>
    </div>
  );
}

export default App;

Entrar en modo de desarrollo

Iniciar el servidor de desarrollo
Inicia el servidor de desarrollo y especifica el puerto (por ejemplo: 8585):
bash
```
npm start -- --port 8585
```
1
Esto iniciará un servidor de desarrollo en local y expondrá el puerto 8585.
Configurar proxy inverso en ServBay Host
Usa la funcionalidad de 'Host' de ServBay para acceder al servidor de desarrollo mediante proxy inverso. En la configuración de 'Host' de ServBay, añade un nuevo proxy inverso:
- Nombre: My first React dev site
- Dominio: servbay-react-test.dev
- Tipo de Host: Proxy inverso
- IP: 127.0.0.1
- Puerto: 8585
Para más detalles, consulta addicionar un sitio web de desarrollo de Nodejs.
Acceder en modo de desarrollo
Abre el navegador y accede a https://servbay-react-test.dev para ver el proyecto en tiempo real. Dado que ServBay soporta dominios personalizados y certificados SSL gratuitos, disfrutarás de una mayor seguridad.

Construir la versión de producción

Construir la versión de producción
Una vez completado el desarrollo, utiliza el siguiente comando para construir la versión de producción:
bash
```
npm run build
```
1
Al finalizar la construcción, los archivos estáticos generados estarán en el directorio build.
Configurar servicio de archivos estáticos
Usa la funcionalidad de 'Host' de ServBay para acceder a la versión de producción mediante el servicio de archivos estáticos. En la configuración de 'Host' de ServBay, añade un nuevo sitio web estático:
- Nombre: My first React production site
- Dominio: servbay-react-test.prod
- Tipo de Host: Estático
- Directorio raíz del sitio web: /Applications/ServBay/www/servbay-react-app/build
Acceder en modo de producción
Abre el navegador y accede a https://servbay-react-test.prod para ver la versión de producción construida. Gracias a los dominios personalizados y certificados SSL gratuitos de ServBay, tu sitio web tendrá mayor seguridad y credibilidad.

Siguiendo estos pasos, habrás creado y ejecutado exitosamente un proyecto React, usando las funcionalidades que ofrece ServBay para gestionar y acceder a tu proyecto.