← Previous Next →

Overview of React

React is a popular JavaScript library for building user interfaces, primarily for web applications. Developed by Facebook, it allows developers to create reusable UI components that efficiently update and render when data changes.

Illustration of Overview of React
Illustration of Overview of React

💡 Key Concept: Component-Based Architecture

React uses components as the building blocks of the UI. Each component encapsulates its structure (HTML), style (CSS), and behavior (JavaScript), making code modular and maintainable.

Why Use React?

  • Declarative: You describe what the UI should look like, and React takes care of updating it when data changes.
  • Efficient: React uses a virtual DOM to minimize costly updates to the real DOM.
  • Reusable Components: Write components once and reuse them throughout your app.
  • Strong Ecosystem: Rich tooling, libraries, and community support.

Core Concepts

  • JSX: A syntax extension that looks like HTML but is actually JavaScript. It makes defining UI components intuitive.
  • Components: Functions or classes that return JSX to render UI elements.
  • Props: Short for properties, these are inputs to components used to customize output.
  • State: Local data managed inside components that can change over time, triggering re-renders.
  • Virtual DOM: React's lightweight copy of the real DOM for efficient updates.
React vs. Traditional DOM Manipulation
AspectReactTraditional DOM
Update MethodVirtual DOM diffing and batchingDirect DOM manipulation
Code StructureComponent-basedImperative scripts
PerformanceOptimized re-renderingCan be slower with frequent changes
Learning CurveModerate, involves JSX and concepts like stateBasic JavaScript and DOM APIs

Basic React Component Example

📌 Deep Dive: Simple Functional Component

JAVASCRIPT
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}
Rendered Output

Hello, Alice!

This component can be used like <Welcome name="Alice" /> to display a personalized greeting.

⚠️ JSX Needs to Be Transpiled

Browsers do not understand JSX natively. Tools like Babel transpile JSX into standard JavaScript before running in the browser.

Summary

  • React simplifies UI building through components and declarative code.
  • It efficiently updates the UI using a virtual DOM.
  • JSX makes code more readable and expressive.
  • Props and state are fundamental to passing data and managing dynamic content.
← Previous Next →