🧪 Practice React by Fixing Tests - Check Your JSX Knowledge!

Working with JSX involves:

• Displaying info from variables - strings, objects
• Using JavaScript expressions inside JSX
• Converting HTML to JSX
• Knowing the JSX rules - e.g. only one root element, className vs class, etc.

Where do you think you stand? Check your knowledge by fixing these failing unit tests!

🚀 Getting Started

1. Install dependencies:

   npm install

2. Open the test file: src/__tests__/jsx-exercises.test.jsx

3. Run the tests:

   npm test

4. Fix them!

💡 Tips

• Replace it("test name", ...) with it.only("test name", ...) to run only that test
• Read the error messages carefully - they tell you what's expected
• Move the console with test results to the right side of your code editor for a side-by-side view
• For an even better test experience in VSCode, install the Vitest extension

🎯 Exercises Overview

The exercises are organized into categories:

1. Displaying Variables (Exercises 1-4)

   • Display strings, numbers, and object properties
   • Combine multiple variables

2. JavaScript Expressions (Exercises 5-8)

   • Perform calculations in JSX
   • Call functions and use ternary expressions
   • Use template literals

3. Attributes and Props (Exercises 9-12)

   • Set className, id, placeholder attributes
   • Use style objects
   • Handle boolean attributes

4. Lists and Keys (Exercises 13-14)

   • Render arrays with .map()
   • Use proper keys for list items

5. Conditional Rendering (Exercises 15-17)

   • Use && operator for conditional rendering
   • Ternary expressions for different elements
   • Return null to render nothing

6. Fragments and Structure (Exercises 18-19)

   • Use React Fragments
   • Build nested structures

7. HTML to JSX Conversion (Exercises 20-22)

   • Convert class to className
   • Convert for to htmlFor
   • Use self-closing tags properly

📚 Tech Stack

• ⚡ Vite - Next Generation Frontend Tooling
• ⚛️ React 18 - A JavaScript library for building user interfaces
• 🧪 Vitest - Blazing Fast Unit Test Framework
• 🔍 Testing Library - Simple and complete testing utilities

🛠️ Available Scripts

Command	Description
npm test	Run tests in watch mode
npm run test:ui	Run tests with Vitest UI
npm run test:run	Run tests once
npm run dev	Start development server
npm run build	Build for production

📖 Resources

• React Documentation - Describing the UI
• Vitest Documentation
• Testing Library - React

---

Happy learning! 🎉