Kuidas ehitada tõhusat täisvirna React rakendust: praktilised näpunäited ja parimad tavad

Kaasaegses veebiarenduses on React muutunud populaarseks valikuks kasutajaliideste ehitamiseks, eriti keerukate rakenduste loomisel, mis sarnanevad ühe lehe rakendustega (SPA). Arusaamine, kuidas ehitada täisvirna React rakendust tõhusalt ja hooldatavalt, aitab arendajatel suurendada tootlikkust ja vähendada hilisema hoolduse kulusid. Käesolev artikkel jagab mõningaid praktilisi näpunäiteid ja parimaid tavasid, et aidata teil paremini rakendada täisvirna React arendust.

1. Mõista täisvirna React arhitektuuri

Täisvirna React rakendused koosnevad tavaliselt esiosast ja tagasisidest, kus esiosa on ehitatud Reactiga liidese arendamiseks ja tagasiside võib kasutada Node.js, Express jne tehnolooge. Järgnevalt on toodud täisvirna React põhistruktuuri diagramm:

Esiosa (React)  Tagasiside (Node.js + Express)  Andmebaas (MongoDB/PostgreSQL)

• Esiosa: Kasutaja ja rakenduse interaktsiooni osa, mis on ehitatud React.js-iga.
• Tagasiside: Ärilogika, andmebaasi toimingute ja kasutaja päringute töötlemise osa.
• Andmebaas: Rakenduse andmete salvestamise koht, näiteks MongoDB või PostgreSQL.

2. Looge esiosa keskkond

2.1 Kasutage Create React App'i

Algajatele võimaldab Create React App kiiresti luua React projekti. Käivitage järgmine käsk terminalis:

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

2.2 Komponentide arendamine

Liidese jagamine väikesteks taaskasutatavateks komponentideks on Reacti põhialus. Meetodid:

• Jagage komponente funktsiooni ja kasutajaliidese (UI) vaatenurgast, näiteks nupp, vorm, nimekiri, jalus jne.
• Kasutage props'e komponentide vahelise oleku edastamise ja andmevoo haldamiseks.

Näidiskood:

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

2.3 Oleku haldamine

Keerukates rakendustes muutub oleku haldamine ülioluliseks. Oleku haldamiseks võib kasutada järgmisi meetodeid:

• React Context API: Sobib väikeste rakenduste jaoks.
• Redux: Sobib keskmise ja suurte rakenduste jaoks, omades tugevamat oleku haldamise võimet.

Näide: kasutades React Context'i

const AppContext = React.createContext();

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

3. Tagasiside arendamine

3.1 Node.js serveri seadistamine

Looge projekti juurkataloogis tagasiside kaust ja algatage Node.js projekt:

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

3.2 API marsruutide loomine

Looge backend kaustas server.js fail ja kirjutage põhilised API marsruudid:

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 Andmebaasi ühendamine

Kasutage Mongoose'i MongoDB ühendamiseks ja andmete töötlemiseks. Lisage server.js-i mudeli määratlemine ja toimingud.

4. Esiosa ja tagasiside integreerimine

4.1 Kasutage Axios'i andmete pärimiseks

Esiosa React rakenduses saatke Axios'i teegi kaudu päring tagasiside API-le. Esiteks installige Axios:

npm install axios

Seejärel kasutage komponentides Axios'i API kutsumiseks:

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 seadistamine

Veenduge, et tagasiside lubaks CORS-i, et vältida esiosa päringute ebaõnnestumist ristküsimuste tõttu. Expressis saab seda seadistada, importides cors vahepealse.

const cors = require('cors');
app.use(cors()); // Lubab ristküsimusi

5. Rakenduse juurutamine

5.1 Esiosa juurutamine

Võite valida Verceli või Netlify, et kiiresti juurutada React rakendust. Piisab, kui esitate koodi GitHubi ja ühendate vastava platvormiga.

5.2 Tagasiside juurutamine

Tagasiside saab valida Heroku, DigitalOcean jne pilveteenuste jaoks majutamiseks. Konfigureerige ja juurutage vastavalt teenusepakkuja nõuetele.

6. Jälgimine ja optimeerimine

• Kontrollige regulaarselt rakenduse jõudlust, kasutades tööriistu nagu Lighthouse, Web Vitals jne.
• Optimeerige laadimisaega, kasutades laisklaadimist (React.lazy) ja koodijagamist (React.Suspense) jne.

Kokkuvõte

Täisvirna React rakenduse ehitamine ei ole lihtne, kuid samm-sammult praktiseerides, koos sobivate tööriistade ja tehnoloogiate kasutamisega, saab suurendada arenduse efektiivsust ja luua paremat kasutajakogemust. Loodame, et käesoleva artikli praktilised näpunäited aitavad teil tõhusamalt täisvirna arendustöid teha. Alustame!