|
| 1 | +# 🧪 Practice React by Fixing Tests - Check Your JSX Knowledge! |
| 2 | + |
| 3 | +Working with JSX involves: |
| 4 | + |
| 5 | +- Displaying info from variables - strings, objects |
| 6 | +- Using JavaScript expressions inside JSX |
| 7 | +- Converting HTML to JSX |
| 8 | +- Knowing the JSX rules - e.g. only one root element, className vs class, etc. |
| 9 | + |
| 10 | +Where do you think you stand? **Check your knowledge by fixing these failing unit tests!** |
| 11 | + |
| 12 | +## 🚀 Getting Started |
| 13 | + |
| 14 | +1. Install dependencies: |
| 15 | + ```bash |
| 16 | + npm install |
| 17 | + ``` |
| 18 | + |
| 19 | +2. Open the test file: `src/__tests__/jsx-exercises.test.jsx` |
| 20 | + |
| 21 | +3. Run the tests: |
| 22 | + ```bash |
| 23 | + npm test |
| 24 | + ``` |
| 25 | + |
| 26 | +4. Fix them! |
| 27 | + |
| 28 | +## 💡 Tips |
| 29 | + |
| 30 | +- Replace `it("test name", ...)` with `it.only("test name", ...)` to run only that test |
| 31 | +- Read the error messages carefully - they tell you what's expected |
| 32 | +- Move the console with test results to the right side of your code editor for a side-by-side view |
| 33 | +- For an even better test experience in VSCode, install the Vitest extension |
| 34 | + |
| 35 | +## 🎯 Exercises Overview |
| 36 | + |
| 37 | +The exercises are organized into categories: |
| 38 | + |
| 39 | +1. **Displaying Variables** (Exercises 1-4) |
| 40 | + - Display strings, numbers, and object properties |
| 41 | + - Combine multiple variables |
| 42 | + |
| 43 | +2. **JavaScript Expressions** (Exercises 5-8) |
| 44 | + - Perform calculations in JSX |
| 45 | + - Call functions and use ternary expressions |
| 46 | + - Use template literals |
| 47 | + |
| 48 | +3. **Attributes and Props** (Exercises 9-12) |
| 49 | + - Set className, id, placeholder attributes |
| 50 | + - Use style objects |
| 51 | + - Handle boolean attributes |
| 52 | + |
| 53 | +4. **Lists and Keys** (Exercises 13-14) |
| 54 | + - Render arrays with `.map()` |
| 55 | + - Use proper keys for list items |
| 56 | + |
| 57 | +5. **Conditional Rendering** (Exercises 15-17) |
| 58 | + - Use `&&` operator for conditional rendering |
| 59 | + - Ternary expressions for different elements |
| 60 | + - Return null to render nothing |
| 61 | + |
| 62 | +6. **Fragments and Structure** (Exercises 18-19) |
| 63 | + - Use React Fragments |
| 64 | + - Build nested structures |
| 65 | + |
| 66 | +7. **HTML to JSX Conversion** (Exercises 20-22) |
| 67 | + - Convert `class` to `className` |
| 68 | + - Convert `for` to `htmlFor` |
| 69 | + - Use self-closing tags properly |
| 70 | + |
| 71 | +## 📚 Tech Stack |
| 72 | + |
| 73 | +- ⚡ [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling |
| 74 | +- ⚛️ [React 18](https://react.dev/) - A JavaScript library for building user interfaces |
| 75 | +- 🧪 [Vitest](https://vitest.dev/) - Blazing Fast Unit Test Framework |
| 76 | +- 🔍 [Testing Library](https://testing-library.com/) - Simple and complete testing utilities |
| 77 | + |
| 78 | +## 🛠️ Available Scripts |
| 79 | + |
| 80 | +| Command | Description | |
| 81 | +|---------|-------------| |
| 82 | +| `npm test` | Run tests in watch mode | |
| 83 | +| `npm run test:ui` | Run tests with Vitest UI | |
| 84 | +| `npm run test:run` | Run tests once | |
| 85 | +| `npm run dev` | Start development server | |
| 86 | +| `npm run build` | Build for production | |
| 87 | + |
| 88 | +## 📖 Resources |
| 89 | + |
| 90 | +- [React Documentation - Describing the UI](https://react.dev/learn/describing-the-ui) |
| 91 | +- [Vitest Documentation](https://vitest.dev/guide/) |
| 92 | +- [Testing Library - React](https://testing-library.com/docs/react-testing-library/intro/) |
| 93 | + |
| 94 | +--- |
| 95 | + |
| 96 | +Happy learning! 🎉 |
| 97 | + |
0 commit comments