Introduction to React
React is a JavaScript library for building user interfaces. Created by engineers at Facebook and open-sourced in 2013, it has grown into the most widely adopted frontend library in the world. Today it powers products used by billions of people — Facebook, Instagram, WhatsApp Web, Airbnb, Netflix, and thousands of smaller applications.
What makes React different from writing plain HTML and JavaScript is its core philosophy: you describe what the UI should look like at any given moment, and React figures out how to make the browser match that description. This declarative model frees you from manually tracking and updating DOM elements as data changes.
The Two Pillars of React's Philosophy
React is built around two ideas that work together:
Declarative UI — you write JSX that describes your desired output. When state changes, React re-evaluates your components and updates only what needs to change in the browser. You never call
document.getElementByIdorelement.innerHTMLyourself.Component-based architecture — every piece of UI is an isolated, reusable function. A button, a navigation bar, a modal dialog — each is a component. Complex UIs are built by composing simple components, just like building with blocks.
A Brief History
Jordan Walke, a software engineer at Facebook, created an early prototype called "FaxJS" around 2011 to solve the complexity of Facebook's News Feed. React was first deployed on Facebook's web interface in 2011, then on Instagram in 2012.
React was open-sourced at JSConf US in May 2013. The community's initial reaction was mixed — JSX, the syntax that lets you write HTML-like markup inside JavaScript, looked strange and was seen as a violation of "separation of concerns." Over time, the community warmed to the idea that separating concerns (user authentication, data display, form validation) was more valuable than separating languages (HTML in one file, JS in another).
Key milestones in React's history:
2013 — Open-sourced at JSConf US
2015 — React Native launched, bringing React to mobile (iOS & Android)
2016 — React 15 introduced a stable API
2016 — React Fiber rewrite announced (a complete reimplementation of the core algorithm)
2017 — React 16 shipped with Fiber, error boundaries, portals, and fragments
2019 — React 16.8 introduced Hooks — the biggest paradigm shift in React's history
2022 — React 18 shipped concurrent features: automatic batching, useTransition, Suspense improvements
2024 — React 19 released with Server Components, the Actions API, and new hooks
Your First React Component
A React component is just a JavaScript function that returns JSX. Here is the canonical Hello World:
function HelloWorld() {
return <h1>Hello, world!</h1>
}
export default HelloWorldTo render this component into a real webpage, React needs a root DOM node to attach to. In a Vite project this lives in main.jsx:
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import HelloWorld from './HelloWorld'
const root = createRoot(document.getElementById('root'))
root.render(
<StrictMode>
<HelloWorld />
</StrictMode>
)The React Ecosystem Today
React itself is intentionally minimal — it handles only the view layer. A production application typically combines React with several companion libraries:
Routing — React Router or TanStack Router for client-side navigation
Data fetching — TanStack Query (React Query) or SWR for server state, caching, and background refetching
Global state — Redux Toolkit, Zustand, or Jotai for complex shared state
Forms — React Hook Form or Formik for validation and form state
Styling — Tailwind CSS, CSS Modules, or Styled Components
Meta-frameworks — Next.js (SSR/SSG/RSC), Remix, or Astro for full-stack apps
Testing — Vitest + React Testing Library, Playwright for E2E
This flexibility is both React's greatest strength and a common source of confusion for newcomers. Unlike Angular, which comes pre-bundled with everything, React lets you pick the right tool for your specific problem. The tradeoff is that you have more decisions to make upfront.
React 18 and 19: Where Things Stand
React 18 (released March 2022) introduced Concurrent React — a new behind-the-scenes rendering model that lets React pause, resume, and prioritize rendering work. This powers features like useTransition (mark updates as non-urgent), useDeferredValue (defer expensive re-renders), and improved Suspense.
React 19 (released late 2024) takes this further with React Server Components (RSCs) as a stable feature, the Actions API for handling async mutations, and new hooks like useOptimistic and useFormStatus. React 19 also removes legacy APIs (propTypes, defaultProps on function components, string refs) that have been deprecated for years.
Why React Dominates Frontend
Several factors explain React's sustained dominance:
Massive ecosystem — more npm packages, more tutorials, more Stack Overflow answers than any competing library
Reusable components — build once, use everywhere; open-source component libraries (shadcn/ui, MUI, Radix, Chakra) save enormous time
Strong job market — React skills are among the most-requested in frontend job postings worldwide
React Native — the same component model and hooks on iOS, Android, and the web
Meta's backing — Facebook runs React at massive scale, ensuring it gets real-world battle-testing
Community momentum — once a technology reaches critical mass, its ecosystem compounds: more libraries, more blog posts, more courses
Prerequisites for This Tutorial
Before diving deeper, you should be comfortable with:
HTML — understanding elements, attributes, and document structure
CSS — selectors, the box model, flexbox basics
JavaScript — variables, functions, arrays, objects,
map()/filter(), arrow functions, destructuring, modules (import/export), Promises andasync/awaitCommand line basics — navigating directories, running npm commands
You do not need prior knowledge of TypeScript, though this tutorial will mention TypeScript patterns where relevant. TypeScript is strongly recommended for production React projects and is covered in a dedicated section.