What is React? — React Fundamentals

ANALOGY

React is a description, not a set of instructions. With vanilla JavaScript, you write step-by-step instructions: find this element, change that text, add this class. With React, you describe what the UI should look like given the current data. React figures out how to update the DOM to match your description — efficiently, automatically.

Why React exists

As web apps became more complex — think Facebook's news feed updating in real-time while you write a comment while notifications pop up — manually managing DOM updates became unmanageable. React solved this with the Virtual DOM: a lightweight copy of the real DOM. React compares the virtual DOM to the real DOM, and only updates what actually changed.

The component model

React apps are built from components — small, reusable pieces of UI. Every button, card, navbar, and page is a component. Components can contain other components. This makes complex UIs manageable: you work on one piece at a time, and compose them into a whole.

Your first React component

jsx

// A React component is a JavaScript function that returns JSX
function WelcomeBanner() {
  return (
    <div>
      <h1>Welcome to NelsonLabs</h1>
      <p>Learn to code with real-world examples.</p>
    </div>
  );
}

// Use it like a custom HTML tag
function App() {
  return (
    <main>
      <WelcomeBanner />
      <WelcomeBanner />  {/* reuse it anywhere */}
    </main>
  );
}