Kaip sukurti efektyvią viso krūvio React programą: praktiniai patarimai ir geriausios praktikos

Šiuolaikinėje žiniatinklio kūrimo srityje React tapo populiariu pasirinkimu kuriant vartotojo sąsajas, ypač kuriant sudėtingas programas, panašias į vieno puslapio programas (SPA). Supratimas, kaip efektyviai ir palaikomu būdu sukurti viso krūvio React programą, padės kūrėjams padidinti produktyvumą ir sumažinti vėlesnes priežiūros išlaidas. Šiame straipsnyje pasidalinsime praktiniais patarimais ir geriausiomis praktikomis, kad padėtume jums geriau įgyvendinti viso krūvio React kūrimą.

1. Suprasti viso krūvio React architektūrą

Viso krūvio React programa paprastai apima priekinės ir galinės dalies derinį, kur priekinė dalis kuriama naudojant React, o galinė dalis gali naudoti Node.js, Express ir kt. technologijų krūvą. Štai pagrindinė viso krūgio React architektūros schema:

Priekinė dalis (React)  Galinė dalis (Node.js + Express)  Duomenų bazė (MongoDB/PostgreSQL)

• Priekinė dalis: vartotojo sąsajos dalis, su kuria vartotojai bendrauja, sukurta naudojant React.js.
• Galinė dalis: dalis, kuri tvarko verslo logiką, duomenų bazės operacijas ir vartotojo užklausas.
• Duomenų bazė: vieta, kurioje saugomi programos duomenys, pavyzdžiui, MongoDB arba PostgreSQL.

2. Sukurti priekinės dalies aplinką

2.1 Naudoti Create React App

Pradedantiesiems naudoti Create React App leidžia greitai sukurti React projektą. Terminale vykdykite šią komandą:

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

2.2 Komponentinė plėtra

Suskirstyti sąsają į mažus, pakartotinai naudojamus komponentus yra pagrindinis React principas. Metodai:

• Išskirti komponentus pagal funkcijas ir UI, pavyzdžiui, mygtukai, formos, sąrašai, poraštės ir kt.
• Naudoti props, kad valdyti komponentų būsenos perdavimą ir duomenų srautą.

Pavyzdžio kodas:

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

2.3 Būsenos valdymas

Sudėtingose programose būsenos valdymas tampa itin svarbus. Būseną galima valdyti šiais būdais:

• React Context API: tinka mažoms programoms.
• Redux: tinka vidutinėms ir didelėms programoms, turinčioms stipresnes būsenos valdymo galimybes.

Pavyzdys: naudojant React Context

const AppContext = React.createContext();

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

3. Galinės dalies kūrimas

3.1 Node.js serverio nustatymas

Projekto šakniniame kataloge sukurkite galinės dalies aplanką ir inicijuokite Node.js projektą:

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

3.2 API maršrutų kūrimas

backend aplanke sukurkite server.js failą ir parašykite pagrindinius API maršrutus:

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(`Server is running on http://localhost:${PORT}`);
});

3.3 Duomenų bazės prijungimas

Naudokite Mongoose, kad prisijungtumėte prie MongoDB ir atliktumėte duomenų operacijas. server.js faile pridėkite modelio apibrėžimą ir operacijas.

4. Priekinės ir galinės dalies integracija

4.1 Naudoti Axios duomenų užklausoms

Priekinėje React programoje naudokite Axios biblioteką, kad siųstumėte užklausas į galinę API. Pirmiausia įdiekite Axios:

npm install axios

Tada komponente naudokite Axios API skambinimui:

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 fetching data:', error));
    }, []);

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

4.2 CORS nustatymas

Įsitikinkite, kad galinė dalis įgalina CORS, kad išvengtumėte priekinės dalies užklausų nesėkmių dėl kryžminio domeno problemų. Express galite nustatyti, įtraukdami cors tarpininką.

const cors = require('cors');
app.use(cors()); // Leidžia kryžminius domenus

5. Programos diegimas

5.1 Priekinės dalies diegimas

Galite pasirinkti Vercel arba Netlify, kad greitai diegtumėte React programą. Tiesiog įkelkite kodą į GitHub ir prijunkite prie atitinkamos platformos.

5.2 Galinės dalies diegimas

Galinę dalį galite pasirinkti talpinti Heroku, DigitalOcean ir kt. debesų paslaugose. Konfigūruokite ir diekite pagal paslaugų teikėjo reikalavimus.

6. Stebėjimas ir optimizavimas

• Reguliariai tikrinkite programos našumą, naudodami įrankius, tokius kaip Lighthouse, Web Vitals ir kt.
• Optimizuokite įkėlimo laiką, naudodami tingų įkėlimą (React.lazy) ir kodo dalijimą (React.Suspense) ir kt.

Santrauka

Sukurti viso krūvio React programą nėra lengva, tačiau žingsnis po žingsnio praktikuojant, kartu naudojant tinkamus įrankius ir technologijas, galima padidinti kūrimo efektyvumą ir sukurti geresnę vartotojo patirtį. Tikimės, kad šie praktiniai patarimai padės jums efektyviau atlikti viso krūvio kūrimo užduotis. Pradėkime dirbti!