Client -> Server (ReactJS + ExpressJS)

⚙️ Część 1: Wprowadzenie

Połączenie Express.js i React.js pozwala stworzyć pełną aplikację typu full-stack — backend w Node/Express obsługuje dane, a frontend w React odpowiada za interfejs użytkownika.

Co chcemy osiągnąć:

1. Utworzyć serwer Express zwracający dane JSON
2. Utworzyć aplikację React
3. Połączyć je – React pobierze dane z Expressa

📂 Część 2: Struktura projektu

W katalogu głównym projektu utwórz następującą strukturę:

projekt-fullstack/
│
├── server/          # backend Express
│   └── index.js
│
└── client/          # frontend React
    ├── src/
    └── package.json

Serwer i klient działają niezależnie, ale komunikują się przez HTTP (np. REST API).

💡 Część 3: Tworzenie serwera Express

W folderze server/ zainicjuj projekt i zainstaluj Express:

cd server
npm init -y
npm install express cors

Następnie utwórz plik index.js z prostym API:

const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 5000;

app.use(cors());

app.get('/api/users', (req, res) => {
  res.json([
    { id: 1, name: 'Anna' },
    { id: 2, name: 'Marek' },
    { id: 3, name: 'Kasia' }
  ]);
});

app.listen(PORT, () => {
  console.log(`Serwer Express działa na http://localhost:${PORT}`);
});

⚛️ Część 4: Tworzenie aplikacji React

W folderze głównym utwórz aplikację React:

cd ..
npx create-react-app client

Po utworzeniu projektu przejdź do folderu client/ i uruchom aplikację:

cd client
npm start

Aplikacja React uruchomi się domyślnie na porcie 3000.

🔗 Część 5: Połączenie React z API Express

Otwórz plik client/src/App.js i zmodyfikuj go tak:

import React, { useState, useEffect } from 'react';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('http://localhost:5000/api/users')
      .then(res => res.json())
      .then(data => setUsers(data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <h2>Użytkownicy z Express API</h2>
      <ul>
        {users.map(u => (
          <li key={u.id}>{u.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Po uruchomieniu Reacta zobaczysz listę użytkowników zwróconą przez serwer Express.

🌐 Część 6: Użycie Proxy (opcjonalne)

Aby nie pisać pełnego adresu http://localhost:5000 w każdym zapytaniu, można dodać proxy w pliku client/package.json:

"proxy": "http://localhost:5000"

Wtedy w React możesz pisać krócej:

fetch('/api/users')

React automatycznie przekieruje zapytanie do serwera Express.

📌 Podsumowanie

🏆 Dobre praktyki: