[[oktatas:web:react|< React]] ====== React - Szolgáltatás ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2023 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== Projekt készítése =====


npx create-react-app app01
code app01

===== api.js szolgáltatás ===== npm install axios


import axios from 'axios';

export const getPost = () => {
    return axios.get(`https://jsonplaceholder.typicode.com/todos`);
}

===== Employees.js ===== Vezessük be a employeeList objektumot:


import { useState } from "react";

const Employees = () => {
    const [employeeList, setEmployeeList] = useState([]);

    return (
    
        Dolgozók        
    
    );
};

export default Employees;

Kérjük le a dolgozók adatait:


import { useEffect, useState } from "react";
import { getEmployees } from "../services/api";

const Employees = () => {
    const [employeeList, setEmployeeList] = useState([]);

    useEffect(() => {
        getEmployees().then(res => setEmployeeList(res.data))
    }, []);

    return (
    
        Dolgozók        
    
    );
};

export default Employees;

A get() metódus egy Promise-t ad vissza, így futtatjuk rajta a then() függvényt. Rendereljük a táblázatot:


import { useEffect, useState } from "react";
import { getEmployees } from "../services/api";

const Employees = () => {
    const [employeeList, setEmployeeList] = useState([]);

    useEffect(() => {
        getEmployees().then(res => setEmployeeList(res.data))
    }, []);

    return (
    
        Dolgozók
        
                {employeeList.map(emp => (
                    
                ))}
            
            
                
                    Id
                    Név
                    Település
                    Fizetés
                
            
            
                        {emp.id}
                        {emp.name}
                        {emp.city}
                        {emp.salary}
                    
        
    
    );
};

export default Employees;