szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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 =====

<code>
npx create-react-app app01
code app01
</code>

===== api.js szolgáltatás =====

  npm install axios

<code javascript src/services/api.js>
import axios from 'axios';

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

</code>

===== Employees.js =====

Vezessük be a employeeList objektumot:

<code javascript src/pages/Emplyoees.js>
import { useState } from "react";

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

    return (
    <div class="container">
        <h1>Dolgozók</h1>        
    </div>
    );
};

export default Employees;
</code>

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

<code javascript src/pages/Emplyoees.js>
import { useEffect, useState } from "react";
import { getEmployees } from "../services/api";

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

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

    return (
    <div class="container">
        <h1>Dolgozók</h1>        
    </div>
    );
};

export default Employees;
</code>

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

Rendereljük a táblázatot:

<code javascript src/pages/Employees.js>
import { useEffect, useState } from "react";
import { getEmployees } from "../services/api";

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

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

    return (
    <div class="container">
        <h1>Dolgozók</h1>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Név</th>
                    <th>Település</th>
                    <th>Fizetés</th>
                </tr>
            </thead>
            <tbody>
                {employeeList.map(emp => (
                    <tr key={emp.id}>
                        <td>{emp.id}</td>
                        <td>{emp.name}</td>
                        <td>{emp.city}</td>
                        <td>{emp.salary}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    </div>
    );
};

export default Employees;

</code>