What is React?
React is a JavaScript library for building user interfaces from reusable components.
React is a JavaScript library, created at Meta, for building user interfaces. Instead of writing pages, you build small, reusable pieces called components and combine them into a whole app.
Why developers love React
- Component-based — split the UI into independent, reusable pieces.
- Declarative — you describe what the UI should look like for a given state, and React updates the screen for you.
- Huge ecosystem — routing, data fetching, testing and UI libraries all build on React.
This tutorial targets React 19 and uses only modern function components and hooks — no class components.
Example
function Welcome() {
return <h1>Hello, React!</h1>;
}
export default Welcome;When to use it
- A startup builds their customer dashboard as a React SPA so the UI updates instantly when new data arrives without full page reloads.
- An e-commerce team reuses a single ProductCard component across search results, wishlist, and checkout pages, keeping styles and logic in one place.
- A media company migrates their legacy jQuery site to React so multiple developers can work on isolated components without breaking each other's code.
More examples
Minimal React component
Shows the simplest possible React component — a plain function that returns JSX.
function Greeting() {
return <h1>Hello, React!</h1>;
}
export default Greeting;Reusable component with props
Demonstrates component reuse by passing different data through props each time it is rendered.
function UserBadge({ name, role }) {
return (
<div className="badge">
<strong>{name}</strong> — {role}
</div>
);
}
// <UserBadge name="Alice" role="Admin" />Composing components into App
Illustrates how a React app is assembled by composing smaller, focused components into a parent.
import Header from './Header';
import ProductList from './ProductList';
import Footer from './Footer';
function App() {
return (
<>
<Header />
<ProductList />
<Footer />
</>
);
}
export default App;
Discussion