Cómo configurar reaccionar.JS en el lado del cliente en el desarrollo de Mern Stack

Reaccionar.js se considera el nivel superior en el desarrollo de Mern Stack. Es un declarativo Marco de JavaScript Se utiliza para desarrollar aplicaciones dinámicas del lado del cliente. También le permite crear interfaces complejas conectando los componentes de sus datos desde el servidor de backend y luego los convierte en HTML. React también se destaca en el manejo de interfaces basadas en datos y con estado con un código mínimo y otras funcionalidades, como manejo de errores, listas, formularios, eventos, que espera de un marco web moderno.

Este artículo demostrará cómo configuración el Reaccionar.js aplicar lado del cliente en Desarrollo de Mern Stack. Entonces, comencemos!

Nota: Asegúrate de tener "Nodo.js"Instalado en su sistema. Instálelo primero antes de saltar a React.Desarrollo de aplicaciones JS si aún no lo tiene.

Cómo configurar reaccionar.JS en el lado del cliente en el desarrollo de Mern Stack

Nodo.JS también tiene un "npm"Node Package Manager, que instalará todos los paquetes JavaScript requeridos en su React.proyecto JS. También comprende una herramienta de paquete de nodo "NPXHerramienta que puede usar para ejecutar paquetes ejecutables.

Para configurar reaccionar.JS en el lado del cliente en el desarrollo de la pila de Mern, primero debe seleccionar un directorio para instalar el react.Proyecto basado en JS. Puedes usar el "Solicitante del sistema" para este propósito. Sin embargo, utilizaremos el "Código de Visual Studio"Terminal, lo que facilita la operación con el React.aplicación JS.

Para hacerlo, en primer lugar, busque el "Código de Visual Studio"Aplicación y abrirla:

En la aplicación abierta, haga clic en el "Archivo"Opción de la barra de menú y seleccione el"Carpeta abierta" opción:

Ahora, busque la carpeta donde desee colocar su reaccionamiento.archivo relacionado con la aplicación JS. En nuestro caso, hemos seleccionado el "Empleado-Mern-Proyecto"Carpeta, presente en el"Disco local (E :)":

A continuación, presione Ctrl + Shift + ' Para abrir la terminal de código de Visual Studio. También puede realizar la operación especificada con la ayuda del menú "Terminal":

En este punto, todos estamos listos para configurar el React.Aplicación JS en el desarrollo de Mern Stack. La ejecución del "NPX"Comando con el"crear"La opción te ayuda a crear un reaccionamiento.aplicación JS. Por ejemplo, el subterráneo "NPX"El comando creará un"MERN-EMSISTEMA"Reaccionar.Aplicación JS que tendrá todas las dependencias requeridas en su carpeta de proyecto:

> NPX Crear reaccion-app Mernemsystem

Espere unos minutos, ya que la instalación de los paquetes llevará algún tiempo:

La salida libre de error a continuación indica que hemos instalado con éxito el "MERN-EMSISTEMA"Reaccionar.Aplicación JS:

El código de Visual Studio cargará automáticamente el React Crear.Carpeta de aplicación JS. Ahora, haremos algunos cambios en el "índice.html"Archivo del"MERN-EMSISTEMA"Reaccionar.Aplicación JS:

El "índice.html"Archivo de su reacción.La aplicación JS de alguna manera se verá así:

Aquí, "Aplicación reaccionar" representa el "título" de nuestro "MERN-EMSISTEMA" solicitud:

Utilizaremos el reaccionamiento creado.Aplicación JS para desarrollar un sistema de gestión de empleados con Mern Stack. Entonces, en primer lugar, cambiaremos el título de nuestro "MERN-EMSISTEMA"Reaccionar.Aplicación JS a "Sistema de gestión de empleados"Y guarda el abierto"índice.html" archivo:

En el siguiente paso, cambiaremos el directorio de trabajo actual a "MERN-EMSISTEMA"Usando el terminal:

> CD MERN-Emsystem

Ahora, escriba el a continuación "npm"Comando para comenzar el desarrollo del servidor web:

> Inicio de NPM

Como puede ver en la salida que nuestro "MERN-EMSISTEMAEl proyecto se compila correctamente y está listo para ver en el navegador:

Escribiendo el "Localhost: 3000"En la barra de direcciones de nuestro navegador, veremos la siguiente interfaz para el"MERN-EMSISTEMA"Reaccionar.Aplicación JS:

También puede cambiar el contenido del "Aplicación.js"Archivo JavaScript para manejar o ver los componentes de su aplicación React:

Por ejemplo, agregando el siguiente código en nuestro "Aplicación.js"El archivo guardará el"Sistema de gestión de empleados"Contenido dentro de un contenedor:

importar './Aplicación.CSS ';
función app ()
devolver (

Sistema de gestión de empleados

);

Exportar aplicación predeterminada;

Desde la imagen dada a continuación, puede ver que el agregado "Sistema de gestión de empleados"Contenido para nuestro React.La aplicación JS se muestra correctamente:

Eso se trataba del procedimiento de configurar reaccionar.Aplicación JS en el lado del cliente en el desarrollo de Mern Stack. Puede realizar más personalización de acuerdo con sus requisitos.

Conclusión

Reaccionar.JS es una biblioteca JavaScript utilizada para desarrollar el front-end de las aplicaciones basadas en Mern Stack. Permite a los usuarios crear componentes y código de interfaz de usuario en JavaScript. Debido a su capacidad para manejar el cambio rápido en los datos y construir una conexión sólida con el back-end, se usa comúnmente en el desarrollo de aplicaciones de pila MERN. Este artículo demostró el procedimiento de configurar Reaccionar.js aplicar lado del cliente en Desarrollo de Mern Stack.