React Foundations Exercises

Companion repo for the React Masterclass – Foundations Edition by CodeWalnut. Clone this repo and work in each exercise folder during the workshop.

Setup

1. Clone the repo: git clone https://github.com/CW-Codewalnut/react-masterclass-foundations-exercises.git
2. For each exercise, cd into the folder (e.g., cd exercise-1-semantic-refactor)
3. Install dependencies: npm install
4. Run the app: npm run dev (opens in browser at localhost:5173)
5. Refactor the starter component as per slide instructions.
6. Commit your changes to a fork/branch for reviews.

Uses Vite for fast setup—focus on React code, not boilerplate.

Exercises

Exercise 1: Semantic HTML Refactor

• Starter: src/DivSoupPage.jsx (full page built with div soup)
• Goal: Refactor to use semantic HTML tags and improve accessibility. Follow the workshop slides for guidance.

Exercise 2: Naming & Declarative Polish

• Starter: src/ShoppingCart.jsx (abbreviations, vague names, imperative code)
• Goal: Improve naming conventions and rewrite imperative code declaratively. Follow the workshop slides for guidance.

Exercise 3: SOLID God-Component Refactor

• Starter: src/UserProfile.jsx (bloated component mixing concerns)
• Goal: Apply SOLID principles to separate concerns. Follow the workshop slides for guidance.

Project Structure

react-masterclass-foundations-exercises/
├── README.md
├── .gitignore
├── exercise-1-semantic-refactor/
│   ├── src/
│   │   ├── App.jsx
│   │   ├── DivSoupPage.jsx      # Starter
│   │   ├── index.css
│   │   └── main.jsx
│   ├── package.json
│   ├── vite.config.js
│   └── index.html
├── exercise-2-naming-declarative/
│   ├── src/
│   │   ├── App.jsx
│   │   ├── ShoppingCart.jsx      # Starter
│   │   ├── index.css
│   │   └── main.jsx
│   ├── package.json
│   ├── vite.config.js
│   └── index.html
└── exercise-3-solid-refactor/
    ├── src/
    │   ├── App.jsx
    │   ├── UserProfile.jsx      # Starter
    │   ├── index.css
    │   └── main.jsx
    ├── package.json
    ├── vite.config.js
    └── index.html

Tips

• Each exercise is self-contained—work in one folder at a time
• The starter code intentionally has issues to practice refactoring
• Keep the visual appearance the same while improving the code structure
• Test your refactored code to ensure it still works correctly

Questions? Ping in workshop chat. Happy refactoring!