From 91e48d2178383acd608d70a6a58ef51e671c25fd Mon Sep 17 00:00:00 2001 From: magdo Date: Tue, 24 Mar 2026 20:12:08 +0100 Subject: [PATCH] Frontend feladat 1 --- Frontend/1 het/frontend/FELADAT.md | 301 +++++++++++++++++++++++++++++ 1 file changed, 301 insertions(+) create mode 100644 Frontend/1 het/frontend/FELADAT.md diff --git a/Frontend/1 het/frontend/FELADAT.md b/Frontend/1 het/frontend/FELADAT.md new file mode 100644 index 0000000..c9d742b --- /dev/null +++ b/Frontend/1 het/frontend/FELADAT.md @@ -0,0 +1,301 @@ +# 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 ( + + {children} + + ); +}; +``` + +--- + +## 🚀 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 ( + + + +
+ + } /> + } /> + } /> + +
+ + + ); +} + +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 ( + + {children} + + ); +}; +``` + +### 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 ( + + ); +} +``` + +### Home.jsx Sablon + +```jsx +import { useContext } from 'react'; +import { ThemeContext } from '../context/ThemeContext'; + +export default function Home() { + const { theme } = useContext(ThemeContext); + + return ( +
+
+

Üdvözlünk!

+

Ezt az alkalmazást a React, Router és Context API segítségével készítettük.

+ +
+
+ ); +} +``` + +### 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 ( +
+ {/* tartalom */} +
+ ); +} +``` + +--- + +## �🔗 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! 🚀**