Welcome to your first React tutorial! We'll build a real product catalog website together, step by step: a product list, detail pages, a review form, several sub-pages, and a small database of our own running behind the scenes. By the end, you won't just know HOW to use React, but WHY each building block works the way it does.

Who is this tutorial for?

Anyone who has never worked with React before. Some basic HTML/CSS/JavaScript knowledge helps but isn't required – every new concept is explained exactly where it's first needed. If you've already worked through our React Native tutorial, many concepts (components, props, state, hooks) will feel instantly familiar – React for the web and React Native share the same core, only the visible building blocks differ.

What is React?

React is a JavaScript library for building user interfaces. Instead of prescribing step by step HOW a webpage should update when something changes ("add this element", "change that text"), in React you only describe WHAT the interface should look like at any given moment – React itself takes care of efficiently bringing the webpage to that state. This is called "declarative" programming, as opposed to "imperative".

The problem React solves

To display and update a product list without React, you'd manipulate the DOM (the browser's tree structure of the webpage) directly with plain ("vanilla") JavaScript:

<ul id="product-list"></ul>
<script>
  const list = document.getElementById('product-list');
  function showProducts(products) {
    list.innerHTML = ''; // clear everything
    products.forEach((product) => {
      const li = document.createElement('li');
      li.textContent = product.name + ' – $' + product.price;
      list.appendChild(li);
    });
  }
</script>

That works fine for a small list. But once several parts of the page depend on the same data at once (the list itself, a "12 products found" counter, a cart icon in the header), you have to manually keep every single one of them in sync. That quickly becomes messy and error-prone – exactly the problem React solves: you describe the interface once, as a function of your data, and React automatically keeps every affected spot up to date, no matter how often or where the data changes.

Why React (and not just more vanilla JavaScript)?

• Components: the interface is assembled from small, independent, reusable building blocks, instead of one large file full of DOM-manipulation code.
• Automatic updates: you change data, React updates the affected parts of the interface – you never have to manually work out what all needs to change.
• Huge ecosystem: for practically every problem (forms, routing, date libraries, ...) there's already a ready-made, well-tested solution.
• Built by Meta and used in extremely large, real applications (Facebook, Instagram, and countless other companies) – not a niche experiment.
• The same concepts as React Native: components, props, state, and hooks work almost identically in both – what you learn here also helps with the mobile tutorial, and vice versa.

What we're building together

A product catalog website called produktkatalog-web: a searchable product list (data from a real product API), detail pages with a review form, several sub-pages with real routing, a simple login area, and – as our own small extension beyond plain product data – a self-built review feature with its own server and its own database in Docker. Every chapter builds directly on the files from the previous chapters.