Cómo crear un frontend React y un backend Node / Express y conectarlos

En este artículo, lo guiaré a través del proceso de crear una aplicación React simple y conectarla a una API Node / Express simple que también crearemos.

No entraré en muchos detalles sobre cómo trabajar con ninguna de las tecnologías que mencionaré en este tutorial pero dejaré enlaces, por si quieres saber más.

Puedes encontrar todo el código en este repositorio que hice para el tutorial.

El objetivo aquí es brindarle una guía práctica sobre cómo configurar y conectar el cliente front-end y la API back-end .

Antes de ensuciarnos las manos, asegúrese de tener Node.js ejecutándose en su máquina.

Cree el directorio del proyecto principal

En su terminal, navegue a un directorio donde le gustaría guardar su proyecto. Ahora cree un nuevo directorio para su proyecto y navegue hacia él:

mkdir my_awesome_project cd my_awesome_project

Crea una aplicación React

Este proceso es realmente sencillo.

Usaré la aplicación create-react-app de Facebook para ... lo adivinaste, crear fácilmente una aplicación reaccionar llamada cliente :

npx create-react-app client cd client npm start

Veamos lo que he hecho:

  1. Usé npx de npm para crear una aplicación de reacción y la nombré cliente.
  2. cd (cambiar de directorio) al directorio del cliente.
  3. Inició la aplicación.

En su navegador, vaya a // localhost: 3000 /.

Si todo está bien, verá la página de bienvenida de React. ¡Felicidades! Eso significa que ahora tiene una aplicación React básica ejecutándose en su máquina local. Fácil ¿verdad?

Para detener su aplicación de reacción, simplemente presione Ctrl + cen su terminal.

Crear una aplicación Express

Ok, esto será tan sencillo como el ejemplo anterior. No olvide navegar a la carpeta superior de su proyecto.

Usaré Express Application Generator para crear rápidamente un esqueleto de aplicación y nombrarlo api:

npx express-generator api cd api npm install npm start

Veamos lo que he hecho:

  1. Usé npx de npm para instalar express-generator globalmente.
  2. Usé express-generator para crear una aplicación express y la nombró api.
  3. cd en el directorio de la API.
  4. Instaladas todas las dependencias.
  5. Inició la aplicación.

En su navegador, vaya a // localhost: 3000 /.

Si todo está bien, verá la página de bienvenida rápida. ¡Felicidades! Eso significa que ahora tiene una aplicación Express básica ejecutándose en su máquina local. Fácil ¿verdad?

Para detener su aplicación de reacción, simplemente presione Ctrl + cen su terminal.

Configurar una nueva ruta en la API Express

Ok, ensuciemos nuestras manos. Es hora de abrir su editor de código favorito (estoy usando VS Code) y navegar a la carpeta de su proyecto.

Si nombró la aplicación react como cliente y la aplicación express como api , encontrará dos carpetas principales: cliente y api.

  1. Dentro del directorio API , vaya a bin / www y cambie el número de puerto en la línea 15 de 3000 a 9000. Ejecutaremos ambas aplicaciones al mismo tiempo más adelante, por lo que al hacerlo evitará problemas. El resultado debería ser algo como esto:

2. En api / routes , cree un archivo testAPI.js y pegue este código:

var express = require(“express”); var router = express.Router(); router.get(“/”, function(req, res, next) { res.send(“API is working properly”); }); module.exports = router;

3. En el archivo api / app.js , inserte una nueva ruta en la línea 24:

app.use("/testAPI", testAPIRouter);

4. Ok, le está "diciendo" a express que use esta ruta, pero aún debe solicitarla. Hagamos eso en la línea 9:

var testAPIRouter = require("./routes/testAPI");

Los únicos cambios están en la línea 9 y la línea 25. Debería terminar algo como esto:

5. ¡Felicitaciones! Ha creado una nueva ruta.

Si inicia su aplicación API (en su terminal, navegue hasta el directorio API y " npm start" ), y vaya a // localhost: 9000 / testAPI en su navegador, verá el mensaje: API está funcionando correctamente.

Conectando React Client a la API Express

  1. En su editor de código, trabajemos en el directorio del cliente . Abrir app.js archivo ubicado en my_awesome_project / cliente / app.js .
  2. Aquí usaré la API Fetchpara recuperar datos de la API. Simplemente pegue este código después de la declaración de clase y antes del método de representación:
constructor(props) { super(props); this.state = { apiResponse: "" }; } callAPI() { fetch("//localhost:9000/testAPI") .then(res => res.text()) .then(res => this.setState({ apiResponse: res })); } componentWillMount() { this.callAPI(); }

3. Dentro del método de render, encontrará una etiqueta < ; p>. Vamos a cambiarlo para que represente el ponse de apiRes :

;{this.state.apiResponse}

Al final, este archivo debería verse así:

¡¡¡Lo sé!!! Esto fue demasiado. Copiar y pegar es tu amigo, pero tienes que entender lo que estás haciendo. Veamos lo que hice aquí:

  1. En las líneas 6 a 9, insertamos un constructor que inicializa el estado predeterminado.
  2. En las líneas 11 a 16, insertamos el método callAPI () que obtendrá los datos de la API y almacenará la respuesta en this.state.apiResponse.
  3. On lines 18 to 20, we inserted a react lifecycle method called componentDidMount(), that will execute the callAPI() method after the component mounts.
  4. Last, on line 29, I used the <;p> tag to display a paragraph on our client page, with the text that we retrieved from the API.

What the heck!! CORS ?

Oh yeah, baby! We are almost done. But if we start both our apps (client and API) and navigate to //localhost:3000/, you still won't find the expected result displayed on the page. If you open chrome developer tools, you will find why. In the console, you will see this error:

Error al cargar // localhost: 9000 / testAPI: No hay un encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen '// localhost: 3000'. Si una respuesta opaca satisface sus necesidades, configure el modo de la solicitud en 'no-cors' para obtener el recurso con CORS deshabilitado.

Esto es simple de resolver. Solo tenemos que agregar CORS a nuestra API para permitir solicitudes de origen cruzado. Hagamos precisamente eso. Debe consultar aquí para obtener más información sobre CORS.

  1. En su terminal, navegue hasta el directorio API e instale el paquete CORS :
npm install --save cors

2. En el editor de código vaya al directorio API y abra la my_awesome_project / api / app.js archivo.

3. En la línea 6 se requiere CORS:

var cors = require("cors");

4. Ahora, en la línea 18, "dígale" a Express que use CORS :

app.use(cors());

El archivo API app.js debería terminar algo como esto:

Buen trabajo. ¡¡Todo está hecho !!

¡Okay! ¡Estamos listos!

Ahora inicie ambas aplicaciones (cliente y API), en dos terminales diferentes, usando el comando npm start .

Si navega a // localhost: 3000 / en su navegador, debería encontrar algo como esto:

Por supuesto, este proyecto tal como está no servirá de mucho, pero es el comienzo de una aplicación Full Stack. Puedes encontrar todo el código en este repositorio que he creado para el tutorial.

A continuación, trabajaré en algunos tutoriales complementarios, como cómo conectar esto a una base de datos MongoDB e incluso, cómo ejecutarlo todo dentro de los contenedores Docker.

Como dice un buen amigo mío:

¡Sea fuerte y codifique!

... y no olvides ser increíble hoy;)