🇨🇳 简体中文 🇪🇸 Español 🇫🇷 Français 🇩🇪 Deutsch 🇯🇵 日本語 🇷🇺 Русский 🇰🇷 한국어 🇧🇷 Português 🇺🇸 English
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.
| 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 |
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.