View Categories

React

Reading Time: 2 min read

Description #

React is a JavaScript library for building user interfaces, particularly single-page applications where performance and dynamic updates matter. Developed by Facebook, it uses a component-based architecture and a virtual DOM to efficiently render changes on the web.

History #

React was created by Jordan Walke at Facebook and released in 2013. It was initially used to power Facebook’s newsfeed and later Instagram. React pioneered the virtual DOM approach and influenced the rise of component-driven development.

Key milestones:

  • 2011: Internal prototype called “FaxJS”
  • 2013: Open-sourced as React
  • 2015+: Widespread adoption; became the most popular front-end library
  • 2020: React 17 introduced gradual upgrades
  • 2022–23: React 18 added features like concurrent rendering and automatic batching

Hello World Code #

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, World!</h1>);

Requires a setup like Create React App or Vite.

How to Run #

Online: #

Locally: #

  1. Set up with Create React App:
npx create-react-app hello-world
cd hello-world
npm start
  1. Edit src/App.js with the Hello World JSX

Key Concepts #

  • JSX — JavaScript + XML syntax to write UI code
  • Components — reusable UI units (<MyComponent />)
  • Props — data passed to components
  • State — internal data that changes over time
  • Virtual DOM — updates only what’s needed for efficiency
  • Hooks — functions like useState, useEffect for logic
  • One-way data flow — predictable UI updates
  • ReactDOM — renders React components to the browser
  • Declarative code — describe what UI should look like
  • Developer tools — React DevTools extension for debugging

Try It Online #

🔗 CodeSandbox – React Template
🔗 StackBlitz – React Starter
🔗 React Playground – W3Schools

Fun Facts #

  • React was used on Facebook, Instagram, and WhatsApp
  • The React team includes open-source champions and Facebook engineers
  • JSX is not required, but it’s the most popular way to write React
  • React’s core idea of components influenced Vue, Svelte, and Angular
  • React powers React Native, which is used for cross-platform mobile apps

Resources #

Updated on June 7, 2025

What are your Feelings

  • Happy
  • Normal
  • Sad
Scroll to Top