Introduction to React

Welcome to the React for Beginners series on Scriptly. Across twenty hands-on chapters you will go from an empty folder to a deployed single-page application. This first chapter answers three questions: what React actually is, why developers reach for it instead of plain DOM code, and how the pieces you are about to learn — components, props, state and JSX — fit together.

What React is

React is a JavaScript library for building user interfaces out of small, reusable pieces called components. It was open-sourced by Facebook in 2013 and is now maintained by Meta together with a large open-source community. React deliberately covers only the view layer: it does not dictate how you fetch data, style pages or handle URLs, so you pair it with tools such as Vite and React Router as your project grows.

• Declarative — you describe what the screen should look like for a given set of data, and React works out the DOM updates.
• Component-based — every button, form and page is a function you can reuse, test and reason about in isolation.
• Learn once, use widely — the same mental model powers web apps, React Native mobile apps and many component libraries.

Imperative vs declarative UI

In plain JavaScript you tell the browser how to change the page, step by step. If you have written code with addEventListener and textContent in the DOM chapters, you know how quickly the instructions pile up:

let count = 0;
const label = document.querySelector('#label');
const button = document.querySelector('#button');

button.addEventListener('click', () => {
  count = count + 1;
  label.textContent = `${count} clicks`;
});

Expected output:

0 clicks
1 clicks
2 clicks   (after each click — you wrote every DOM instruction yourself)

React flips the model: you render the result and let React apply the differences.

Components: UI built from functions

A React component is a plain function that returns a description of UI. The syntax below looks like HTML but is JSX, the topic of the next-but-one chapter — for now notice that logic and markup live together:

function Greeting({ name }) {
  const hour = new Date().getHours();
  const mood = hour < 12 ? 'Good morning' : 'Good afternoon';

  return (
    <h1 className="greeting">
      {mood}, {name}!
    </h1>
  );
}

Expected output: for name = "Ada" the page shows a single heading — Good afternoon, Ada! — recomputed every time the component runs. One function, one piece of screen.

Rendering and the virtual DOM

When React renders a component it simply calls the function and captures what it returned as a lightweight description. React keeps two copies of that description — the previous one and the new one — compares them, and applies only the real differences to the browser's DOM. This comparison layer is often called the virtual DOM, and the process of comparing and applying is reconciliation.

1. Something changes — a click handler, fetched data, a timer.
2. React calls your component function again with the new data.
3. React diffs the old and new descriptions and updates only what changed.

That is why updating a counter ten times does not rebuild the page ten times: only the text node holding the number is touched.

Props, state and shared vocabulary

React code leans on a small vocabulary. Learning it now makes every later chapter easier to read:

Data flows in one direction: parent to child through props, events back up through callback functions. This one-way data flow is what keeps large applications predictable.

The modern React landscape

This series is written for the React 18/19 era and uses function components and hooks only. A few names you will hear, with honest context:

• Vite — the build tool and dev server used throughout; it starts instantly and replaces the older Create React App, which is now effectively retired.
• Hooks — useState, useEffect and friends bring state and lifecycle to functions.
• Class components — the pre-2019 style with this and lifecycle methods. You only need to recognise them when reading old code; this course does not use them.
• React 19 — the current stable release, adding quality-of-life features while keeping everything you learn here fully valid.

Common mistakes

• Expecting React to replace JavaScript — React is JavaScript; functions, arrays and destructuring do all the heavy lifting.
• Trying to memorise the API first — the mental model (declarative UI, one-way data flow) matters more than any single hook signature.
• Assuming rendering means the whole page redraws — React diffs descriptions and touches only changed DOM nodes.
• Starting with a class-based tutorial — old articles rely on this.state and lifecycle methods that modern code no longer needs.
• Skipping the DOM basics — events, elements and the difference between HTML and DOM still matter; React sits on top of them.

Practice checklist

1. Explain the difference between imperative and declarative UI in one sentence, using the counter example.
2. Write down the five vocabulary terms from the table from memory, then check them.
3. Read the intro paragraph of each remaining chapter title in the sidebar and note which concepts are completely new to you.
4. Skim Introduction to JavaScript if functions or array methods feel rusty — you will use them constantly.

You now know what React solves. Next, install the toolchain that makes development instant — Setting Up React with Vite.