React is a JavaScript library for building user interfaces, especially interfaces that change often based on user interaction or incoming data. Instead of thinking about a web page as one large block of HTML with scattered JavaScript, React encourages developers to divide the screen into small reusable pieces called components. Each component is responsible for rendering one part of the interface, such as a button, navigation bar, product card, search form, or modal window.
React became popular because modern applications are highly interactive. A typical application may include search filters, form validation, counters, tabs, notifications, real-time updates, and dynamic lists. Managing all of those pieces with manual DOM code can quickly become difficult. React helps reduce that complexity by making the UI depend on data. When the data changes, React updates the visible output automatically.
Traditional front-end code often required developers to manually find DOM elements and update them step by step. For example, if a user clicked a button, you might change the text of one element, update a class name on another, and rebuild a list somewhere else. That approach works for simple pages, but it becomes fragile when the same data affects many parts of the screen.
React solves this problem with a different mindset: instead of describing each DOM update manually, you describe what the UI should look like for the current data. React then handles the necessary updates under the hood. This approach is called declarative UI, and it is one of the biggest reasons React applications stay easier to reason about as they grow.
At a beginner level, React follows a simple idea:
This means developers usually do not manually tell the browser how to update each part of the page. Instead, they update the data and let React produce the new UI. That is why React code is often described as predictable: the same input data produces the same visible result.
Use this working rule: data goes in and UI comes out. When data changes, the rendered interface changes too. This prevents a common React error: manually changing DOM that React also controls. Treat UI as a result of state and props, not as a separate object that needs constant patching.
It is also helpful to understand what React is not. React is not a full framework by itself in the way some people think of Angular or large full-stack frameworks. React focuses mainly on building the UI layer. If you need routing, form libraries, global state tools, or advanced data fetching patterns, those are usually added from the ecosystem around React.
React is also not the same as plain HTML templates. Components are not just snippets of markup. They are reusable, data-driven units of UI behavior. A component can render different output depending on props, state, or user actions, which makes it much more powerful than a static HTML partial.
A component is a reusable unit of UI. In a real application, you rarely build the entire screen in one file. Instead, you compose many smaller components together. For example, an e-commerce page might include a Header, SearchBar, ProductCard, CartButton, and Footer. Each of those pieces can be reused and maintained separately.
This component approach has two major benefits. First, it reduces repetition because the same UI pattern can be reused in many places. Second, it makes the code easier to reason about because each component has a narrower responsibility. A large page becomes a tree of smaller understandable pieces instead of one giant mixed file.
This component is small, but it already shows the key idea: a component is just a JavaScript function that returns UI.
function Welcome() {
return <h1>Welcome to React</h1>
}
export default WelcomeReact components often return JSX. JSX looks similar to HTML, but it is not exactly the same thing. It is a syntax extension that allows developers to write UI markup inside JavaScript in a way that is easier to read than manual element creation. JSX is eventually transformed into JavaScript by the build tool.
Because JSX lives inside JavaScript, you can combine markup with values, expressions, and component composition in a natural way.
The value inside curly braces comes from JavaScript. This is one of the reasons JSX is powerful: it keeps structure and dynamic values close together.
const user = "Aman"
function Greeting() {
return <h2>Hello, {user}!</h2>
}Props are values passed from a parent component into a child component. They help make components flexible and reusable. Instead of hardcoding the same content in multiple places, a single component can render different values depending on the props it receives.
This is important because props create a one-way flow of data from parent to child. That predictable direction makes React easier to debug than systems where data can change from many places in many directions.
function UserCard(props) {
return (
<div>
<h3>{props.name}</h3>
<p>Role: {props.role}</p>
</div>
)
}
function App() {
return <UserCard name="Aman" role="Admin" />
}While props are passed in from outside, state is data managed inside a component. State is used when the UI needs to react to user actions or internal changes, such as typing into an input, opening a modal, switching tabs, or increasing a counter.
The useState hook is usually the first hook beginners learn because it shows how React updates the UI when data changes.
In this example, Counter is a component and useState(0) creates a piece of state named count. Calling setCount() changes that value, and React re-renders the component with the new output. This is a core React pattern: state changes cause UI updates.
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<h2>Counter Example</h2>
<p>Current count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
)
}
export default CounterInteractive applications need to respond to user actions such as clicks, typing, submitting forms, hovering, and keyboard actions. React handles this through event props like onClick, onChange, and onSubmit. These let components respond to interaction while still keeping the UI driven by state.
This example shows how React connects user input to state, and state back to visible output. That loop is central to most React interfaces.
import { useState } from 'react'
function NameForm() {
const [name, setName] = useState('')
return (
<div>
<input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter your name"
/>
<p>Hello, {name || 'Guest'}</p>
</div>
)
}React applications are often built by combining components together. This is called composition. A page can contain many smaller components, and each smaller component can contain even smaller ones. This keeps each part focused while allowing the whole UI to stay flexible.
This kind of composition is one of React's biggest strengths. It encourages UI structure that scales much better than repeating markup in large files.
function Header() {
return <h1>Store</h1>
}
function ProductCard({ name, price }) {
return (
<div>
<h3>{name}</h3>
<p>Price: ${price}</p>
</div>
)
}
function App() {
return (
<div>
<Header />
<ProductCard name="Keyboard" price={49} />
<ProductCard name="Mouse" price={25} />
</div>
)
}| Concept | Meaning | Example |
|---|---|---|
| Component | A reusable piece of UI | Navbar, card, modal, product list |
| JSX | HTML-like syntax inside JavaScript | <h1>Hello</h1> |
| Props | Data passed into a component | <UserCard name="Aman" /> |
| State | Data managed inside a component | Counter value, input text, modal visibility |
| Event handling | Responding to user actions | Click, change, submit, key press |
| Hooks | Functions that add React features to function components | useState, useEffect, useRef |
| Rendering | Producing UI from data | Showing a filtered list from state |
In plain JavaScript, developers often select elements with methods like querySelector(), attach event listeners manually, and update the DOM using innerHTML, textContent, or class manipulation. That is fine for small widgets, but it becomes harder to manage when many parts of the screen depend on the same data.
React improves this by centralizing UI changes around state and props. Instead of manually finding every element that depends on a changing value, you change the data once and let React re-render the relevant components. This makes complex applications easier to reason about and easier to evolve.
React can feel large because the ecosystem is large, but the core ideas are manageable if learned in the right order. A good progression is:
Once these topics feel familiar, routing, forms, performance, testing, and global state become much easier to understand.
| Mistake | Why it causes problems | Better approach |
|---|---|---|
| Mixing manual DOM updates with React state | Creates conflicting UI behavior | Let React control the UI from data |
| Trying to learn every React topic at once | Makes the library feel harder than it is | Start with components, props, state, and hooks |
| Thinking React is only about JSX | Misses the importance of data flow and component design | Learn how components, props, and state work together |
| Treating components like plain HTML snippets | Reduces reuse and abstraction benefits | Think of components as reusable UI units |
| Mutating state directly | Can prevent correct re-renders and create confusing bugs | Use the state setter function to update values |
One of React's most important performance features is the Virtual DOM. Instead of directly manipulating the real DOM (which is slow), React creates a lightweight JavaScript representation of the UI. When state changes, React compares the new Virtual DOM with the previous one, calculates the minimal changes needed, and updates only those parts of the real DOM.
This process, called reconciliation, makes React applications fast even with complex interfaces. Developers don't need to think about the Virtual DOM directly--they just update state, and React handles the optimization automatically.
While React focuses on the UI layer, a complete application usually needs additional tools. The React ecosystem includes:
A typical React development workflow follows these steps:
React Developer Tools is a browser extension that helps you inspect React components. It shows you the component tree, props, state, and hooks in real-time. This tool is invaluable for learning React because it lets you see exactly what data each component receives and how state changes affect the UI.
Class components use ES6 classes, state, and lifecycle methods. New React code normally uses function components with hooks; class components remain relevant when maintaining existing code or using APIs that still require them.
For new projects, you should start with function components. They're easier to read, test, and maintain. Class components are still supported but are mainly found in older codebases.
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
)
}
export default Counterimport React from 'react'
class Counter extends React.Component {
constructor(props) {
super(props)
this.state = { count: 0 }
}
render() {
return (
<div>
<h2>Count: {this.state.count}</h2>
<button onClick={() =>
this.setState({ count: this.state.count + 1 })
}>
Increase
</button>
</div>
)
}
}
export default CounterReact is built around several core principles that guide how you should write applications:
React excels in certain scenarios but might be overkill in others:
| Use React When | Consider Alternatives When |
|---|---|
| Building complex, interactive single-page applications | Creating simple static websites or marketing pages |
| You need reusable UI components across the application | The site has minimal user interaction or dynamic content |
| Managing complex state and data flow | Building mostly content-focused sites with basic forms |
| Real-time updates and frequent UI changes | Performance is critical and JavaScript overhead is a concern |
| Team needs consistent component library | Quick prototypes or simple landing pages |
Here's a recommended learning progression for mastering React:
| Phase | Topics | Practice Projects |
|---|---|---|
| Foundation | Components, JSX, Props, State, Events | Todo app, Counter, Calculator |
| Intermediate | Hooks, Conditional Rendering, Lists, Forms | Weather app, Blog, Shopping cart |
| Advanced | Context, Custom Hooks, Performance, Testing | E-commerce site, Dashboard, Chat app |
| Ecosystem | Routing, State Management, Data Fetching | Full-stack application with API |
React is a modern JavaScript library for building interactive user interfaces. Its core strength comes from reusable components, declarative rendering, one-way data flow, and state-driven updates. The Virtual DOM provides performance optimizations, while the extensive ecosystem offers tools for routing, state management, testing, and more. Once you understand components, JSX, props, state, and event handling, React becomes much easier to learn because every new topic builds on those same ideas. The goal is not just to write UI, but to write UI that stays understandable as the application grows.
The introduction page shows React as a function of props, state, and events. A click usually calls a state setter, React schedules a new render, and the component function runs again with the updated state value.
A large JSX file hides ownership. The page may still work, but it becomes hard to see which part receives data, which part owns state, and which event changes the screen. A component boundary makes that contract visible: props enter, JSX comes out, and local state stays close to the interaction it controls.
First check whether the changing value is state or just a normal variable. A normal variable can change without telling React to render again, while useState gives React a setter that schedules the next render. Then inspect whether the code is reading the old value inside a delayed callback or updating an object/array in place.
Explore 500+ free tutorials across 20+ languages and frameworks.