Practice React fundamentals through focused coding exercises (katas). Choose one kata to master and demonstrate your fluency on video.
Goal: Build muscle memory with React by practicing a kata multiple times, then record yourself completing it fluently while explaining your code.
Time Commitment:
Select ONE kata from the list to practice:
Recommended for Beginners:
Intermediate:
Advanced:
Create a 5-10 minute video where you:
Show:
Do:
Talk About:
Tools you can use:
| Score | Criteria |
|---|---|
| âś… Full Credit (40%) | Kata completed correctly from scratch without referencing solution; code works as expected |
| ⚠️ Partial Credit (25-35%) | Kata mostly complete with minor errors; references solution briefly; mostly works |
| ❌ Needs Work (0-20%) | Significant errors; heavily relies on solution; doesn’t run |
| Score | Criteria |
|---|---|
| âś… Full Credit (40%) | Clear, confident explanation of what code does and why; explains React concepts accurately; demonstrates understanding |
| ⚠️ Partial Credit (25-35%) | Explains most code but misses some details; mostly accurate understanding; some hesitation |
| ❌ Needs Work (0-20%) | Minimal explanation; unclear understanding; struggles to explain choices |
| Score | Criteria |
|---|---|
| âś… Full Credit (20%) | Clear audio/video; well-paced; professional presentation; stays within time limit |
| ⚠️ Partial Credit (10-15%) | Audio/video okay; some pacing issues; slightly over/under time |
| ❌ Needs Work (0-5%) | Poor audio/video quality; too fast/slow; missing required sections |
Total: 100%
Submit the following:
Good explanations sound like:
“I’m importing useState from React because I need to track the count value and update it when the button is clicked. State allows React to remember this value between renders.”
“I’m using destructuring here with curly braces to extract the name prop. This is cleaner than writing props.name throughout my component.”
“This for loop checks each number to see if it’s even by using the modulo operator. If the remainder is zero when divided by 2, that means it’s even, so I push it into my filtered array.”
Avoid just reading code:
❌ “Here I’m writing const count equals useState zero”
✅ “I’m creating state to track the count, starting at zero”
❌ “This is a button with onClick”
✅ “When this button is clicked, it calls handleClick to increment the count”
You’ve succeeded if you can:
Q: Can I reference documentation while recording?
A: No, the goal is to demonstrate fluency. Practice until you can do it without references.
Q: What if I make a mistake in the video?
A: That’s okay! Explain what went wrong and how you’d fix it. This shows problem-solving skills. You don’t need to re-record - just fix the mistake and continue.
Q: Can I choose a kata not on the list?
A: Stick to the provided katas for this assignment, but feel free to practice others!
Q: Do I have to show my face?
A: No, but it helps create a personal connection. Screen + voice is fine.
Q: Can I edit my video?
A: Light editing is okay (trim beginning/end), but don’t cut out the coding process. (I recommend you don’t waste your time editing unless you’d like to share with your network outside of class.)
Q: Do I need to record multiple perfect takes?
A: No! Use your first or second attempt. Even if you make mistakes, if you can fix them during the recording, that’s perfect. We want to see your real problem-solving process.
Q: Do I have to talk while I’m coding?
A: No! You can choose to either talk while coding OR code first then explain afterward. Both approaches work great - pick what feels most comfortable for you.
Q: What if my kata is very short (like Kata 1)?
A: Great! Spend more time explaining concepts in depth and discussing variations.
Remember: The goal isn’t perfection—it’s demonstrating understanding and building confidence. You’ve got this! 🥋
This assignment helps you develop the ability to code React components fluently and explain your decisions clearly—essential skills for technical interviews and collaboration.