Ten plik README zawiera przegląd prostej aplikacji pogodowej stworzonej przy użyciu Reacta oraz TypeScript, skupiając się na jej strukturze, komponentach, integracji z API oraz użytych technologiach.
- React: Biblioteka JavaScript do budowania interfejsów użytkownika.
- TypeScript: Rozszerzenie JavaScript dodające statyczne typy.
- react-router-dom: Deklaratywny routing dla aplikacji React.
- Tailwind CSS: Framework CSS oparty na klasach pomocniczych do stylizacji.
W projekcie komponenty są tworzone i zarządzane ręcznie.
Routing jest zarządzany przy użyciu react-router-dom
. Komponent BrowserRouter
ustawia ścieżki dla różnych adresów URL:
<Router>
<Routes>
<Route path="/" element={<App day="today" />} />
<Route path="/tomorrow" element={<App day="tomorrow" />} />
</Routes>
</Router>
HTML jest renderowany przy użyciu składni JSX w komponentach React (App.tsx
, Nav.tsx
, DailyForecast.tsx
).
Dla prostoty i ułatwienia korzystania z aplikacji pobieramy dane bezpośrednio z publicznego API (https://api.open-meteo.com/v1/forecast
).
Aplikacja integruje się z API Open Meteo, pobierając dane pogodowe na podstawie określonych parametrów (params
w utils.tsx
).
- React: Zarządza komponentami interfejsu użytkownika i stanem.
- TypeScript: Zapewnia bezpieczeństwo typów i zwiększa jakość kodu.
- react-router-dom: Obsługuje nawigację między stronami w aplikacji.
- Tailwind CSS: Zapewnia szybkie i responsywne stylizowanie komponentów.
- Routing: Obsługiwany przy użyciu komponentu
<Link>
zreact-router-dom
do nawigacji między danymi pogodowymi na dzisiaj i jutro. - Integracja z API: Zaimplementowana w
App.tsx
za pomocą funkcjifetch()
do pobierania danych pogodowych na podstawie określonych parametrów. - Stylizacja: Uzywamy Tailwind CSS do szybkiego i responsywnego stylizowania.
Aby uruchomić aplikację lokalnie:
- Sklonuj repozytorium.
- Zainstaluj zależności za pomocą
npm install
. - Uruchom serwer deweloperski za pomocą
npm start
.
Ten plik README przedstawia przegląd struktury aplikacji pogodowej, jej komponentów, integracji z API oraz użytych technologii. Opisuje sposób uruchomienia aplikacji lokalnie oraz wymienia narzędzia i biblioteki wykorzystane do budowy projektu.