Projekt glowny: Budowanie aplikacji produkcyjnej

Nadszedl moment kulminacyjny naszej kosmicznej wyprawy. Przez caly ten modul poznawalismy zaawansowane wzorce i najlepsze praktyki React - od custom hookow, przez Higher-Order Components i render props, az po compound components, testowanie i deployment. Teraz pora polaczyc te wszystkie elementy w jeden spojny projekt: Centrum Dowodzenia Misja Kosmiczna.

Architektura projektu

Budujac aplikacje produkcyjna, kluczowe jest przemyslenie jej architektury. Nasz projekt laczy wzorce, ktore poznalismy w tym module:

1// Struktura projektu
2// src/
3//   hooks/          - Custom hooki (useMission, useFuel, useCrewStatus)
4//   components/     - Komponenty wielokrotnego uzytku
5//   hoc/            - Higher-Order Components (withAuth, withLogging)
6//   context/        - Konteksty React (MissionContext, ThemeContext)
7//   utils/          - Funkcje pomocnicze i walidacja
8//   App.jsx         - Glowny komponent aplikacji

Custom Hooki - serce logiki biznesowej

Custom hooki pozwalaja wydzielic logike z komponentow i uczynic ja wielokrotnie uzywalna. W naszym projekcie kazdy aspekt misji kosmicznej ma swoj dedykowany hook:

1// Custom hook do zarzadzania misja
2function useMission(initialMission) {
3  const [mission, setMission] = useState(initialMission);
4  const [status, setStatus] = useState('planning');
5
6  const launch = () => {
7    if (mission.fuel >= mission.requiredFuel) {
8      setStatus('in-progress');
9    }
10  };
11
12  const complete = () => setStatus('completed');
13  const abort = () => setStatus('aborted');
14
15  return { mission, status, launch, complete, abort };
16}

Higher-Order Components i Render Props

HOC pozwalaja na dodawanie funkcjonalnosci do komponentow bez modyfikacji ich kodu zrodlowego. Render props daja elastycznosc w renderowaniu:

1// HOC - dodaje logowanie akcji
2function withLogging(WrappedComponent) {
3  return function LoggedComponent(props) {
4    const logAction = (action) => {
5      console.log(`[LOG] ${new Date().toISOString()}: ${action}`);
6    };
7    return <WrappedComponent {...props} logAction={logAction} />;
8  };
9}
10
11// Render Props - udostepnia dane o paliwie
12function FuelProvider({ render }) {
13  const [fuel, setFuel] = useState(100);
14  const consume = (amount) => setFuel(prev => Math.max(0, prev - amount));
15  const refuel = (amount) => setFuel(prev => Math.min(100, prev + amount));
16  return render({ fuel, consume, refuel });
17}

Compound Components

Wzorzec compound components pozwala tworzyc komponenty, ktore dzialaja razem jako spojny system:

1// Compound Component - Panel Misji
2function MissionPanel({ children }) {
3  const [isExpanded, setIsExpanded] = useState(false);
4  return (
5    <div className="mission-panel">
6      {React.Children.map(children, child =>
7        React.isValidElement(child)
8          ? React.cloneElement(child, { isExpanded, setIsExpanded })
9          : child
10      )}
11    </div>
12  );
13}
14
15MissionPanel.Header = function Header({ isExpanded, setIsExpanded, children }) {
16  return (
17    <div onClick={() => setIsExpanded(!isExpanded)} style={{ cursor: 'pointer' }}>
18      {children} {isExpanded ? '▲' : '▼'}
19    </div>
20  );
21};
22
23MissionPanel.Body = function Body({ isExpanded, children }) {
24  return isExpanded ? <div>{children}</div> : null;
25};

Testowanie - klucz do niezawodnosci

Kod produkcyjny musi byc przetestowany. Kazdy custom hook, komponent i funkcja pomocnicza powinny miec odpowiednie testy:

1// Przykladowy test custom hooka
2// describe('useMission', () => {
3//   it('powinien uruchomic misje gdy jest wystarczajaco paliwa', () => {
4//     const { result } = renderHook(() =>
5//       useMission({ fuel: 100, requiredFuel: 50 })
6//     );
7//     act(() => result.current.launch());
8//     expect(result.current.status).toBe('in-progress');
9//   });
10//
11//   it('nie powinien uruchomic misji bez paliwa', () => {
12//     const { result } = renderHook(() =>
13//       useMission({ fuel: 20, requiredFuel: 50 })
14//     );
15//     act(() => result.current.launch());
16//     expect(result.current.status).toBe('planning');
17//   });
18// });

Deployment i optymalizacja

Przed wdrozeniem aplikacji na produkcje upewnij sie, ze:

1. Optymalizacja wydajnosci - uzyj

   React.memo

   ,

   useMemo

   i

   useCallback

   tam, gdzie to potrzebne
2. Code splitting - podziel aplikacje na mniejsze chunki za pomoca

   lazy()

   i

   Suspense

3. Zmienne srodowiskowe - przechowuj konfiguracje w plikach

   .env

4. Error boundaries - dodaj obsluge bledow na poziomie komponentow
5. Build produkcyjny - uruchom

   npm run build

   i przetestuj wynik

Podsumowanie modulu

W tym module poznales zaawansowane wzorce React, ktore sa fundamentem profesjonalnego tworzenia aplikacji:

• Custom Hooki - wydzielanie i wspoldzielenie logiki miedzy komponentami
• Higher-Order Components - dodawanie funkcjonalnosci przez kompozycje
• Render Props - elastyczne renderowanie z przekazywaniem danych
• Compound Components - tworzenie spojnych systemow komponentow
• Testowanie - zapewnienie niezawodnosci kodu
• Deployment - wdrazanie aplikacji na produkcje

Te wzorce to Twoj zestaw narzedzi kosmicznego inzyniera - dzieki nim mozesz budowac aplikacje React na najwyzszym poziomie!