Od Pliku Tekstowego do Gry Online: Kompletny Poradnik Wdrażania Aplikacji React

Andrzej Majewski Written in Linux, Serwer www, WordPress

Linux devotee and Bournemouth-based IT expert, obsessed with homelabbing, server performance, and elegant Python code.

Spis treści

Toggle

Masz gotowy kod do gry w React, ale znajduje się on w jednym pliku tekstowym? Chcesz umieścić tę grę na swojej stronie WordPress, w konkretnym podkatalogu, i móc ją łatwo aktualizować? Ten poradnik przeprowadzi Cię przez cały proces krok po kroku, od stworzenia projektu, przez konfigurację, aż po publikację i rozwiązywanie typowych problemów.

Krok 1: Stworzenie Struktury Projektu z Pliku z Kodem

Pierwszym wyzwaniem jest przekształcenie luźnego pliku z kodem w pełnoprawny, działający projekt React. Samo posiadanie pliku .txt nie wystarczy – potrzebujemy całej struktury folderów i plików konfiguracyjnych, które pozwolą na instalację zależności i budowanie aplikacji.

Użyjemy narzędzia Vite, aby szybko wygenerować nowoczesną strukturę projektu React.

1. Tworzenie projektu:npm create vite@latest movie-quiz -- --template react
Ta komenda tworzy nowy folder o nazwie movie-quiz i wypełnia go kompletnym, minimalnym szablonem projektu React.
2. Instalacja zależności:cd movie-quiz npm install
Po wejściu do nowego folderu, npm install czyta plik package.json i pobiera wszystkie niezbędne biblioteki do podfolderu node_modules.

Po wykonaniu tych kroków mamy gotową strukturę. Teraz wystarczy skopiować kod z Twojego pliku Quiz game Movies - React.txt i wkleić go do src/App.jsx, zastępując domyślną zawartość.

Krok 2: Konfiguracja Tailwind CSS

Jeśli Twój kod, tak jak w naszym przypadku, używa klas stylów z Tailwind CSS (np. bg-gray-50, font-bold), musimy dodać go do projektu. Najnowsze wersje Tailwind integrują się z Vite w bardzo prosty sposób.

Zainstaluj wtyczkę:npm install @tailwindcss/vite

Zaktualizuj konfigurację Vite: Otwórz plik vite.config.js i dodaj wtyczkę Tailwind:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/movie-quiz/',
  plugins: [
    react(),
    tailwindcss(),
  ],
})

Zaimportuj style: Otwórz plik src/index.css, usuń jego zawartość i wklej jedną linię:

@import "tailwindcss";

Po tych krokach aplikacja uruchomiona za pomocą npm run dev powinna wyświetlać się poprawnie ze wszystkimi stylami.

Krok 3: Publikacja Gry w Podkatalogu WordPress

Gdy gra działa już lokalnie, możemy opublikować ją w internecie.

1. Konfiguracja ścieżki bazowej: Aby gra działała w podkatalogu (np. /gra-quiz/), musimy dodać opcję base: '/gra-quiz/' do pliku vite.config.js. To kluczowy krok, który sprawia, że wszystkie ścieżki do plików (CSS, JS) w zbudowanej aplikacji są poprawne.
2. Budowa wersji produkcyjnej:npm run build
Ta komenda tworzy folder dist zawierający zoptymalizowane, statyczne pliki gry, gotowe do publikacji.
3. Wysłanie plików na serwer: Za pomocą klienta FTP połącz się z serwerem, stwórz podkatalog gra-quiz w głównym folderze WordPressa i wgraj do niego zawartość folderu dist.
4. Konfiguracja .htaccess: Aby odświeżanie strony wewnątrz gry działało poprawnie, w folderze gra-quiz na serwerze stwórz plik .htaccess z regułami przekierowującymi wszystkie zapytania do pliku index.html gry. Zapobiega to przejęciu routingu przez WordPress i wyświetlaniu błędu 404.

Krok 4: Aktualizacja Gry

Proces aktualizacji (np. dodawania nowych pytań) jest prosty i cykliczny:

1. Modyfikuj kod: Zmień pliki projektu na swoim komputerze (np. dodaj pytania w src/App.jsx).
2. Zbuduj ponownie: Uruchom npm run build, aby stworzyć nową wersję plików w folderze dist.
3. Opublikuj: Połącz się z serwerem, usuń starą zawartość folderu gra-quiz i wgraj w jej miejsce nową zawartość folderu dist.

Słowniczek Użytych Komend

• npm create vite@latest [nazwa] -- --template react: Tworzy nowy, gotowy do pracy projekt React przy użyciu narzędzia Vite.
• cd [nazwa-folderu]: (Change Directory) Zmienia bieżący folder w terminalu.
• npm install: Czyta plik package.json i instaluje wszystkie potrzebne biblioteki.
• npm install [nazwa-pakietu]: Instaluje konkretny, dodatkowy pakiet.
• npm run dev: Uruchamia lokalny serwer deweloperski z podglądem na żywo.
• npm run build: Tworzy zoptymalizowaną, produkcyjną wersję aplikacji w folderze dist.
• npx [komenda]: Uruchamia polecenie z pakietu zainstalowanego lokalnie w projekcie.
• nvm install [wersja]: Instaluje określoną wersję Node.js za pomocą menedżera NVM.
• nvm use [wersja]: Przełącza aktywną wersję Node.js w terminalu.
• rm -rf [nazwa-folderu]: (Remove) Usuwa folder wraz z całą jego zawartością.

Rozwiązywanie Problemów (FAQ)

Tutaj zebraliśmy błędy, które napotkaliśmy podczas procesu, wraz z ich rozwiązaniami.

Błąd: Could not read package.json

Problem:

Próba uruchomienia komendy npm run build w folderze, który zawiera tylko plik z kodem, a nie całą strukturę projektu.

Rozwiązanie:

Należy najpierw stworzyć pełną strukturę projektu za pomocą komendy npm create vite@latest nazwa-projektu — –template react, a dopiero potem przenieść do niego swój kod i uruchamiać komendy npm.

Błąd: could not determine executable to run

Problem:

Komenda npx tailwindcss init -p nie działa. npx nie jest w stanie znaleźć i uruchomić pakietu tailwindcss.

Rozwiązanie:

Ten błąd może mieć wiele przyczyn, od uszkodzonego cache npm po problemy ze ścieżkami w systemie. Najskuteczniejszym rozwiązaniem jest ominięcie problemu i skorzystanie z nowoczesnej integracji Tailwind z Vite (opisanej w Kroku 2), która nie wymaga ręcznego uruchamiania tej komendy. Jeśli jednak musisz ją uruchomić, spróbuj najpierw wykonać czystą instalację (rm -rf node_modules package-lock.json, a następnie npm install).

Błąd: Komunikat o wtyczce PostCSS dla Tailwind

Problem:

Po uruchomieniu serwera deweloperskiego pojawia się błąd informujący, że wtyczka PostCSS dla Tailwind została przeniesiona do osobnego pakietu.

Rozwiązanie:

Ten błąd pojawia się przy próbie użycia starszej metody konfiguracji z najnowszą wersją Tailwind CSS (v4+). Poprawne rozwiązanie to skorzystanie z oficjalnej wtyczki @tailwindcss/vite, która automatyzuje cały proces. Należy zainstalować wtyczkę, dodać ją do pliku vite.config.js i usunąć starą konfigurację z pliku postcss.config.js (jeśli istnieje).

Andrzej Majewski

Moja fascynacja technologią zaczęła się podczas studiów informatycznych na Uniwersytecie Zielonogórskim. Od czasu przeprowadzki do Wielkiej Brytanii w 2015 roku i osiedlenia się na stałe w Bournemouth, przekułem tę pasję w karierę zawodową poświęconą infrastrukturze o wysokiej wydajności.W głębi duszy jestem entuzjastą Linuxa – to zaangażowanie wykracza poza moją pracę zawodową w SolutionsInc i obejmuje również mój rozbudowany, prywatny homelab. Niezależnie od tego, czy zarządzam złożonymi architekturami serwerowymi przez ISPConfig, buduję systemy VoIP w ramach Phones Rescue, czy tworzę narzędzia do automatyzacji w Pythonie, najlepiej czuję się, podejmując wyzwania związane z projektowaniem wydajnych rozwiązań open-source