What is React?

You now know enough JavaScript to start on React itself. Before writing any, it helps to see what React does for you, by looking at what life is like without it.

React is a JavaScript library for building user interfaces. It was created at Facebook (now Meta) and is open source. It does one job: it keeps what is on the screen in sync with your data. Routing, data fetching and other features come from other libraries or from frameworks built on top of React, such as Next.js, which you will use on Day 7.

Life without ReactCopy Anchor Link

A web page is made of elements: headings, paragraphs, buttons, lists. In the browser, these elements live in a tree called the DOM (Document Object Model). Plain JavaScript can change the page by changing the DOM directly.

Here is how you would show a list of books with plain JavaScript, and then add one more:

const books = ['The Hobbit', 'Dune'];

// 1. Find the place on the page
const list = document.getElementById('book-list');

// 2. Create one element per book and attach it
for (const title of books) {
  const item = document.createElement('li');
  item.textContent = title;
  list.appendChild(item);
}

// 3. Later, a new book is added. Update the data...
books.push('Emma');

// ...and do not forget to update the page by hand too
const newItem = document.createElement('li');
newItem.textContent = 'Emma';
list.appendChild(newItem);

// 4. And the counter elsewhere on the page
document.getElementById('book-count').textContent = books.length + ' books';

This style is called imperative: you give the browser step-by-step instructions. Find this, create that, attach it there.

It works for small pages. But every time your data changes, you must remember every place on the page that depends on it, and update each one correctly. Forget one, and the screen shows something out of date. As an app grows, this becomes the main source of bugs.

The React way: describe the resultCopy Anchor Link

With React, you do not write the steps. You write a description of what the screen should look like for the current data. React works out the steps.

Add another title to the books array, such as 'Beloved'. Both the list and the count update, and you did not touch either of them. You changed the data, and the description took care of the rest.

This style is called declarative: you declare what you want, not how to get there. The HTML-like code inside return (...) is called JSX, and it is the subject of the next lesson. (The key part is explained on Day 2.)

When your data changes later in the week (because someone clicks a button, types in a box, or a server replies), React calls your description again, compares the new result with the old one, and updates only the DOM elements that differ.

Components: the building blocksCopy Anchor Link

The second big idea is components. A component is a reusable, self-contained piece of UI: a button, a book card, a search box, a whole page. In React, a component is a JavaScript function that returns JSX.

You build bigger components out of smaller ones, the same way HTML nests tags.

Header, BookCard and Footer are components, and App uses them like custom HTML tags: <Header />. Notice that BookCard is written once but used twice. Change the title inside BookCard and both cards change.

Together, these components form a tree, with App at the top:

App
├── Header
├── BookCard
├── BookCard
└── Footer

This is exactly the tree you will see in the Components tab of React DevTools. Thinking about an app as a tree of components, each with one job, is the core skill of React.