#03expresszreactfetch

Opis React może pobierać dane z Expressa przez fetch.

#Express index.js

JAVASCRIPTcopyconst express = require("express");
const cors = require("cors");

const app = express();
const PORT = 3000;

app.use(cors());
app.use(express.json());

const produkty = [
  { id: 1, nazwa: "Myszka", cena: 50 },
  { id: 2, nazwa: "Klawiatura", cena: 120 },
  { id: 3, nazwa: "Monitor", cena: 700 }
];

app.get("/produkty", (req, res) => {
  res.json(produkty);
});

app.listen(PORT, () => {
  console.log("API działa na porcie " + PORT);
});

Instalacja CORS:

BASHcopynpm install cors

#React App.jsx

REACTcopyimport { useEffect, useState } from "react";

function App() {
  const [produkty, setProdukty] = useState([]);

  useEffect(() => {
    fetch("http://localhost:3000/produkty")
      .then((res) => res.json())
      .then((data) => setProdukty(data))
      .catch((err) => console.log(err));
  }, []);

  return (
    <div>
      <h1>Produkty z API</h1>

      {produkty.map((produkt) => (
        <div key={produkt.id}>
          {produkt.nazwa} - {produkt.cena} zł
        </div>
      ))}
    </div>
  );
}

export default App;