Week 4 - React Fundamentals

Why React?

Setting up a React project with Vite

Components

JSX

Props

Rendering lists

Conditional rendering

The mental model: how React renders (2)

Practice

Assignment

• Teachers

Front end Track

Let's get practical

Exercise 1: Build Your First Component

Difficulty: Easy Concepts: Functional components, JSX, embedding JavaScript expressions

Build a ProfileCard component that renders a small profile box for one person, using only hardcoded data inside the component itself.

Requirements:

• Create a new Vite + React project: npm create vite@latest profile-card -- --template react-ts
• Create a ProfileCard component in its own file inside src/components/
• Inside the component, define variables for name (string), birthYear (number), and hobbies (array of three strings)
• Calculate the person's age from birthYear using new Date().getFullYear() - birthYear
• Render the following JSX:
  • An <h2> with the name
  • A <p> with the age
  • A <ul> with the three hobbies (you can hardcode the three <li>s for now — we'll do .map() properly in Exercise 4)
  • A <p> saying either "Adult" or "Minor" depending on age, using a ternary expression
• Import and render the component once inside App.tsx

Hints:

• Component names must start with a capital letter — ProfileCard, not profileCard
• Anything inside { } in JSX must be an expression (something with a value): if statements don't work, but ternaries do
• Don't forget to export default your component, and import it in App.jsx with the correct path
• If you see a blank page, open the browser console — JSX errors usually show up there

Exercise 2: Fix the Broken JSX

Difficulty: Easy Concepts: HTML vs JSX, attribute differences, inline styles

Take the broken component below, paste it into a fresh project, and fix every error so it renders without warnings in the browser console.

Starting point — the broken JSX:

JSX

const BrokenCard = () => {
	return (
		<div class="card" style="padding: 10px; background: #f0f0f0;">
			<h2>Welcome!</h2>
			<p>This card is broken.</p>
			<img src="logo.png">
			<label for="name">Your name:</label>
			<input type="text" id="name">
			<button onclick="alert('hi')">Click me</button>
			<!-- TODO: add more content -->
		</div>
	);
};

export default BrokenCard;

Requirements:

• The component must render with zero errors and zero warnings in the browser console
• The class attribute must be replaced with the correct JSX equivalent
• The for attribute on the <label> must be replaced with the correct JSX equivalent
• Self-closing tags (<img>, <input>) must use the JSX self-closing syntax
• The inline style attribute must be converted from a string to a JavaScript object
• The onclick handler must be converted to the JSX way of handling events, and the alert must still trigger when clicked
• The HTML comment must be replaced with a JSX-compatible comment (or removed)

Hints:

• class is a reserved word in JavaScript, which is why JSX uses something else
• Inline style values: numbers don't need a unit (padding: 10 becomes 10px automatically), but strings like "#f0f0f0" need quotes
• For the event handler, you want onClick={() => alert('hi')} — note the camelCase and the function reference inside { }
• JSX comments look like {/* this is a comment */} and only work inside JSX, not at the top of a file

Exercise 3: Refactor Static Markup into Components with Props

Difficulty: Medium Concepts: Component decomposition, props, destructuring, prop defaults

Take a single large App component and break it into smaller reusable components that receive their data through props.

Starting point — paste this into App.jsx:

JSX

const App = () => {
	return (
		<div>
			<header>
				<h1>My Travel Blog</h1>
				<nav>
					<a href="/">Home</a>
					<a href="/posts">Posts</a>
					<a href="/about">About</a>
				</nav>
			</header>

			<main>
				<article>
					<h2>3 days in Lisbon</h2>
					<p>Posted on 12 March 2026</p>
					<p>Lisbon was sunny and full of pastel de nata...</p>
				</article>

				<article>
					<h2>A weekend in Berlin</h2>
					<p>Posted on 5 February 2026</p>
					<p>Berlin in winter is cold but full of life...</p>
				</article>
			</main>

			<footer>
				<p>© 2026 My Travel Blog</p>
			</footer>
		</div>
	);
};

export default App;

Requirements:

• Split the markup into at least three separate components: Header, Article, and Footer, each in its own file inside src/components/
• App.jsx must only import and compose the components — no <header>, <article>, or <footer> JSX should remain inside App.jsx
• The Article component must accept three props: title, date, and content
• Destructure props in the function signature: const Article = ({ title, date, content }) => ...
• In App.jsx, render two <Article /> instances, passing the original data through props instead of hardcoding it inside the component
• Add a third article of your own by adding one more <Article ... /> line — no other code should need to change
• Add a fourth optional prop tags (an array of strings) with a default value of [], displayed under the article as comma-separated text using .join(", "). If the array is empty, render nothing for the tags

Hints:

• Strings can use quotes: title="3 days in Lisbon". Anything else (numbers, arrays, booleans, objects) must use braces: tags={["food", "sun"]}
• Default values go inside the destructuring: ({ title, date, content, tags = [] })
• For the empty-tags check, use &&: {tags.length > 0 && <small>{tags.join(", ")}</small>} — and watch out for the number-zero gotcha if you ever change the condition
• If a child component tried to do props.title = "new", that would be an anti-pattern: props are read-only

Exercise 4: Render a Filterable List

Difficulty: Medium Concepts: Rendering lists with .map(), unique keys, conditional rendering, empty states

Build a small product catalogue that renders a list of items from an array, with conditional badges and a graceful empty state.

Requirements:

• Create a ProductCard component that accepts four props: title (string), price (number), inStock (boolean), and tags (array of strings, default [])
• The card must render the title, the price formatted with two decimals (€${price.toFixed(2)}), the in-stock status, and the tags as a comma-separated list
• Add a conditional 🔥 Hot badge that only appears when price > 100, using the && pattern
• Add a conditional ⚠️ Out of stock line that only appears when inStock is false
• Create a ProductList component that accepts one prop: products (an array of product objects)
• If products is empty, the component must return early with <p>No products available.</p>
• Otherwise, use .map() to render one <ProductCard /> per item, spreading the product object into the props (<ProductCard {...product} />) and giving each a unique key={product.id}
• In App.jsx, define an array of at least 5 products with id, title, price, inStock, and tags, and render <ProductList products={products} />

Hints:

• .map() returns a new array — React knows how to render an array of JSX elements, just wrap the call in { }
• Use a stable unique ID (product.id) as the key, never Math.random() and ideally not the array index
• The key prop goes on the outermost element returned inside the .map() callback — in this case, on <ProductCard /> itself, not on something inside it
• To test the empty state, temporarily pass products={[]} from App.jsx and confirm the fallback message appears
• && returns the left side if it's falsy: {products.length && <List />} will render the literal text 0 when the list is empty. Always compare explicitly: {products.length > 0 && <List />}

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*

Built with ❤️ by the HackYourFuture community · Thank you, contributors

Found a mistake or have a suggestion? Let us know in the feedback form.