jsguides

Tutorial series

React Fundamentals

8 tutorials — follow in order for the best learning path.

  1. Building Custom Hooks in React: Patterns and Gotchas

    Learn patterns for building custom React hooks. Covers useToggle, useLocalStorage, useFetch, useDebounce with rules, testing, and common gotchas.

  2. Setting Up a React Project: Introduction and First Steps

    Learn React project setup with Vite, JSX fundamentals, components, props, and state, and build your first React app from scratch with this step-by-step guide.

  3. Building Components and JSX in React

    Learn how building components with JSX in React works. Covers expressions, props, conditional rendering, list keys, and component composition.

  4. React Context API and useReducer for State Management

    Learn how React Context eliminates prop drilling and how useReducer manages complex state logic, with patterns for combining both into a lightweight store.

  5. Understanding React Props and State Management

    Understanding React props and state for interactive components. Covers useState patterns, unidirectional data flow, lifting state, and props vs. state.

  6. Event handling in React: synthetic events and controlled components

    Master React event handling , synthetic events, onClick, onChange, form control, stopPropagation, and custom events for building interactive UIs.

  7. React Hooks Basics: useState and useEffect for State Management

    Learn useState and useEffect hooks in React to manage component state, side effects, lifecycle behavior, dependency arrays, and cleanup in function components.

  8. Performance Patterns and Memoization

    Optimize React renders with React.memo, useMemo, and useCallback. These performance patterns skip wasted recalculations and re-renders.