/react-practice-labs

This course contains lots of labs for React, each lab is a small React project with detailed guidance and solutions. You can practice your React skills by completing these labs, improve your coding skills, and learn how to write clean and efficient code.

React Practice Labs

Languages

๐Ÿ‡จ๐Ÿ‡ณ ็ฎ€ไฝ“ไธญๆ–‡ ๐Ÿ‡ช๐Ÿ‡ธ Espaรฑol ๐Ÿ‡ซ๐Ÿ‡ท Franรงais ๐Ÿ‡ฉ๐Ÿ‡ช Deutsch ๐Ÿ‡ฏ๐Ÿ‡ต ๆ—ฅๆœฌ่ชž ๐Ÿ‡ท๐Ÿ‡บ ะ ัƒััะบะธะน ๐Ÿ‡ฐ๐Ÿ‡ท ํ•œ๊ตญ์–ด ๐Ÿ‡ง๐Ÿ‡ท Portuguรชs ๐Ÿ‡บ๐Ÿ‡ธ English

React Practice Labs

Start-Learning

This course contains lots of labs for React, each lab is a small React project with detailed guidance and solutions. You can practice your React skills by completing these labs, improve your coding skills, and learn how to write clean and efficient code.

React

Exercises

Index Name Difficulty Practice
01 ๐Ÿ“– ๐ŸŸข Create Reusable React Spinner Intermediate Start Lab
02 ๐Ÿ“– ๐ŸŸข Create React Email Link Component Beginner Start Lab
03 ๐Ÿ“– ๐ŸŸข Uncontrolled Textarea Element Beginner Start Lab
04 ๐Ÿ“– ๐ŸŸข Uncontrolled Input Field Beginner Start Lab
05 ๐Ÿ“– ๐ŸŸข Uncontrolled Range Input Beginner Start Lab
06 ๐Ÿ“– ๐ŸŸข Dynamic React List Component Beginner Start Lab
07 ๐Ÿ“– ๐ŸŸข Dynamic React Table with Primitive Data Beginner Start Lab
08 ๐Ÿ“– ๐ŸŸข Object Table View Beginner Start Lab
09 ๐Ÿ“– ๐ŸŸข Uncontrolled Select Element Beginner Start Lab
10 ๐Ÿ“– ๐ŸŸข Automatic Text Linking Beginner Start Lab
11 ๐Ÿ“– ๐ŸŸข React useComponentDidMount Hook Beginner Start Lab
12 ๐Ÿ“– ๐ŸŸข React useComponentWillUnmount Hook Beginner Start Lab
13 ๐Ÿ“– ๐ŸŸข React useIsomporphicEffect Hook Beginner Start Lab
14 ๐Ÿ“– ๐ŸŸข React useOnGlobalEvent Hook Beginner Start Lab
15 ๐Ÿ“– ๐ŸŸข React useOnWindowResize Hook Beginner Start Lab
16 ๐Ÿ“– ๐ŸŸข React useUnload Hook Beginner Start Lab
17 ๐Ÿ“– ๐ŸŸข React useOnWindowScroll Hook Beginner Start Lab
18 ๐Ÿ“– ๐ŸŸข React Carousel Component Creation Beginner Start Lab
19 ๐Ÿ“– ๐ŸŸข React useEventListener Hook Beginner Start Lab
20 ๐Ÿ“– ๐ŸŸข React useFetch Hook Beginner Start Lab
21 ๐Ÿ“– ๐ŸŸข React useInterval Hook Beginner Start Lab
22 ๐Ÿ“– ๐ŸŸข React useMediaQuery Hook Beginner Start Lab
23 ๐Ÿ“– ๐ŸŸข React usePortal Hook Beginner Start Lab
24 ๐Ÿ“– ๐ŸŸข React useScript Hook Beginner Start Lab
25 ๐Ÿ“– ๐ŸŸข React useTimeout Hook Beginner Start Lab
26 ๐Ÿ“– ๐ŸŸข React useWindowSize Hook Beginner Start Lab
27 ๐Ÿ“– ๐ŸŸข React useClickInside Hook Beginner Start Lab
28 ๐Ÿ“– ๐ŸŸข React useClickOutside Hook Beginner Start Lab
29 ๐Ÿ“– ๐ŸŸข Controlled Input Field Beginner Start Lab
30 ๐Ÿ“– ๐ŸŸข Lazy Loading Images in React Beginner Start Lab
31 ๐Ÿ“– ๐ŸŸข Textarea with Character Limit Beginner Start Lab
32 ๐Ÿ“– ๐ŸŸข Textarea with Word Limit Beginner Start Lab
33 ๐Ÿ“– ๐ŸŸข Creating Reusable Modal Component in React Beginner Start Lab
34 ๐Ÿ“– ๐ŸŸข React useAsync Hook Beginner Start Lab
35 ๐Ÿ“– ๐ŸŸข React useComponentDidUpdate Hook Beginner Start Lab
36 ๐Ÿ“– ๐ŸŸข React useCopyToClipboard Hook Beginner Start Lab
37 ๐Ÿ“– ๐ŸŸข React useDebounce Hook Beginner Start Lab
38 ๐Ÿ“– ๐ŸŸข React useDefault Hook Beginner Start Lab
39 ๐Ÿ“– ๐ŸŸข React useEffectOnce Hook Beginner Start Lab
40 ๐Ÿ“– ๐ŸŸข React useError Hook Beginner Start Lab
41 ๐Ÿ“– ๐ŸŸข React useForm Hook Beginner Start Lab
42 ๐Ÿ“– ๐ŸŸข React useGetSet Hook Beginner Start Lab
43 ๐Ÿ“– ๐ŸŸข React useHash Hook Beginner Start Lab
44 ๐Ÿ“– ๐ŸŸข React useLocalStorage Hook Beginner Start Lab
45 ๐Ÿ“– ๐ŸŸข React useMergeState Hook Beginner Start Lab
46 ๐Ÿ“– ๐ŸŸข React usePersistedState Hook Beginner Start Lab
47 ๐Ÿ“– ๐ŸŸข React usePrevious Hook Beginner Start Lab
48 ๐Ÿ“– ๐ŸŸข React useRequestAnimationFrame Hook Beginner Start Lab
49 ๐Ÿ“– ๐ŸŸข React useSearchParam Hook Beginner Start Lab
50 ๐Ÿ“– ๐ŸŸข React useSessionStorage Hook Beginner Start Lab
51 ๐Ÿ“– ๐ŸŸข React useTitle Hook Beginner Start Lab
52 ๐Ÿ“– ๐ŸŸข React useUpdate Hook Beginner Start Lab
53 ๐Ÿ“– ๐ŸŸข File Drag and Drop Area Beginner Start Lab
54 ๐Ÿ“– ๐ŸŸข React useHover Hook Beginner Start Lab
55 ๐Ÿ“– ๐ŸŸข React useKeyPress Hook Beginner Start Lab
56 ๐Ÿ“– ๐ŸŸข Building Collapsible React Accordion Beginner Start Lab
57 ๐Ÿ“– ๐ŸŸข Create Closable React Alert Beginner Start Lab
58 ๐Ÿ“– ๐ŸŸข Create Collapsible React Components Beginner Start Lab
59 ๐Ÿ“– ๐ŸŸข React Countdown Timer Component Beginner Start Lab
60 ๐Ÿ“– ๐ŸŸข Create Star Rating Component in React Beginner Start Lab
61 ๐Ÿ“– ๐ŸŸข Reusable React Toggle Component Beginner Start Lab
62 ๐Ÿ“– ๐ŸŸข Creating Customizable React Tooltips Beginner Start Lab
63 ๐Ÿ“– ๐ŸŸข React useNavigatorOnLine Hook Beginner Start Lab
64 ๐Ÿ“– ๐ŸŸข React useToggler Hook Beginner Start Lab
65 ๐Ÿ“– ๐ŸŸข Stateful Checkbox with Multiple Selection Beginner Start Lab
66 ๐Ÿ“– ๐ŸŸข Button with Ripple Effect Beginner Start Lab
67 ๐Ÿ“– ๐ŸŸข React useBodyScrollLock Hook Beginner Start Lab
68 ๐Ÿ“– ๐ŸŸข React useMutationObserver Hook Beginner Start Lab
69 ๐Ÿ“– ๐ŸŸข React useDelayedState Hook Beginner Start Lab
70 ๐Ÿ“– ๐ŸŸข Building Reusable React Tabs Component Beginner Start Lab
71 ๐Ÿ“– ๐ŸŸข Expandable Object Tree View Beginner Start Lab
72 ๐Ÿ“– ๐ŸŸข React useIntersectionObserver Hook Beginner Start Lab
73 ๐Ÿ“– ๐ŸŸข React useMap Hook Beginner Start Lab
74 ๐Ÿ“– ๐ŸŸข React useSet Hook Beginner Start Lab
75 ๐Ÿ“– ๐ŸŸข React useSSR Hook Beginner Start Lab

Environment

LabEx is an interactive, hands-on learning platform dedicated to coding and technology. It combines labs, AI assistance, and virtual machines to provide a no-video, practical learning experience.

  • A strict "Learn by Doing" approach with exclusive hands-on labs and no videos.
  • Interactive online environments within the browser, with automated step-by-step checks.
  • A structured content organization with the Skill Tree based learning system.
  • A growing learning resource of 30 Skill Trees and over 6,000 Labs.
  • The learning assistant Labby, built on lastest AI models, providing a conversational learning experience.

Learn more about LabEx VM.

More