3.4 the code react is written declarative wa

Before we dive into concrete code, let's understand how a React component is actually built. In the end, every user interface on the web is made of three things: HTML, CSS and JavaScript. A React component is no exception — it is simply a unit that combines these three together in a single, self-contained block, and the entire interface is assembled by composing many such components.

React is therefore all about components and about how we put them together. The library gives us a way to create reusable and reactive components, and later in the course you will see that each one is made of HTML and JavaScript (with the CSS attached on the side, often via an imported stylesheet).

The declarative approach

  • You do not write code that says "create this HTML element, then insert it at this exact position in the DOM".
  • You describe what the final UI should look like in terms of components and props.
  • React figures out which DOM operations are needed to match that description and runs them for you.

That is what makes React's style declarative, in contrast to the imperative DOM code you would write in plain JavaScript with document.createElement and appendChild. In other words, you build your own custom HTML-like elements — your components — and you combine them to create the interface. With that mindset clear, let's finally jump into the code and start building our first components.

Summary

This lesson introduces React's declarative approach to building components. React combines HTML, CSS, and JavaScript into reusable components that you compose together to build entire user interfaces. Unlike vanilla JavaScript's imperative style where you manually create and insert DOM elements, React lets you declare custom components and combine them to create your UI.

Key points

  • React components are built from HTML, CSS, and JavaScript combined together
  • React uses a declarative approach, not imperative like vanilla JavaScript
  • You don't manually insert HTML elements at specific locations—you declare components instead
  • Components are reusable and reactive, built on a declarative foundation
  • Multiple components combine together to form the complete user interface

FAQ

What's the difference between React's declarative approach and vanilla JavaScript's imperative approach?

In vanilla JavaScript, you manually create and insert HTML elements at specific locations. In React, you declare custom components and let React manage how they render and combine into the UI.

How are React components built?

React components combine HTML, CSS, and JavaScript together. These components are reusable and reactive, and you compose them to build the entire user interface.

Why does React use a declarative approach?

A declarative approach simplifies UI building by letting you describe what the UI should look like rather than manually managing every DOM operation. You focus on creating components and combining them, while React handles the rest.