React practice

Filter by difficulty, use hints, reveal solutions and save attempts locally.

1. Practice React Introduction by building one step of a reusable product component and checking the result.

code-writing
beginnerReact Introduction

1. Start from the React Introduction lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

2. Practice JSX by building one step of a reusable product component and checking the result.

code-fix
beginnerJSX

1. Start from the JSX lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

3. Practice Components by building one step of a reusable product component and checking the result.

output
beginnerComponents

1. Start from the Components lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

4. Practice Props by building one step of a reusable product component and checking the result.

fill-blank
beginnerProps

1. Start from the Props lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

5. Practice State by building one step of a reusable product component and checking the result.

true-false
beginnerState

1. Start from the State lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

6. Practice Events by building one step of a reusable product component and checking the result.

mini-project
beginnerEvents

1. Start from the Events lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

7. Practice Lists by building one step of a reusable product component and checking the result.

mcq
beginnerLists

1. Start from the Lists lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

8. Practice Conditional Rendering by building one step of a reusable product component and checking the result.

code-writing
beginnerConditional Rendering

1. Start from the Conditional Rendering lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

9. Practice Forms by building one step of a reusable product component and checking the result.

code-fix
beginnerForms

1. Start from the Forms lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

10. Practice useEffect by building one step of a reusable product component and checking the result.

output
beginneruseEffect

1. Start from the useEffect lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

11. Practice useRef by building one step of a reusable product component and checking the result.

fill-blank
intermediateuseRef

1. Start from the useRef lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

12. Practice Custom Hooks by building one step of a reusable product component and checking the result.

true-false
intermediateCustom Hooks

1. Start from the Custom Hooks lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

13. Practice Context API by building one step of a reusable product component and checking the result.

mini-project
intermediateContext API

1. Start from the Context API lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

14. Practice Routing by building one step of a reusable product component and checking the result.

mcq
intermediateRouting

1. Start from the Routing lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

15. Practice Performance Optimization by building one step of a reusable product component and checking the result.

code-writing
intermediatePerformance Optimization

1. Start from the Performance Optimization lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

16. Practice Memoization by building one step of a reusable product component and checking the result.

code-fix
intermediateMemoization

1. Start from the Memoization lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

17. Practice API Calls by building one step of a reusable product component and checking the result.

output
intermediateAPI Calls

1. Start from the API Calls lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

18. Practice Error Boundaries by building one step of a reusable product component and checking the result.

fill-blank
intermediateError Boundaries

1. Start from the Error Boundaries lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

19. Practice React Query by building one step of a reusable product component and checking the result.

true-false
intermediateReact Query

1. Start from the React Query lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

20. Practice Authentication UI by building one step of a reusable product component and checking the result.

mini-project
intermediateAuthentication UI

1. Start from the Authentication UI lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

21. Practice Dashboard Project by building one step of a reusable product component and checking the result.

mcq
advancedDashboard Project

1. Start from the Dashboard Project lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

22. Practice Composition by building one step of a reusable product component and checking the result.

code-writing
advancedComposition

1. Start from the Composition lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

23. Practice Children Props by building one step of a reusable product component and checking the result.

code-fix
advancedChildren Props

1. Start from the Children Props lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

24. Practice Controlled Inputs by building one step of a reusable product component and checking the result.

output
advancedControlled Inputs

1. Start from the Controlled Inputs lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

25. Practice Reducer Pattern by building one step of a reusable product component and checking the result.

fill-blank
advancedReducer Pattern

1. Start from the Reducer Pattern lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

26. Practice Accessibility by building one step of a reusable product component and checking the result.

true-false
advancedAccessibility

1. Start from the Accessibility lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

27. Practice Testing Basics by building one step of a reusable product component and checking the result.

mini-project
advancedTesting Basics

1. Start from the Testing Basics lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

28. Practice Deployment by building one step of a reusable product component and checking the result.

mcq
advancedDeployment

1. Start from the Deployment lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

29. Practice TypeScript with React by building one step of a reusable product component and checking the result.

code-writing
advancedTypeScript with React

1. Start from the TypeScript with React lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.

30. Practice React Review by building one step of a reusable product component and checking the result.

code-fix
advancedReact Review

1. Start from the React Review lesson example.

2. Use tasks, filters and loading state instead of placeholder text.

3. Run the example and compare output before polishing.