Skip to content

Latest commit

 

History

History
57 lines (43 loc) · 2.57 KB

README.md

File metadata and controls

57 lines (43 loc) · 2.57 KB

React Beginner Tutorial — Introducing Me!

This tutorial repo is a small, self-contained exercise for beginners learning React fundamentals: components, state, event handlers, and conditional rendering.

This is an intentionally simplified version of the app with comments and placeholders so students can implement the interactive parts themselves.

Goals

  • Understand what a React component is.
  • Add local state with useState.
  • Handle DOM events (click, keyboard) in React.
  • Conditionally render content based on component state.
  • Make small, testable changes and run the dev server.

What you'll work with

  • src/App.jsx — the page that defines the topic list and contains static placeholders (cards). Replace the placeholder cards with your interactive TopicCard component.
  • src/TopicCard.jsx — the card component (tutorial version). It currently displays static content and contains comments that point where to add state and event handlers.
  • src/App.css — styles for the 3×2 square grid and card visuals.

How to get started

  1. Copy this repo's link: code => clone => copy HTTPS
  2. Go to your VScode and open clone git repository (or use the terminal-- search how to do that! that's the beauty of SWE)
  3. Start your repo
  4. Create a new branch: git checkout -b "your-name"
  5. Start working!

Exercise (step-by-step)

  1. Start the dev server from the terminal:
npm install
npm run dev

  1. Open src/TopicCard.jsx and read the comments. Try to implement the following:

    • Import useState from React.
    • Add a const [showValue, setShowValue] = useState(false) line.
    • Add an onClick handler to the root .topic-card element that toggles showValue.
    • Add keyboard handling so Enter and Space also toggle state (accessibility).
    • Replace the static rendering so when showValue is false the card shows the topic name, and when true it shows the value (for Face show an <img>).

  2. Replace the inline static cards in src/App.jsx (the placeholder <div class="topic-card"> elements) with the TopicCard component

Example of the final usage in App.jsx:

<TopicCard key={t.topic} topic={t.topic} value={t.value} />
  1. Try clicking and keyboard-operating the cards in the browser to confirm the behavior.

Hints

  • The Face topic's value contains a URL; use an <img src={value} /> when showing it.
  • Use role="button" and tabIndex={0} on the card element to make it keyboard-focusable.
  • Use aria-pressed={showValue} to reflect toggle state to assistive tech.

Enjoy building— and ask if you get stuck on any of the steps!