Build UIs with components, JSX, props, hooks and modern React patterns — written by Aivasu Tech Institute's mentors. Free to read, structured to actually help you learn.
React notes by Aivasu Tech Institute cover 54 topics — from react home to react custom hooks — each explained with short definitions, syntax and runnable code examples. They are 100% free, need no signup, and work as quick revision for college exams, React interviews and Aivasu Tech Institute's mentor-led React course in Pitampura, Delhi.
No notes found. Try a different search term, or browse all React notes.
React powers the interfaces of companies worldwide, from dashboards to e-commerce storefronts. This free track takes you from your first component to hooks and custom patterns.
React is a JavaScript library for building user interfaces out of small, reusable components. Learn what makes it different from plain JavaScript and why teams choose it.
Starting with React is a matter of minutes with modern tooling that bundles everything for you. See how to set up a project and run your first component.
Your first React app introduces the mental model that everything is a component rendering to a root element. Build it once and the whole library starts to click.
React renders HTML through the root DOM node, using createRoot and JSX. Understanding this mounting step explains how the page appears and updates.
React evolves with new versions that change syntax and tooling, so staying current matters. Learn the upgrade path and what changed in recent releases.
Modern React leans heavily on ES6 JavaScript — arrow functions, classes, modules and more. Brushing up on these features makes React code far easier to read and write.
ES6 classes organise related data and behaviour into reusable blueprints, and class components were React's standard for years. Learn the syntax that legacy codebases still use.
Arrow functions offer shorter syntax and inherit their surrounding this value, which makes them the default in React event handlers. They also clean up callbacks significantly.
let and const replaced var with clearer scoping and protection against reassignment. Using them correctly is a baseline expectation in every modern React project.
Array.map() transforms every item of an array into a new one, and it is the standard way React turns data into lists of UI. You will write it every day.
Destructuring unpacks objects and arrays into named variables, shrinking verbose code. In React it is how you cleanly pull props and state values out.
The spread operator expands arrays and objects in place, which makes copying and merging state effortless. It is everywhere in idiomatic React code.
ES modules let you split code across files and import only what you need. React components are shared this way, one file per component.
The ternary operator is an if-else that fits in one expression, and JSX renders conditionals with it constantly. It keeps conditional UI compact and readable.
Template literals build strings with embedded values using backticks, replacing messy concatenation. They are used for dynamic classes, labels and URLs in React apps.
JSX lets you write HTML-like markup directly inside JavaScript, and it compiles into React elements. It is the syntax you will see in virtually every component.
JSX becomes powerful when JavaScript expressions render inside braces — variables, math, function calls. This mixing of markup and logic is React's superpower.
JSX attributes look like HTML attributes but use camelCase names like className and onClick. Learning the mapping avoids the most common beginner errors.
JSX has no if statement of its own, so conditionals are expressed with ternaries, logical && and helper functions. This is how you render different UI per state.
Components are self-contained, reusable pieces of UI that accept props and return JSX. Thinking in components is the single most important React skill.
Class components define UI with a class and a render method, managing state through lifecycle methods. Modern code prefers hooks, but classes appear in countless existing apps.
Props pass data from a parent component down to its children, making components reusable. They are read-only, which keeps data flow predictable.
Destructuring props inside the function signature makes which data a component needs obvious at a glance. It is the idiomatic way to consume props.
The children prop lets components wrap arbitrary content, like cards and layouts. It is the mechanism behind nested, composable UI.
React events work like DOM events but are synthetic, attached in JSX with camelCase names. Handling clicks, typing and submits is the core of interactivity.
Conditional rendering shows or hides UI based on state — loading spinners, empty states, logged-in views. Mastering it makes apps feel responsive and alive.
Rendering lists of data means mapping items to components and giving each a stable key. Keys are how React tracks items efficiently across updates.
Forms in React are controlled components where state owns every input value. This single source of truth makes validation and submission predictable.
Submitting a React form means preventing the page reload and handling the values in state. It is the pattern behind every login, search and checkout.
The textarea element in React uses a value prop instead of children, like a controlled input. Learn the slight differences that trip people up.
Select dropdowns are controlled inputs too, with a value prop bound to state. Handling options and defaults correctly is a daily frontend task.
Forms with many fields share one state object and a single change handler. This pattern keeps large forms maintainable without repeated code.
Checkboxes toggle boolean state, and their checked prop is controlled rather than their value. Learn the correct handler shape for true/false inputs.
Radio buttons let users pick one option from a group, with all inputs sharing a name. Controlled radios make the selected value a plain state variable.
Portals render components outside the normal DOM tree, typically for modals and tooltips that must escape overflow containers. They solve real layout conflicts.
Suspense lets components wait for asynchronous work and show fallbacks while loading. It is the foundation for lazy-loaded routes and data boundaries.
Styling React components can be done with plain CSS classes, inline styles and more. This topic covers the baseline approaches and their trade-offs.
CSS Modules scope class names to a component automatically, preventing style collisions across a large app. They bring safety without new syntax.
CSS-in-JS libraries let you write styles as JavaScript objects or template literals inside components. They co-locate styles with logic and enable dynamic theming.
React Router manages navigation and URLs in single-page apps, mapping paths to components. It is the standard for multi-page experiences in React.
Transitions let UI updates wait for slower work while keeping the interface responsive. They mark urgent versus non-urgent state changes explicitly.
forwardRef passes a ref from a parent into a child component, useful for focusing inputs and wrapping UI libraries. It is a key piece of component interop.
Higher-order components wrap components to add shared logic, an older pattern still common in libraries. Understanding HOCs helps you read real-world codebases.
Sass adds variables, nesting and mixins to CSS, and it integrates cleanly with React builds. It keeps large stylesheets organised and reusable.
Hooks let function components use state and lifecycle features without classes, and they transformed how React is written. Start here to understand the modern paradigm.
useState adds state to function components and returns the value plus its setter. It is the first hook you learn and the one you use in every component.
useEffect runs side effects after render — fetching data, subscribing, updating the document. Its dependency array decides when the effect runs again.
useContext shares values across the component tree without threading props through every level. It powers themes, auth state and app-wide settings.
useRef holds values that persist across renders without triggering re-renders, and it gives direct access to DOM nodes. It is the tool for focus, timers and measurements.
useReducer manages complex state transitions with actions and a reducer function, like a mini state machine. It shines when state updates depend on previous state.
useCallback memoises functions so they keep their identity between renders, preventing unnecessary child re-renders. It pairs with memo for performance tuning.
useMemo caches expensive computations until their dependencies change, keeping renders fast. Use it selectively — measuring before optimising.
Custom hooks extract shared stateful logic into reusable functions, the way components extract UI. They are how teams avoid duplicating fetching, forms and subscriptions.
Join Aivasu Tech Institute's React course — live mentorship, hands-on projects, and 100% placement support in Delhi NCR.
Enroll Now — Free Demo Available✳ Common questions
What students search before reading React notes.