Projekt: Moje první React aplikace (CV Generátor)

Feb 22, 2026

Únor 2026

Po projektech v čistém JavaScriptu, kde jsem musel každý element složitě hledat a upravovat přes DOM, přišel čas posunout se dál. V rámci The Odin Project jsem se ponořil do Reactu. Úkolem bylo vytvořit aplikaci pro tvorbu životopisu (CV Application), kde uživatel vyplňuje data a rovnou vidí živý náhled.

Cílem bylo pochopit základní stavební kameny Reactu: komponenty, props a hook useState.

Sbohem document.querySelector, vítejte Komponenty a Stav

Největší “aha moment” u tohoto projektu bylo to, jak React mění způsob uvažování. Už žádné ruční přidávání event listenerů a sahání do HTML. Místo toho prostě aktualizuji “stav” (state) a React se sám postará o překreslení toho, co je potřeba.

Díky hooku useState se data v aplikaci stala mým jediným zdrojem pravdy. Takhle například vypadá správa stavu pro osobní údaje:

import { useState } from "react";

function PersonalInfo() {
	// Definice stavu jako objektu
	const [person, setPerson] = useState({ name: "", email: "" });

	// Jedna funkce pro obsluhu více inputů
	const handleChange = (e) => {
		setPerson({
			...person, // Zkopírujeme stávající data
			[e.target.name]: e.target.value, // Přepíšeme jen to, co se změnilo
		});
	};

	return (
		<div className="form-section">
			<h2>Osobní údaje</h2>
			<input
				name="name"
				value={person.name}
				onChange={handleChange}
				placeholder="Jméno a příjmení"
			/>

			{/* Náhled se aktualizuje zcela automaticky s každým úhozem do klávesnice */}
			<div className="preview">
				<h3>Životopis pro: {person.name}</h3>
			</div>
		</div>
	);
}

GitHub: My-first—react-app