JS Guide
HomeQuestionsTopicsCompaniesResources
BookmarksSearch

Built for developers preparing for JavaScript, React & TypeScript interviews.

ResourcesQuestionsSupport
HomeQuestionsSearchProgress
HomeTopicsreactReact Fundamentals
PrevNext
react
beginner
8 min read

React Fundamentals

angular
comparison
ecosystem
fundamentals
react
virtual-dom
vue

React is a UI library (not a framework) that uses a virtual DOM for efficient updates, component-based architecture for reusability, and unidirectional data flow for predictable state management.

Key Points

1Library Not Framework

React handles only the view layer — you choose your own routing, state management, and other tools, unlike Angular which includes everything.

2Virtual DOM

Maintains a lightweight JS representation of the DOM, diffs changes with an O(n) algorithm, and applies only necessary updates to the real DOM.

3Component Architecture

Everything is a self-contained, reusable component that accepts props and returns JSX — composable like building blocks.

4Unidirectional Data Flow

Data flows parent → child via props; children communicate upward via callback props. Makes state changes predictable and traceable.

5Ecosystem and Flexibility

Largest frontend ecosystem (React Native, Next.js, thousands of libraries) and job market, with maximum flexibility in architecture choices.

What You'll Learn

  • Explain why you would choose React over Angular or Vue
  • Understand React's core principles: virtual DOM, components, and unidirectional data flow
  • Know the tradeoffs of React being a library rather than a framework

Deep Dive

React is a JavaScript library for building user interfaces, created by Facebook (now Meta) and open-sourced in 2013. Understanding what React is, how it differs from alternatives, and its core principles is foundational for any React interview.

Library vs Framework

React is a UI library, not a full framework. It handles the view layer only — rendering UI and responding to user interactions. For routing, state management, form handling, and HTTP requests, you choose your own libraries. Angular, by contrast, is a complete framework with routing, forms, HTTP client, and dependency injection built in. Vue sits in between — a progressive framework that starts minimal but has official solutions for routing (Vue Router) and state (Pinia). React's approach gives maximum flexibility but requires more decisions.

Virtual DOM

React maintains a lightweight JavaScript representation of the actual DOM called the virtual DOM. When state changes, React creates a new virtual DOM tree, diffs it against the previous one using an O(n) reconciliation algorithm, and applies only the necessary changes to the real DOM. This is faster than manipulating the DOM directly for most applications because DOM operations are expensive while JavaScript object comparisons are cheap.

Component-Based Architecture

Everything in React is a component — a self-contained, reusable piece of UI that accepts inputs (props) and returns JSX describing what should appear on screen. Components can be composed together like building blocks: a Page contains a Header, Sidebar, and Content, each of which contains smaller components. This promotes code reuse, separation of concerns, and easier testing.

Unidirectional Data Flow

Data in React flows in one direction: from parent to child via props. When a child needs to communicate back to its parent, the parent passes a callback function as a prop. This makes state changes predictable — you can always trace where data comes from by following the prop chain upward. Angular uses two-way data binding by default (changes in the view automatically update the model and vice versa), which can make data flow harder to trace in large applications.

JSX

React uses JSX, a syntax extension that lets you write HTML-like markup inside JavaScript. This keeps render logic and UI structure in the same file, making it easier to see what a component renders. JSX compiles to JavaScript function calls — it's not a template language.

Ecosystem and Adoption

React has the largest ecosystem in the frontend world. React Native brings React to mobile development. Next.js adds server-side rendering and static generation. Thousands of libraries exist for every need. The job market reflects this — React consistently has the most frontend job postings.

React vs Angular vs Vue

Angular: full framework, TypeScript by default, opinionated project structure, two-way binding, steeper learning curve, strong in enterprise. Vue: progressive framework, template-based, gentler learning curve, smaller ecosystem. React: library, JSX, maximum flexibility, largest ecosystem, biggest job market. The choice depends on project needs and team preferences — there's no universally "best" option.

Key Interview Distinction

React is a library focused on the view layer with a virtual DOM, component-based architecture, and one-way data flow. Its flexibility means more decisions but also more freedom. The virtual DOM is not inherently faster than other approaches — it's a tradeoff that works well for complex UIs with frequent updates.

Fun Fact

React was created by Jordan Walke at Facebook in 2011 to solve the problem of building complex, dynamic UIs for the Facebook News Feed. It was first deployed on Facebook in 2011, then on Instagram in 2012, and open-sourced at JSConf US in May 2013.

Continue Learning

JSX

beginner

Components

beginner

Unidirectional Data Flow

beginner

Practice What You Learned

Why would you choose React over other frameworks like Vue or Angular?
junior
fundamentals
React is a flexible UI library (not a full framework) with automatic optimization via React Compiler, massive ecosystem (React Native, Next.js), largest job market, and one-way data binding that makes debugging easier. Its component-based architecture, Server Components, and JSX syntax offer a JavaScript-first approach.
What are the differences between CSR, SSR, and SSG in React applications?
mid
rendering
CSR renders entirely in the browser, SSR generates HTML on each request server-side, and SSG pre-builds HTML at build time. Each has different tradeoffs for performance, SEO, and data freshness.
Previous
Forms
Next
Hooks
PrevNext