React

People working at Meta (then Facebook) opened React in 2013. A page is not one huge file. Each component keeps its own data and its own look. JSX looks like HTML, but it sits inside JavaScript. The browser does not read JSX by itself. A build tool turns it into plain JavaScript.

React is for a screen that changes: a list grows, a button changes state, and the same card is used in many places.

• Using the same button in several places
• Building a list from data
• Showing a form error on the screen
• A page inside a framework such as Next.js

With React you write a card, a menu, and a search box. When state changes, React tries to update only the part that changed. It is not a database and it does not build the server by itself. React Native is a separate library for a phone app. It is not the same thing.

The first component is easy. The difficulty is where the state is kept. If every button counts inside itself, the page becomes scattered later. When an effect or a list key is wrong, the screen updates too often, or an old value stays.

Advantage: the same part is not rewritten, and a large interface splits into pieces. Limit: JSX and a build tool are an extra step. For a small fixed page, plain HTML is the straighter path. React is not a requirement of every project.

A component is a function. Props are the value that comes in from outside. State is the value that changes inside it.

• JSX writes the look inside JavaScript
• Props do not change the component; they are incoming data
• When state changes, that part updates
• A key keeps which row is which in a list

This function returns a heading. To see it in the browser you still connect it to the page and translate the JSX.

function Hello() {
  return <h1>Salam</h1>;
}

The function above only returns a heading. These four show the ideas people actually use: a value from outside, a number that changes, a list, and a sentence that depends on a score. The browser does not run JSX as it is written. A build tool turns it into JavaScript. useState comes from React, so the file needs the import that your project already shows.

A sentence that takes a name

Greeting is a component. The name inside the braces is a prop: it comes from whoever uses the component. The component does not invent the name. {name} drops that value into the sentence. If the parent passes Aysel, the screen says Salam, Aysel. Change the prop and the sentence changes. The function itself stays the same.

function Greeting({ name }) {
  return <p>Salam, {name}</p>;
}

One component can be used for many names. You do not copy the paragraph for each person.

A button that counts

count is state. It starts at 0. setCount is the only way to give it a new number. The button shows the current number. onClick runs when the person presses. count + 1 does not change count by itself. setCount tells React the new value, and React draws the button again. Writing count = count + 1 skips React, and the screen stays on the old number.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Each press shows the next number: 0, then 1, then 2. The page does not reload.

A list from an array

names is ordinary data. map walks each name and returns a li. React needs key so it knows which row is which when the list later changes. Here the name itself is the key, and that is fine only because the two names are different. An empty array draws no rows. Add Nigar to the array and a third row appears without a new line of HTML.

const names = ["Aysel", "Murad"];

function NameList() {
  return (
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

The screen shows two items: Aysel and Murad. The ul is the list. The data is not written inside the tags one by one.

A sentence that depends on the score

score arrives as a prop, like the name above. The question mark picks one of two words. If the score is 50 or more, the paragraph says Keçdi. Otherwise it says Qaldı. 50 itself passes, because the check is greater than or equal. This is still one component. The decision sits in the JavaScript expression, not in a separate HTML file.

function Score({ score }) {
  return <p>{score >= 50 ? "Keçdi" : "Qaldı"}</p>;
}

Score 85 shows Keçdi. Score 40 shows Qaldı. The component does not store the score. The caller does.

• Are React and JavaScript the same? No. React is a library. JavaScript is what writes it.
• Is React a framework? It calls itself a library. A page route and a server usually add another tool.
• Does React replace HTML? No. In the end the browser still sees elements.