Com construir una aplicació React de pila completa i eficient: consells pràctics i millors pràctiques

En el desenvolupament web modern, React s'ha convertit en una opció popular per construir interfícies d'usuari, especialment quan es tracta de crear aplicacions complexes similars a aplicacions d'una sola pàgina (SPA). Entendre com construir aplicacions React de pila completa de manera eficient i mantenible ajudarà els desenvolupadors a augmentar la seva productivitat i reduir els costos de manteniment posteriors. Aquest article compartirà alguns consells pràctics i millors pràctiques per ajudar-te a implementar millor el desenvolupament de pila completa amb React.

1. Entendre l'arquitectura de pila completa de React

Les aplicacions React de pila completa solen incloure una combinació de front-end i back-end, amb el front-end utilitzant React per al desenvolupament de la interfície, mentre que el back-end pot utilitzar tecnologies com Node.js, Express, etc. A continuació es mostra el diagrama bàsic de l'arquitectura de pila completa de React:

Front-end (React)  Back-end (Node.js + Express)  Base de dades (MongoDB/PostgreSQL)

• Front-end: La part amb la qual l'usuari interactua amb l'aplicació, construïda amb React.js.
• Back-end: La part que gestiona la lògica empresarial, les operacions de base de dades i les sol·licituds d'usuari.
• Base de dades: El lloc on s'emmagatzemen les dades de l'aplicació, com MongoDB o PostgreSQL.

2. Crear l'entorn de front-end

2.1 Utilitzar Create React App

Per als principiants, utilitzar Create React App pot ajudar a configurar ràpidament un projecte React. Executa la següent comanda al terminal:

npx create-react-app my-app
cd my-app
npm start

2.2 Desenvolupament basat en components

Dividir la interfície en petits components reutilitzables és un dels principis fonamentals de React. Els mètodes són els següents:

• Dividir els components des de la perspectiva de funcionalitat i UI, com ara botons, formularis, llistes, peu de pàgina, etc.
• Utilitzar props per gestionar la transmissió d'estat i el flux de dades entre components.

Codi d'exemple:

function Button({ label, onClick }) {
    return {label};
}

2.3 Gestió d'estat

En aplicacions complexes, la gestió d'estat es torna crucial. Es poden gestionar els estats de les següents maneres:

• React Context API: Adequat per a aplicacions petites.
• Redux: Adequat per a aplicacions mitjanes i grans, amb una capacitat de gestió d'estat més potent.

Exemple: utilitzant React Context

const AppContext = React.createContext();

function AppProvider({ children }) {
    const [state, setState] = React.useState(initialState);
    return (
        
            {children}
        
    );
}

3. Desenvolupament del back-end

3.1 Configurar un servidor Node.js

Crea una carpeta de back-end al directori arrel del projecte i inicialitza el projecte Node.js:

mkdir backend
cd backend
npm init -y
npm install express mongoose cors

3.2 Crear rutes API

Crea un fitxer server.js dins de la carpeta backend i escriu les rutes API bàsiques:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/mydb', { useNewUrlParser: true, useUnifiedTopology: true });

app.get('/api/items', (req, res) => {
    res.json([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]);
});

const PORT = 5000;
app.listen(PORT, () => {
    console.log(`El servidor s'està executant a http://localhost:${PORT}`);
});

3.3 Connectar-se a la base de dades

Utilitza Mongoose per connectar-te a MongoDB i gestionar les operacions de dades. Afegeix la definició i operacions del model a server.js.

4. Integrar front-end i back-end

4.1 Utilitzar Axios per a sol·licituds de dades

A l'aplicació React de front-end, envia sol·licituds a l'API del back-end mitjançant la biblioteca Axios. Primer, instal·la Axios:

npm install axios

Després, utilitza Axios per fer trucades a l'API dins del component:

import axios from 'axios';
import React, { useEffect, useState } from 'react';

function ItemList() {
    const [items, setItems] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:5000/api/items')
            .then(response => setItems(response.data))
            .catch(error => console.error('Error en la recuperació de dades:', error));
    }, []);

    return (
        
            {items.map(item => - {item.name}
)}
        
    );
}

4.2 Configuració de CORS

Assegura't que el back-end tingui habilitat CORS per evitar que les sol·licituds del front-end fallin per problemes de domini creuat. A Express, es pot configurar mitjançant la importació del middleware cors.

const cors = require('cors');
app.use(cors()); // Permetre el domini creuat

5. Desplegament de l'aplicació

5.1 Desplegament del front-end

Es poden triar Vercel o Netlify per desplegar ràpidament l'aplicació React. Només cal enviar el codi a GitHub i connectar-lo a la plataforma corresponent.

5.2 Desplegament del back-end

El back-end es pot desplegar en serveis en núvol com Heroku, DigitalOcean, etc. Configura i desplega segons els requisits del proveïdor de serveis.

6. Monitorització i optimització

• Comprova regularment el rendiment de l'aplicació, utilitzant eines com Lighthouse, Web Vitals, etc.
• Optimitza el temps de càrrega, utilitzant càrrega lazy (React.lazy) i divisió de codi (React.Suspense) entre altres tècniques.

Resum

Construir una aplicació React de pila completa no és una tasca senzilla, però mitjançant la pràctica pas a pas, combinada amb l'ús d'eines i tecnologies adequades, es pot augmentar l'eficiència del desenvolupament i crear una millor experiència d'usuari. Esperem que els consells pràctics d'aquest article t'ajudin a completar les teves tasques de desenvolupament de pila completa de manera més eficient. Comencem a treballar!