¿Cómo conectar Node.js con React.js?

ReactJS es una biblioteca JavaScript de código abierto que se utiliza para crear interfaces de usuario específicamente para aplicaciones de una sola página. Es ampliamente utilizado para hacer SPA (aplicación de página única) y tiene una gran comunidad de desarrolladores.

NodeJS se usa principalmente para servidores controlados por eventos que no bloquean, debido a su naturaleza de subproceso único. Se utiliza para sitios web tradicionales y servicios de API de back-end, pero se diseñó teniendo en cuenta las arquitecturas basadas en push en tiempo real.

En este artículo, aprenderemos cómo conectar NodeJS como backend con ReactJS como frontend.

requisitos previos:

• Conocimientos básicos de React y Node.
• Node.js instalado (versión 12+).
• npm instalado (versión 6+).

Estructura del Proyecto: Esta es la estructura cuando todos los módulos y archivos requeridos están listos.

Configuración de backend: en primer lugar, trabajaremos en nuestra parte de backend (NodeJS). En su carpeta de trabajo, cree un archivo llamado app.js para NodeJS y el archivo package.json para ejecutar todos los módulos que necesitamos.

Módulo de instalación:

• La instalación de ExpressJS es un marco de nodeJS:

npm install express

• Instalando nodemon:

npm install nodemon

Configuración del archivo .json del paquete: agregue el script de inicio y desarrollo, que son importantes para ejecutar y ejecutar dinámicamente el código después de los cambios realizados en su aplicación Node.js, respectivamente, en el archivo package.json , como se muestra a continuación.

{
 "name": "demoapp",
 "version": "1.0.0",
 "description": "",
 "main": "app.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "node app.js",
   "dev": "nodemon app.js"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "express": "^4.17.1"
 }
}

Nombre de archivo- app.js: aquí está el código JavaScript simple que debe escribirse en app.js, que es para NodeJS.

const express = require("express");
const app = express();
  
app.get("/", (req, res) => {
  res.send("Hello World!");
});
  
const PORT = process.env.PORT || 8080;
  
app.listen(PORT, console.log(`Server started on port ${PORT}`));

Ejecute la aplicación usando el siguiente comando:

npm run dev

Producción: 

• Esta será una salida de consola.

• Ahora vaya a http://localhost:8080/ en su navegador, verá el siguiente resultado.

Filename- app.js: Ahora, para conectar la parte de React, tenemos que hacer algunos cambios en app.js de NodeJS. Hemos completado la parte de backend.

const express = require("express");
const app = express();
  
app.post("/post", (req, res) => {
  console.log("Connected to React");
  res.redirect("/");
});
  
const PORT = process.env.PORT || 8080;
  
app.listen(PORT, console.log(`Server started on port ${PORT}`));

Configuración de frontend: primero, tenemos que crear la aplicación React y ejecutar su aplicación escribiendo el siguiente comando.

npx create-react-app demo
cd demo
npm start

Salida: Ahora vaya a http://localhost:3000/ en su navegador, verá la siguiente salida.

Conectando: hemos completado tanto la parte frontal como la trasera, ahora tenemos que conectar ambas. Ahora, para conectar Reactjs con Nodejs, hemos agregado esta línea en package.json de la carpeta de la aplicación de reacción:

"proxy": "http://localhost:8080

Nombre de archivo- paquete.json: El archivo paquete.json está en la carpeta de la aplicación React. Esto le dice a React las requests de API de proxy al servidor Node.js creado con Express en nuestro proyecto.

{
 "name": "demo",
 "version": "0.1.0",
 "private": true,
 "proxy": "http://localhost:8080",
 "dependencies": {
   "@testing-library/jest-dom": "^5.11.4",
   "@testing-library/react": "^11.1.0",
   "@testing-library/user-event": "^12.1.10",
   "react": "^17.0.1",
   "react-dom": "^17.0.1",
   "react-scripts": "4.0.2",
   "web-vitals": "^1.0.1"
 },
 "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },
 "eslintConfig": {
   "extends": [
     "react-app",
     "react-app/jest"
   ]
 },
 "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 }
}

Nombre de archivo- App.js: realizó algunos cambios en app.js de React para mostrar que están conectados.

import logo from "./logo.svg";
import "./App.css";
  
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" 
             alt="logo" />
          
<p>A simple React app.....</p>
  
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <form action="../../post" method="post" 
              className="form">
          <button type="submit">Connected?</button>
        </form>
      </header>
    </div>
  );
}
  
export default App;

Ahora ejecute el proceso Nodejs npm run dev en una terminal y en otra terminal inicie Reactjs usando npm start simultáneamente .

Salida: Vemos la salida de reacción, vemos un botón «Conectar», tenemos que hacer clic en él. Ahora, cuando vemos el lado del servidor de la consola, vemos que ReactJS está conectado con NodeJS.