Kasutaja ja tooted ReactJS - OLEKSANDR BOHATYROV / PORTFOOLIO

Mis on React?

React – on JavaScript raamatukogu kasutajaliideste loomiseks.

Kes kasutab Reacti

Reacti kasutavad frontend-arendajad. MVC-mudelis, mille nimi tähendab Model-View-Controller, on kasutajaliides View, esitus, väline ekraan, millega kasutaja suhtleb, see osa veebilehest või rakendusest, mis on inimesele nähtav. Spetsialistid, kes sellega töötavad, kasutavad eelkõige React.js-i. Reactiga saavad töötada ka kujundajad, testijad ja teised veebiliideste loomisega tegelevad spetsialistid.

Milleks Reacti kasutatakse

Reacti kasutatakse ühe- ja mitmepoolsete rakenduste loomiseks ning suurte veebisaitide arendamiseks. Näiteks on selle abil kirjutatud Netflixi voogedastusteenus ja suuremate sotsiaalvõrgustike uudisvooge. Raamatukogu on loodud:

luua funktsionaalseid interaktiivseid veebiliideseid, millega töötades ei pea pidevalt lehte uuendama;
üksikute komponentide ja tervete lehekülgede kiireks ja mugavaks rakendamiseks – Reacti elemente on lihtne taaskasutada;
keeruliste tarkvarastruktuuride lihtne arendamine – neid on Reacti lähenemist kasutades lihtne kirjeldada;
uue funktsionaalsuse ümbertöötamine mis tahes algse tehnoloogiakihiga: raamatukogu on ülejäänud tööriistakomplektist sõltumatu ja töötab hästi, olenemata sellest, millele kood on kirjutatud;
ühe- ja mitmepoolsete rakenduste (SPA-d ja PWA-d) arendamine. Need on rakendused, mis toimivad programmidena ja veebiteenustena ning millel on sobiv liides;
töötamine veebisaidi serveripoolel või mobiilirakenduste arendamine. Sellistel juhtudel kasutatakse Reacti koos vahenditega, mis kohandavad veebitehnoloogiaid muudel eesmärkidel.

Seega pakub React vahendeid kasutajaliidese komponentide loomiseks, oleku haldamiseks ja DOMiga suhtlemiseks, kuid ei kehtesta konkreetset rakendusarhitektuuri. Arendajad saavad Reacti kasutada koos teiste raamatukogude ja tööriistadega vastavalt oma äranägemisele, mis muudab selle paindlikuks ja võimaldab luua erinevaid veebirakendusi.

Kasutajate nimekirja laadimine

    useEffect(() => {
        fetch('https://localhost:7198/api/Kasutaja')
            .then((response) => response.json())
            .then((data) => setUsers(data))
            .catch((error) => console.error("Viga kasutajate laadimisel:", error));
    }, []);

 Toodete nimekirja laadimine

    useEffect(() => {
        fetch('https://localhost:7198/tooted')
            .then((response) => response.json())
            .then((data) => setProducts(data))
            .catch((error) => console.error("Viga toodete laadimisel:", error));
    }, []);

Kasutaja lisamise funktsioon

   const addUser = (user) => {
        fetch('https://localhost:7198/api/Kasutaja', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(user)
        })
            .then((response) => response.json())
            .then((newUser) => setUsers([...users, newUser]))
            .catch((error) => console.error("Viga kasutaja lisamisel:", error));
    };

Toote lisamise funktsioon

const addProduct = (product) => {
        fetch('https://localhost:7198/tooted/lisa', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(product)
        })
            .then((response) => response.json())
            .then((newProduct) => setProducts([...products, newProduct]))
            .catch((error) => console.error("Viga toote lisamisel:", error));
    };

Toote ostmise funktsioon

Siin saame valida kasutaja ja lisada toote

    const buyProduct = (productId, userId) => {
        fetch(`https://localhost:7198/tooted/osta/${productId}/${userId}`, {
            method: 'POST'
        })
            .then((response) => response.json())
            .then((data) => alert(data))
            .catch((error) => console.error("Viga toote ostmisel:", error));
    };

Toote uuendamise funktsioon

    const updateProduct = (product) => {
        fetch(`https://localhost:7198/tooted/${product.id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(product)
        })
            .then((response) => response.json())
            .then((updatedProduct) => {
                setProducts(products.map((p) => (p.id === updatedProduct.id ? updatedProduct : p)));
            })
            .catch((error) => console.error("Viga toote uuendamisel:", error));
    };

Toote kustutamise funktsioon

    const deleteProduct = (productId) => {
        fetch(`https://localhost:7198/tooted/${productId}`, {
            method: 'DELETE'
        })
            .then(() => {
                setProducts(products.filter((p) => p.id !== productId));
            })
            .catch((error) => console.error("Viga toote kustutamisel:", error));
    };