Introduction to React

What Is React?

React is an open-source UI library maintained by Meta. Instead of manually updating the DOM when data changes, you describe how the UI should look for a given state, and React efficiently reconciles the virtual DOM with the real DOM to apply only the necessary updates.

Modern React (18 and 19) centers on function components and hooks. You compose small, focused components that receive props, manage local state with hooks like useState, and side effects with useEffect. This model scales from a single widget to large applications with routing, global state, and server-driven UIs.

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

createRoot(document.getElementById('root')).render(
  <Welcome name="React" />
);

A minimal React 18 app: a function component receives props and returns JSX, then createRoot().render() mounts it to the page.

Core React Concepts

Component  →  reusable UI unit (function returning JSX)
JSX        →  syntax that looks like HTML inside JavaScript
Props      →  read-only inputs passed from parent to child
State      →  mutable data managed inside a component
Hooks      →  functions like useState, useEffect for logic in components

• Components are the building blocks; compose them like LEGO pieces to build UIs.
• JSX is optional sugar — it compiles to React.createElement() calls.
• Props flow down; state is local unless lifted or shared via context or a store.
• React 18+ uses createRoot instead of the legacy ReactDOM.render API.

React at a Glance

The essential vocabulary before writing your first component.

Why Teams Choose React

React's component model encourages reuse and separation of concerns. A button, a form field, and a data table can each be isolated, tested, and composed into pages without entangling markup, styling, and behavior.

The ecosystem is another major draw: React Router for navigation, TanStack Query for server state, Redux or Zustand for client state, and meta-frameworks like Next.js and Remix for full-stack apps all build on the same mental model.

• Large community, extensive documentation, and long-term industry adoption.
• Transferable skills to React Native, Expo, and many meta-frameworks.
• Strong TypeScript support for safer large-scale codebases.
• Concurrent features in React 18+ for smoother, more responsive UIs.

React Compared to Other Frameworks

React is a library focused on the view layer, not a full framework. You choose your own router, state library, and build tool. Vue and Svelte bundle more opinions; Angular ships a complete platform. React's flexibility is a strength for teams with specific requirements and a trade-off for beginners who want batteries included.

Common Mistakes

• Treating React as a full framework when it is primarily a UI library — you still choose routing, data fetching, and build tools.
• Assuming class components are required; function components with hooks are the modern default.
• Confusing React (web) with React Native (mobile) — related but different runtimes.
• Skipping the official React docs in favor of outdated Create React App tutorials.

Key Takeaways

• React is a declarative UI library built around reusable components.
• Modern React uses function components, hooks, and the createRoot API.
• Props flow down; state and effects are managed with hooks.
• React's ecosystem covers routing, server state, and full-stack frameworks.