React
Master React, the JavaScript library for building dynamic user interfaces! From basics to advanced concepts.
Challenges
24 of 24 challenges
New React App
Setting up a new React Project
Components
Components in React are modular, reusable building blocks for constructing user interfaces.
Functional Component
Functional components in React provide a streamlined and concise way to define UI elements without the need for a class.
Class Components
Class components in React encapsulate the structure, behavior, and rendering logic of UI elements within JavaScript classes.
Props
Data passed from parent to child components in React
Conditional Rendering
Learn how to render JSX conditionally in React
State
State in React is a mechanism for managing and updating component data that may change over time, enabling dynamic and interactive user interfaces.
Styling
Styling your React application is crucial for creating a visually appealing and user-friendly interface.
Rendering Lists
Learn how to render lists in React
Form Handling
Learn how to create forms in react
Event Handling
How to handle different events in React
Composition
Build flexible components with the children prop and JSX passed as props, instead of a pile of boolean options.
Lifting State Up
Share state between sibling components by moving it up to their closest common parent.
Effects
Synchronise your components with the outside world using the useEffect hook, and clean up after yourself.
Reducers
Consolidate complex state updates into a single reducer function with the useReducer hook.
Refs
Reach into the DOM and remember values across renders without triggering a re-render, using the useRef hook.
Custom Hooks
Extract stateful logic out of your components into reusable custom hooks.
Data Fetching
Fetch data in an effect and handle the three states every request has: loading, error and success.
Portals
Render a modal outside its parent's DOM node while keeping it inside the React tree, with createPortal.
Context
Pass data through the component tree without threading props through every level, using the Context API.
Layout Effects
Measure and mutate the DOM before the browser paints with useLayoutEffect, so the user never sees a flicker.
Code Splitting
Load part of your UI only when it is needed, with lazy and Suspense.
Error Boundaries
Catch rendering errors in a part of your UI and show a fallback instead of a blank page.
Memoization
Skip expensive work and needless re-renders with memo, useMemo and useCallback.