Free · 54 Topics · No Signup
React Notes
Build UIs with components, JSX, props, hooks and modern React patterns — written by CodingNow 2.0's mentors. Free to read, structured to actually help you learn.
React notes by CodingNow 2.0 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 CodingNow 2.0'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 is a JavaScript library for building user interfaces.
React Intro
React was developed by the Facebook Software Engineer Jordan Walke.
React Get Started
Note: To use React in production, you need npm which is included with Node.js. Also, you need to set up a React Environment, and choose a build tool.
React First App
Now that your development environment is set up, let's try to modify the default app to display "Hello, World!".
React Render HTML
React's goal is in many ways to render HTML in a web page.
React Upgrade
Upgrading an existing React application to version 19 only requires two steps.
React ES6
ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.
ES6 Classes
A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class , and the properties are assigned inside a
ES6 Arrow Functions
Arrow functions allow us to write shorter function syntax:
ES6 Variables
Before ES6 there was only one way of defining your variables: with the var keyword. If you did not define them, they would be assigned to the global object.
ES6 Array map()
The map() method creates a new array with the results of calling a function for every array element.
ES6 Destructuring
Destructuring is a JavaScript feature that allows you to extract values from objects or arrays into distinct variables. In React, it's commonly used with props,
ES6 Spread Operator
The JavaScript spread operator ( ... ) copies all or part of an existing array or object into another array or object.
ES6 Modules
JavaScript modules allow you to break up your code into separate files.
ES6 Ternary Operator
The ternary operator is a simplified conditional operator like if / else .
ES6 Template Strings
Template strings allow you to write strings that span multiple lines and include embedded expressions:
React JSX Intro
JSX makes it easier to write and add HTML in React.
React JSX Expressions
One of the most powerful features of JSX is the ability to embed JavaScript expressions directly within your markup.
React JSX Attributes
JSX allows you to insert attributes into HTML elements, but there are a few important differences.
React JSX If Statements
React supports if statements, but not inside JSX.
React Components
Components are like functions that return HTML elements.
React Class
Before React 16.8, Class components were the only way to track state and lifecycle on a React component. Function components were considered "state-less".
React Props
Props are arguments passed into React components.
React Props Destructuring
You can limit the properties a component receives by using destructuring.
React Props Children
In React, you can send the content between the opening and closing tags of a component, to another component.
React Events
Just like HTML DOM events, React can perform actions based on user events.
React Conditionals
In React, you can conditionally render components.
React Lists
In React, you will render lists with some type of loop.
React Forms
Just like in HTML, React uses forms to allow users to interact with the web page.
React Forms Submit
You can control the submit action by adding an event handler in the onSubmit attribute for the <form :
React Textarea
The textarea element in React is slightly different from ordinary HTML.
React Select
A drop down list, or a select box, in React is also a bit different from HTML.
React Multiple Inputs
When you have multiple controlled input fields in a form, you can manage their state either by:
React Checkbox
For checkboxes, use the checked attribute instead of value to control its state.
React Radio
Radio buttons are typically used in groups where only one option can be selected.
React Portals
React Portals provide a way to render HTML outside the parent component's DOM hierarchy.
React Suspense
React Suspense lets you display an alternative HTML while waiting for code or data to load.
React CSS Styling
There are many ways to style React with CSS, this tutorial will take a closer look at three common ways:
React CSS Modules
CSS Modules let you write CSS that is scoped locally to a specific component.
React CSS-in-JS
CSS-in-JS is a styling technique where you can write CSS directly in your JavaScript code.
React Router
React Router is a library that provides routing capabilities for React applications.
React Transitions
The useTransition hook helps you keep your React app responsive during heavy updates.
React Forward Ref
forwardRef lets your component pass a reference to one of its children. It's like giving a direct reference to a DOM element inside your component.
React HOC
A Higher Order Component (HOC) is like a wrapper that adds extra features to your React components. Think of it like putting a case on your phone - the case add
React Sass
Sass files are executed on the server and sends CSS to the browser.
React Hooks
9 of 9 topics publishedWhat is Hooks?
Hooks allow functions to have access to state and other React features without using classes.
React useState
The React useState Hook allows us to track state in a function component.
React useEffect
The useEffect Hook allows you to perform side effects in your components.
React useContext
React Context is a way to manage state globally.
React useRef
The useRef Hook allows you to persist values between renders.
React useReducer
The useReducer Hook is similar to the useState Hook.
React useCallback
The useCallback Hook is used to memoize a callback function.
React useMemo
The React useMemo Hook returns a memoized value.
React Custom Hooks
When you have components that can be used by multiple components, we can extract that component into a custom Hook.
Ready to go from notes to a real career?
Join CodingNow 2.0'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.
