You open any front-end job listing and there it is: React. Before you start memorizing syntax, it’s worth understanding what this library solves and why it became a standard.
What is React, anyway?
React is a JavaScript library for building interfaces. That’s it. It isn’t a full framework with rules for everything: its focus is the visual layer, the part users see and interact with.
The central idea is to break the screen into small, reusable pieces and let React handle updating the interface when the data changes. Instead of manipulating the DOM by hand, you describe what the interface should look like, and React takes care of reflecting that state.
Components: the building blocks
In React, everything is a component. A button, a card, a form, an entire page: each one is a function that returns a piece of the interface.
jsx function Saudacao() { return
Olá, mundo!
; }Components fit inside one another, like Lego pieces. You build small components and combine them into larger ones. This keeps the code organized and, most importantly, reusable: write a Botao once and use it in ten places.
JSX: HTML inside JavaScript
That <h1> in the middle of the JavaScript is JSX. It’s a syntax that lets you write something similar to HTML directly in your code.
jsx function Perfil() { const nome = "Ana"; return
Bem-vinda, {nome}!
; }The {} braces are the bridge: inside them, you can place real JavaScript—variables, calculations, and function calls. It looks like HTML, but it’s JavaScript, so logic and markup live together.
Props and state: data that flows and data that changes
Components need data, and it arrives through two paths.
Props are data a component receives from outside, much like function arguments. Whoever uses the component passes in the values.
jsx function Saudacao(props) { return
Olá, {props.nome}!
; }// uso: <Saudacao nome="Ana" />
Props are read-only: the component doesn’t change what it received.
State is internal data that changes over time—a counter, a form field, or a menu that is open or closed. When state changes, React re-renders the component automatically.
jsx import { useState } from "react";
function Contador() { const [contagem, setContagem] = useState(0); return ( <button onClick={() => setContagem(contagem + 1)}> Cliquei {contagem} vezes </button> ); }
The mental model: props flow from parent to child, while state lives inside the component.
The declarative model (and why it makes life easier)
Here’s the key insight. In the old, imperative approach, you gave step-by-step instructions: “get this element, change the text, hide that other one.” It’s easy to make a mess.
React is declarative: you describe what the screen should look like for a given state, and that’s it. When state changes, you don’t chase down every piece and update it by hand. React compares what was there with what should be there and applies only the difference.
It’s the difference between saying “the button displays the current count” and having to remember to rewrite the button’s text every time the number changes. Fewer manual steps, fewer bugs.
Ecosystem and when to use React
React itself is lightweight, so in practice it comes with other tools. To start a project today, Vite is a solid choice: with one command, you have an environment running in seconds.
That useState you saw is a hook—a special function that gives components extra capabilities, such as storing state or responding to events. There are several (useEffect, useContext, and so on), but that’s a topic for later; for now, knowing they exist is enough.
So when does React make sense? When the interface has a lot of interaction and changing state: dashboards, apps, and screens that constantly respond to the user. For a simple static page, it may be overkill. Use it when the screen’s complexity justifies it.
In the end, React is this: components that fit together, data that flows, and a screen that updates itself. Start by building small components, experiment with props and state, and the rest will come along the way.
