React

Przegląd

React to biblioteka JavaScript do budowania interfejsów użytkownika. Ten szablon wykorzystuje Create React App (CRA), który zapewnia wygodną konfigurację do nauki Reacta i solidną podstawę dla aplikacji jednostronicowych.

Pierwsze kroki

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>

npm install

npm start

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Lokalny rozwój z Dockerem

Jeśli nie masz lokalnie zainstalowanego Node.js, możesz użyć Dockera do uruchamiania komend Reacta.

Wymagania wstępne

Zainstaluj Docker Desktop dla swojego systemu operacyjnego (Windows, Mac lub Linux).

Uruchamianie komend z Dockerem

# Uruchom npm install
docker run --rm -v $(pwd):/app -w /app node:18 npm install

# Uruchom serwer deweloperski (dostępny pod localhost:3000)
docker run --rm -v $(pwd):/app -w /app -p 3000:3000 node:18 npm start

# Zbuduj wersję produkcyjną
docker run --rm -v $(pwd):/app -w /app node:18 npm run build

Struktura projektu

Gdzie znajdują się pliki:

├── src/
│   ├── components/           # Komponenty React
│   ├── hooks/                # Własne hooki React
│   ├── pages/                # Komponenty stron
│   ├── services/             # Serwisy API
│   ├── store/                # Konfiguracja store Redux
│   ├── App.js                # Komponent główny
│   ├── App.css               # Style aplikacji
│   └── index.js              # Punkt wejścia aplikacji
├── public/                   # Pliki statyczne
├── package.json              # Zależności i skrypty
├── tailwind.config.js        # Konfiguracja Tailwind CSS
└── Dockerfile                # Konfiguracja buildu Docker
        

Typowe zadania

Tworzenie komponentu

Twórz pliki .js w katalogu src/components/:

// src/components/Button.js
export default function Button({ label, onClick }) {
  return (
    <button
      className="bg-blue-500 text-white px-4 py-2 rounded"
      onClick={onClick}
    >
      {label}
    </button>
  );
}

Korzystanie z hooków React

Najczęściej używane hooki do stanu i efektów ubocznych:

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Korzystanie z React Router

React Router jest wstępnie skonfigurowany do nawigacji:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Korzystanie z Tailwind CSS

Tailwind CSS jest wstępnie skonfigurowany. Używaj klas bezpośrednio w JSX:

<div className="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Przydatne komendy

Rozwiązywanie problemów

Proces wdrażania

Za każdym razem, gdy wypychasz kod do Git, twoja aplikacja jest automatycznie budowana i wdrażana:

Adres URL twojej wdrożonej aplikacji ma następujący format:

https://<your-subdomain>-<repo-name>.<session-domain>

Przykład: https://student01-module-a.demo.nstrim.app