ToolScope Notes
React Notes in Simple English — Code Scope
Free React notes for beginners: what React is, components and JSX, props, and the hooks — useState, useEffect, useContext, useRef, useReducer, custom hooks, useMemo and useCallback. Forms, events, conditional rendering, lists and keys, React Router and API integration — then state at scale with Redux, Redux Toolkit, Zustand and React Query, performance, deployment, two complete projects (a Weather App and a full-stack Notes App) and interview questions. Code examples, common mistakes and practice tasks in every lesson. From the Code Scope React series.
React Notes
26 LESSONS · CODE SCOPE SERIES 5.1–5.26The library that runs the modern web: what React is, components and JSX, props, and the hooks family — useState, useEffect, useContext, useRef, useReducer, custom hooks, useMemo and useCallback. Then forms and events, conditional rendering, lists and keys, React Router, API integration, and state at scale — Redux, Redux Toolkit, Zustand and React Query — plus performance, deployment, two full projects (a Weather App and a full-stack Notes App) and interview questions.
What is React?
The library that runs the modern web: the problem it solves, components thinking, the virtual DOM in plain words, and where React fits — Vite, Next.js, React Native.
Components & JSX
Pages built from LEGO bricks: function components, the capital-letter rule, JSX and how it differs from HTML, {} expressions, fragments, and reusing one Button three times.
Props: Passing Data Down
Arguments for components: passing strings and numbers, destructuring props, the read-only rule, one-way data flow, the children prop, and prop drilling.
useState: Memory for Components
Why plain variables forget: the counter, useState's two gifts, updating from the old value, state in form inputs, and why the screen re-renders.
useEffect: Work After Render
Side effects explained simply: work that runs after render, the three dependency-array shapes, fetching data, the cleanup function, and the infinite-loop trap.
Forms in React
Forms that listen: controlled inputs, one state object for the whole form, the [e.target.name] trick, checkboxes and selects, live validation and submit.
useContext: Data Without Prop Drilling
The notice board for your app: createContext, the Provider, useContext, a live theme toggle, and the honest caveat about re-renders.
useRef: Reaching the Real DOM
A quiet box and a remote control: ref.current, focusing an input on click, counting renders without causing them, and ref vs state.
Custom Hooks: Your Own Hooks
Pack repeated logic into your own hook: spotting the pattern, building useLocalStorage step by step, and the two rules every hook must obey.
useReducer: State With Rules
State with a rule book: reducer, actions and dispatch, a cart that only changes by the rules, and the bridge from useState thinking to Redux thinking.
Redux: State Management
One store for the whole app: why big apps outgrow useContext, the store–action–reducer triangle, dispatch and subscribe in plain words, and when Redux earns its place.
Project: Weather App
The full journey in one app: search a city, fetch real weather, show it in cards — with loading and error states and an API key kept in .env.
Hook Tricks in 60 Seconds
Five fast hook tricks from the Short: functional updates, lazy initial state, object state in one call, a previous-value ref, and one effect with a cleanup.
Events in React
Pages that react: onClick, onChange and onSubmit, the event object, why onClick={fn()} fires too early, passing arguments with arrow functions, and preventDefault.
Conditional Rendering
Show this, not that: if/else, the ternary, the && shortcut and its famous 0 trap, loading–data–error screens, early returns, and picking the right tool.
Lists & Keys
Turning arrays into UI: map() builds the list, keys keep every row's identity, the index-as-key trap shown live, and filtering a list as you type.
useMemo & useCallback
Stop wasting work: memoizing an expensive calculation, keeping a function's identity stable, React.memo, and the honest rule — measure first, memoize second.
React Router
Many pages, no reloads: BrowserRouter, Routes and Route, Link vs a tags, the useParams hook for detail pages, and the 404 catch-all route.
API Integration
Real data in a real app: fetch inside useEffect, loading and error states, rendering a user list, and sending data with a POST request.
Redux Toolkit
Modern Redux without the boilerplate: configureStore, createSlice, useSelector and useDispatch, and a cart slice that adds and removes items live.
Zustand
Global state in a few lines: create() builds the store, components pick their slice, two stores side by side, persist across refresh — and when Zustand beats Redux.
React Query (TanStack Query)
Server state made easy: useQuery for fetching with cache, loading and error built in, useMutation for sending, and why server state is not store state.
React Performance
Make the app fast, honestly: find the slow part with the Profiler, React.memo, lazy loading with Suspense, and the render habits that waste work.
Deploy Your React App
Your app, live for the world: npm run build, what the dist folder is, deploying to Netlify and Vercel, environment variables, and the refresh-404 fix.
Fullstack Notes App Project
Everything joins: a Notes app with React in front and Node + MongoDB behind — login, create, read, update and delete notes, end to end.
Top 5 React Interview Questions (Short)
Five questions every React interview asks — from the Short: virtual DOM, props vs state, hooks rules, keys, and controlled inputs, each with a short strong answer.