Free · 54 Topics · No Signup
React Notes
Build UIs with components, JSX, props, hooks and modern React patterns — written by Coding Now Tech Institute's mentors. Free to read, structured to actually help you learn.
React notes by Coding Now 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 Coding Now Tech Institute's mentor-led React course in Pitampura, Delhi.
No notes found. Try a different search term, or browse all React notes.
React Tutorial
45 of 45 topics publishedReact Home
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 Intro
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.
React Get Started
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.
React First App
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 Render HTML
React renders HTML through the root DOM node, using createRoot and JSX. Understanding this mounting step explains how the page appears and updates.
React Upgrade
React evolves with new versions that change syntax and tooling, so staying current matters. Learn the upgrade path and what changed in recent releases.
React ES6
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
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.
ES6 Arrow Functions
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.
ES6 Variables
let and const replaced var with clearer scoping and protection against reassignment. Using them correctly is a baseline expectation in every modern React project.
ES6 Array map()
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.
ES6 Destructuring
Destructuring unpacks objects and arrays into named variables, shrinking verbose code. In React it is how you cleanly pull props and state values out.
ES6 Spread Operator
The spread operator expands arrays and objects in place, which makes copying and merging state effortless. It is everywhere in idiomatic React code.
ES6 Modules
ES modules let you split code across files and import only what you need. React components are shared this way, one file per component.
ES6 Ternary Operator
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.
ES6 Template Strings
Template literals build strings with embedded values using backticks, replacing messy concatenation. They are used for dynamic classes, labels and URLs in React apps.
React JSX Intro
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.
React JSX Expressions
JSX becomes powerful when JavaScript expressions render inside braces — variables, math, function calls. This mixing of markup and logic is React's superpower.
React JSX Attributes
JSX attributes look like HTML attributes but use camelCase names like className and onClick. Learning the mapping avoids the most common beginner errors.
React JSX If Statements
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.
React Components
Components are self-contained, reusable pieces of UI that accept props and return JSX. Thinking in components is the single most important React skill.
React Class
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.
React Props
Props pass data from a parent component down to its children, making components reusable. They are read-only, which keeps data flow predictable.
React Props Destructuring
Destructuring props inside the function signature makes which data a component needs obvious at a glance. It is the idiomatic way to consume props.
React Props Children
The children prop lets components wrap arbitrary content, like cards and layouts. It is the mechanism behind nested, composable UI.
React Events
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.
React Conditionals
Conditional rendering shows or hides UI based on state — loading spinners, empty states, logged-in views. Mastering it makes apps feel responsive and alive.
React Lists
Rendering lists of data means mapping items to components and giving each a stable key. Keys are how React tracks items efficiently across updates.
React Forms
Forms in React are controlled components where state owns every input value. This single source of truth makes validation and submission predictable.
React Forms Submit
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.
React Textarea
The textarea element in React uses a value prop instead of children, like a controlled input. Learn the slight differences that trip people up.
React Select
Select dropdowns are controlled inputs too, with a value prop bound to state. Handling options and defaults correctly is a daily frontend task.
React Multiple Inputs
Forms with many fields share one state object and a single change handler. This pattern keeps large forms maintainable without repeated code.
React Checkbox
Checkboxes toggle boolean state, and their checked prop is controlled rather than their value. Learn the correct handler shape for true/false inputs.
React Radio
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.
React Portals
Portals render components outside the normal DOM tree, typically for modals and tooltips that must escape overflow containers. They solve real layout conflicts.
React Suspense
Suspense lets components wait for asynchronous work and show fallbacks while loading. It is the foundation for lazy-loaded routes and data boundaries.
React CSS Styling
Styling React components can be done with plain CSS classes, inline styles and more. This topic covers the baseline approaches and their trade-offs.
React CSS Modules
CSS Modules scope class names to a component automatically, preventing style collisions across a large app. They bring safety without new syntax.
React CSS-in-JS
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
React Router manages navigation and URLs in single-page apps, mapping paths to components. It is the standard for multi-page experiences in React.
React Transitions
Transitions let UI updates wait for slower work while keeping the interface responsive. They mark urgent versus non-urgent state changes explicitly.
React Forward Ref
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.
React HOC
Higher-order components wrap components to add shared logic, an older pattern still common in libraries. Understanding HOCs helps you read real-world codebases.
React Sass
Sass adds variables, nesting and mixins to CSS, and it integrates cleanly with React builds. It keeps large stylesheets organised and reusable.
React Hooks
9 of 9 topics publishedWhat is Hooks?
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.
React useState
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.
React useEffect
useEffect runs side effects after render — fetching data, subscribing, updating the document. Its dependency array decides when the effect runs again.
React useContext
useContext shares values across the component tree without threading props through every level. It powers themes, auth state and app-wide settings.
React useRef
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.
React useReducer
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.
React useCallback
useCallback memoises functions so they keep their identity between renders, preventing unnecessary child re-renders. It pairs with memo for performance tuning.
React useMemo
useMemo caches expensive computations until their dependencies change, keeping renders fast. Use it selectively — measuring before optimising.
React Custom Hooks
Custom hooks extract shared stateful logic into reusable functions, the way components extract UI. They are how teams avoid duplicating fetching, forms and subscriptions.
Ready to go from notes to a real career?
Join Coding Now Tech Institute's React course — live mentorship, hands-on projects, and 100% placement support in Delhi NCR.
Enroll Now — Free Demo AvailableReact Notes – FAQs
What students search before reading React notes.