codex-lv3-may-2025

React Katas 🥋

Simple React exercises to practice core concepts from the React Cheatsheet.

📋 View Assignment Instructions - Practice and record yourself completing a kata!

What are Katas?

Katas are small, focused coding exercises designed to build muscle memory and reinforce fundamental concepts. Complete these in order to build your React skills!

Kata List

Basic Concepts (1-6)

1. Kata 1: Simple Greeting - Basic component and JSX
2. Kata 2: Welcome with Props - Props and destructuring
3. Kata 3: Click Counter - useState and event handling
4. Kata 4: Show/Hide Toggle - Boolean state and conditional rendering
5. Kata 5: Fruit List - Array Map Pattern to render lists
6. Kata 6: Name Input - Controlled inputs with state

Filter Pattern (7-8)

1. Kata 7: Filter Even Numbers - Filter pattern with numbers
2. Kata 8: Search/Filter Names - Filter pattern with search

Reduce Pattern (9-11)

1. Kata 9: Calculate Total Score - Reduce pattern to sum
2. Kata 10: Calculate Average Rating - Reduce pattern to average
3. Kata 11: Count by Category - Reduce pattern to count

Intermediate: API Integration (12-17)

📡 Intermediate Katas: API Integration - Async/await, fetch API, and list patterns with real data

Array Method Refactors (18-20)

1. Kata 18: Fruit List with .map() - Refactor list rendering with .map()
2. Kata 19: Filter Evens with .filter() - Refactor the even-number filter with .filter()
3. Kata 20: Search Names with .filter() - Refactor the search filter with array helpers

How to Use These Katas

Option 1: In Your Own Project

1. Create a new Vite React project:

   npm create vite@latest react-katas -- --template react
   cd react-katas
   npm install
   

2. For each kata, create the component in your project
3. Import and render it in App.jsx to test
4. Try solving without looking at the solution first!

Option 2: In CodeSandbox

1. Go to codesandbox.io
2. Create a new React sandbox
3. Complete each kata in the sandbox

Option 3: Review Only

• Read through each kata
• Study the solutions
• Type them out to build muscle memory

Tips for Success

• ✅ Try first, then check - Attempt the solution before looking
• ✅ Type it out - Don’t copy/paste; typing builds memory
• ✅ Understand, don’t memorize - Focus on why the code works
• ✅ Experiment - Try variations and see what happens
• ✅ Use the cheatsheet - Reference the React Cheatsheet when stuck

Concepts Covered

These katas reinforce:

• ✅ Component structure and JSX
• ✅ Props with destructuring
• ✅ useState hook
• ✅ Event handlers (onClick, onChange)
• ✅ Conditional rendering
• ✅ Array mapping
• ✅ Controlled inputs
• ✅ Filter pattern - Select items matching criteria (using for loops)
• ✅ Reduce pattern - Summarize/calculate from arrays (using for loops)
• ✅ Async/await - Handling asynchronous operations with fetch API
• ✅ useEffect hook - Fetching data when components load
• ✅ Combining patterns - Filter then map, fetch then process

Note on Array Methods: While these katas use for loops to practice the underlying patterns, you’ll often see the built-in array methods in real code:

• .map() - Transforms each item in an array (List Scrolling Pattern)
• .filter() - Selects items matching criteria (List Filter Pattern)
• .reduce() - Combines all items into a single value (List Patterns)

Learn more: MDN: Array Methods

Next Steps

After completing these katas:

• Build a small project combining multiple concepts
• Review your Week 2, 3, or 4 projects
• Prepare for your code interview!

---

Good luck practicing! 🚀

---

Attribution: These React katas were created with assistance from Claude AI (Anthropic) to provide focused practice exercises for core React concepts.

---

Glossary

Key Terms from Vocabulary List

Kata: A coding exercise where you practice implementing a specific feature or pattern repeatedly to build muscle memory and fluency.

Components: In React, the building blocks of applications. Everything in React is made from components. They help organize code and keep programs from becoming too complicated.

React: A framework created by Facebook in 2013. It’s built on the idea of components and is one of the most popular tools for making modern websites.

JSX: A special syntax used in React. It looks like HTML but isn’t exactly the same. JSX must be used inside React components.

Props (Properties): Attributes you can give to components to make them more powerful. Props are like HTML attributes but for your own custom components.

State: In React, component-local data that React preserves between renders so a component can remember information and update the UI (e.g., a click counter).

useState: Hook that returns a state value and a setter. Initializes component state and triggers re-render when the setter is called.

Hook: Special React function whose name starts with use (e.g., useState, useEffect). Must follow the Rules of Hooks.

handleClick: Conventional camelCase name for a click event handler function.

Function: In programming, reusable blocks of code that perform a specific task. They help organize code, avoid repetition, and make programs easier to understand.

Return: In a React component function, the return statement sends back the JSX that should be shown on the screen.

Conditional Rendering: Showing different UI based on a condition using JS expressions in JSX (e.g., {isOn ? 'On' : 'Off'}).

Ternary Operator: condition ? exprIfTrue : exprIfFalse; commonly used inside JSX for conditional rendering.

Event Listener: In web development, code that waits for something to happen (like a button click or a request) and then runs a function in response.

useEffect: Hook that runs code after a component renders. Commonly used to fetch data when a component first loads.

Async: Keyword that creates asynchronous functions, allowing the use of await inside.

Await: Keyword used inside async functions to wait for a promise to resolve before continuing.

Fetch: JavaScript function that makes HTTP requests to APIs and returns a promise.