What Is React? A Beginner’s Guide You Can Remember

There is a website that has a search box, a menu and a like button. When someone clicks the button the numbers goes up. When they open the menu more options show up.

React helps developers build these parts of a website and makes sure they stay connected to the application data.

React is a javascript library for building user interfaces. A user interfaces is everything that people see and interact with like buttons, forms and navigation menus.

Building a Page with Components

React applications are made up of components. A components is a part of the user interface that has its looks and behavior.

Imagine a blog. The page could have a header, an article card and a footer. Each of these can be a component that you use again again on the website.

Here is a small example:

function Welcome() {
  return <h1>Welcome to Developer’s Notebook</h1>;
}

Think Welcome is a component that shows a heading. You can add it to another component by writing <Welcome />.

The markup inside the function is called JSX. It looks like HTML. It lets you describe an interface in javascript.

Making the Interface Interactive

I notice that an interface that is useful often needs to remember information. For example a like button needs to remember how many likes it has. React calls this information state.

import { useState } from "react";
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
  function addLike() {
    setLikes(previousLikes => previousLikes + 1);
  }
  return (
    <button onClick={addLike}>
      Likes: {likes}
    </button>
  );
}

The button starts at zero. Every click runs addLike which requests the count to increase. React then display the updated value. I see that likes hold the number while setLikes updates it. The {likes} expression places that number inside the button's text.

How Does React Update the Page?

When state changes React figures out what the interface should look like. This process is called rendering. Then it makes the needed changes to the browser's DOM, Which is the browser's internal model of the web page.

You might hear people talk about the DOM. Think of it as a copy of the interface that lives in memory. It's not something you see. It helps React know what to change.

When a component renders again React doesn't replace everything on the screen. For example if a like button is updated the button itself can stay in place. Only the number that shows how many likes it has changes.

What Should You Know Before Learning React?

Basic HTML, CSS and JavaScript will make React easier to understand. HTML provides structure CSS handles appearance and JavaScript supplies logic.

Keep this sentence in mind: Components organise the interface state remembers information and React updates what users see.