Frontend Master

JavaScript Curriculum

Your First Component
+50 XP

Your First Component

easy
~25 min·50 XP

Instead of building the coffee shop menu as raw HTML, you will build it as a MenuCard component. Write it once, use it for every item on the menu — no copy-pasting HTML.

Your First Component

A React component is a JavaScript function that starts with a capital letter and returns JSX. That is the whole definition. Everything else — props, state, hooks — builds on top of this foundation.

Component Anatomy

Click each part of this component to understand what it does:

MenuCard.jsx
Click any part
function MenuCard(
{ name, price, featured = false }
) {
const formattedPrice =
`£${price.toFixed(2)}`
return (
<div className="card">
{featured && <span>⭐</span>}
<h3>{name}</h3>
<p>{formattedPrice}</p>
</div>
)
}
 
export default MenuCard

Click any highlighted part of the component to learn what it does.

💡Components are just functions
There is no magic. React calls your function with the props object, takes the JSX you return, and renders it to the DOM. When state changes, React calls your function again and updates only what changed. That is the entire React model.

JSX Rules — The Six You Must Know

JSX looks like HTML but it is not. These differences trip up every beginner:

jsx-rules.jsx

'class' is a reserved keyword in JavaScript. JSX compiles to JS, so all HTML attributes that clash with JS keywords are renamed: class → className, for → htmlFor.

❌ Wrong
<div class="card">
✓ Correct
<div className="card">
⚠️JSX compiles to JavaScript
JSX is not HTML processed by the browser — it is JavaScript preprocessed by Babel. Every JSX attribute becomes an object key, which is why HTML attributes that clash with JS keywords must be renamed: class → className, for → htmlFor.

Build a Component Live

Adjust the props and see the component and generated JSX update in real time:

component-builder.jsx
Item
Props to render
Background
☕
⭐ Featured
Espresso
£2.50
Generated JSX
function MenuCard({ name, price, emoji, featured }) {
  return (
    <div className="card" style={{ background: '#1c2128' }}>
      <span className="emoji">{emoji}</span>
      {featured && <span className="badge">⭐ Featured</span>}
      <h3>{name}</h3>
      <p className="price">£{price.toFixed(2)}</p>
    </div>
  )
}

// Usage:
<MenuCard
  name="Espresso"
  price={2.5}
  emoji="☕"
  featured={true}
/>
ℹ️Props are read-only
Never modify props inside a component. Props flow down from parent to child and are owned by the parent. If a child needs to change something, it calls a callback prop passed from the parent. This is React's one-way data flow.

Your Challenge

Write a MenuCard component: accepts name, price, emoji, featured props. Returns a div.card with the emoji in a span, name in h3, price formatted as £X.XX in p.price, and if featured is true — a span.badge with "⭐ Featured". Export as default. Use it three times in App with different props.

Challenge

Write a MenuCard component that accepts name, price, emoji, and featured props. It should render a div.card containing the emoji, an h3 with the name, a p.price with the formatted price, and conditionally a .badge span if featured is true. Export it as default.

function-componentjsxpropsreturnexport-defaultfragmentclassNameself-closingcamelCase-eventscomponent-anatomy
Your First Component | Nexus Learn