magdo
302 lines
8.1 KiB
Markdown
302 lines
8.1 KiB
Markdown
# React Feladat: Téma Váltó Alkalmazás
|
|
|
|
**Bejelentkezés szintje:** Alapszintű
|
|
**Becsült időtartam:** 45 perc
|
|
**Megkövetelt technológiák:** React, React Router, Context API, Tailwind CSS
|
|
|
|
---
|
|
|
|
## 📋 Feladat Leírása
|
|
|
|
Készítsd el egy egyszerű **Téma Váltó (Theme Switcher)** alkalmazást React-ben, amely lehetővé teszi a felhasználónak, hogy váltson a világos és sötét mód között. Az alkalmazásnak tartalmaznia kell egy felső navigációs sávot, többoldali routing-ot és globális állapotkezelést Context API-val.
|
|
|
|
---
|
|
|
|
## 🎯 Elvégzendő Feladatok
|
|
|
|
### 1. Projekt Beállítás (5 perc)
|
|
- [ ] Proj már létezik vagy új Vite + React projekt létrehozása
|
|
- [ ] Tailwind CSS telepítése és konfigurálása
|
|
- [ ] React Router (v6) telepítése és beállítása
|
|
|
|
### 2. Context API Beállítása (8 perc)
|
|
- [ ] Hozz létre egy `ThemeContext.jsx` fájlt
|
|
- [ ] Domb le az alábbi értékeket a context-ben:
|
|
- `theme` (light / dark)
|
|
- `toggleTheme()` függvény
|
|
- [ ] Wrapped az App komponenst a `ThemeProvider`-rel
|
|
|
|
### 3. Navigáció Komponens (10 perc)
|
|
- [ ] Hozz létre egy `Navbar.jsx` komponenst
|
|
- [ ] Tartalmazzon:
|
|
- Logo/alkalmazásnév
|
|
- 2-3 db navigációs linkek (Home, About, Contact)
|
|
- **Téma váltó gomb** (☀️ / 🌙 ikon vagy szöveg)
|
|
- [ ] Styling Tailwind-vel (responsive, reszponzív dizájn)
|
|
- [ ] A navbar viselkedje a theme alapján az osztályokat
|
|
|
|
### 4. Routing Beállítása (7 perc)
|
|
- [ ] Konfigurálj 3 oldalt:
|
|
- **Home** (`/`) - Üdvözlő oldal
|
|
- **About** (`/about`) - Rövid bemutatkozás
|
|
- **Contact** (`/contact`) - Dummy kontakt form
|
|
- [ ] Hozz létre komponenseket az egyes oldalakhoz
|
|
|
|
### 5. Home Oldal Implementálása (10 perc)
|
|
- [ ] Beágyazz egy hőséges fejléc ("Welcome to Theme Switcher")
|
|
- [ ] Tartalmazz szövegeket és egyCall-to-Action gombot
|
|
- [ ] Styling Tailwind-vel (gradient, árnyékok, responsivitás)
|
|
- [ ] Gondoskodj arról, hogy az aktuális téma alapján megíródnak az osztályok
|
|
|
|
### 6. Egyéb Oldalak (5 perc)
|
|
- [ ] **About oldal:** Rövid szöveg az alkalmazásról
|
|
- [ ] **Contact oldal:** Dummy form vagy kontakt információ
|
|
- [ ] Mindkét oldal legyen tema-aware
|
|
|
|
---
|
|
|
|
## 📁 Kötelező Fájlok Szerkezete
|
|
|
|
```
|
|
src/
|
|
├── context/
|
|
│ └── ThemeContext.jsx
|
|
├── components/
|
|
│ ├── Navbar.jsx
|
|
│ ├── Home.jsx
|
|
│ ├── About.jsx
|
|
│ └── Contact.jsx
|
|
├── App.jsx
|
|
├── App.css (üres vagy minimal)
|
|
└── index.css (Tailwind imports)
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Minimális Tailwind Stílus Követelmények
|
|
|
|
- [ ] Light mode: fehér háttér, sötét szöveg
|
|
- [ ] Dark mode: sötét háttér (pl. slate-900), világos szöveg
|
|
- [ ] Navbar: sticky felső sáv, logó, linkek, theme toggle gomb
|
|
- [ ] Home oldal: nagy fejléc, hero szekció, CTA gomb
|
|
- [ ] Responsive: mobile, tablet, desktop nézetekben működjön
|
|
|
|
---
|
|
|
|
## 💾 Context API Struktura
|
|
|
|
```javascript
|
|
// ThemeContext.jsx
|
|
export const ThemeContext = createContext();
|
|
|
|
export const ThemeProvider = ({ children }) => {
|
|
const [theme, setTheme] = useState('light');
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(prev => prev === 'light' ? 'dark' : 'light');
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Bonus Feladatok (opcionális)
|
|
|
|
- [ ] Local Storage-ba mentsd az aktuális téma preferenciát
|
|
- [ ] Smooth transition az egyik téma között (CSS transition)
|
|
- [ ] Több mint 3 oldal hozzáadása
|
|
- [ ] Form validáció a Contact oldalon
|
|
|
|
---
|
|
|
|
## ✅ Ellenőrzőlista az Elkészüléshez
|
|
|
|
- [ ] Az alkalmazás elindul hiba nélkül
|
|
- [ ] A téma váltó gomb működik (light ↔ dark)
|
|
- [ ] Az összes oldal theme-hez igazodik
|
|
- [ ] A navbar mindenütt megjelenik
|
|
- [ ] A router működik az összes linkre
|
|
- [ ] Responsive design működik
|
|
- [ ] Keine console hibák
|
|
|
|
---
|
|
|
|
## � Parancsok és Kód Sablonok
|
|
|
|
### Telepítési Parancsok
|
|
|
|
```bash
|
|
# Új Vite + React projekt
|
|
npm create vite@latest my-theme-app -- --template react
|
|
cd my-theme-app
|
|
npm install
|
|
|
|
# React Router telepítése
|
|
npm install react-router-dom
|
|
|
|
# Tailwind CSS telepítése
|
|
npm install -D tailwindcss postcss autoprefixer
|
|
npx tailwindcss init -p
|
|
|
|
# Fejlesztői szerver indítása
|
|
npm run dev
|
|
```
|
|
|
|
### App.jsx Sablon
|
|
|
|
```jsx
|
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
|
import { ThemeProvider } from './context/ThemeContext';
|
|
import Navbar from './components/Navbar';
|
|
import Home from './components/Home';
|
|
import About from './components/About';
|
|
import Contact from './components/Contact';
|
|
|
|
function App() {
|
|
return (
|
|
<ThemeProvider>
|
|
<Router>
|
|
<Navbar />
|
|
<main>
|
|
<Routes>
|
|
<Route path="/" element={<Home />} />
|
|
<Route path="/about" element={<About />} />
|
|
<Route path="/contact" element={<Contact />} />
|
|
</Routes>
|
|
</main>
|
|
</Router>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
```
|
|
|
|
### ThemeContext.jsx Sablon
|
|
|
|
```jsx
|
|
import { createContext, useState } from 'react';
|
|
|
|
export const ThemeContext = createContext();
|
|
|
|
export const ThemeProvider = ({ children }) => {
|
|
const [theme, setTheme] = useState('light');
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(prev => prev === 'light' ? 'dark' : 'light');
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
};
|
|
```
|
|
|
|
### Navbar.jsx Sablon
|
|
|
|
```jsx
|
|
import { useContext } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { ThemeContext } from '../context/ThemeContext';
|
|
|
|
export default function Navbar() {
|
|
const { theme, toggleTheme } = useContext(ThemeContext);
|
|
|
|
return (
|
|
<nav className={`${theme === 'dark' ? 'bg-slate-900 text-white' : 'bg-white text-black'} border-b shadow-lg sticky top-0 z-50`}>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
{/* Logo */}
|
|
<Link to="/" className="text-2xl font-bold">
|
|
🎨 Theme App
|
|
</Link>
|
|
|
|
{/* Links */}
|
|
<div className="hidden md:flex space-x-6">
|
|
<Link to="/" className="hover:text-blue-500 transition">Home</Link>
|
|
<Link to="/about" className="hover:text-blue-500 transition">About</Link>
|
|
<Link to="/contact" className="hover:text-blue-500 transition">Contact</Link>
|
|
</div>
|
|
|
|
{/* Theme Toggle */}
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="p-2 rounded-lg bg-blue-500 hover:bg-blue-600 transition"
|
|
>
|
|
{theme === 'light' ? '🌙' : '☀️'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Home.jsx Sablon
|
|
|
|
```jsx
|
|
import { useContext } from 'react';
|
|
import { ThemeContext } from '../context/ThemeContext';
|
|
|
|
export default function Home() {
|
|
const { theme } = useContext(ThemeContext);
|
|
|
|
return (
|
|
<div className={`${theme === 'dark' ? 'bg-slate-900 text-white' : 'bg-white text-black'} min-h-screen`}>
|
|
<div className="max-w-7xl mx-auto px-4 py-20 text-center">
|
|
<h1 className="text-5xl font-bold mb-4">Üdvözlünk!</h1>
|
|
<p className="text-xl mb-8">Ezt az alkalmazást a React, Router és Context API segítségével készítettük.</p>
|
|
<button className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg text-lg transition">
|
|
Tudj meg többet
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### Tailwind CSS Import (index.css)
|
|
|
|
```css
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
```
|
|
|
|
### Contexet Használata Komponensben
|
|
|
|
```jsx
|
|
import { useContext } from 'react';
|
|
import { ThemeContext } from '../context/ThemeContext';
|
|
|
|
export default function MyComponent() {
|
|
const { theme, toggleTheme } = useContext(ThemeContext);
|
|
|
|
return (
|
|
<div className={theme === 'dark' ? 'bg-slate-900' : 'bg-white'}>
|
|
{/* tartalom */}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## �🔗 Hasznos Linkek
|
|
|
|
- [React Router v6 Dokumentáció](https://reactrouter.com/)
|
|
- [Context API Dokumentáció](https://react.dev/reference/react/useContext)
|
|
- [Tailwind CSS Dokumentáció](https://tailwindcss.com/)
|
|
|
|
---
|
|
|
|
**Sok sikert! 🚀**
|