# React

> A JavaScript library for building screens out of reusable pieces called components.

- Level: Intermediate
- Topics: Software
- URL: https://tidbit.legios.com.ar/react/
- In Spanish: [React](https://tidbit.legios.com.ar/es/react/)

**React** is a JavaScript library for building user interfaces, created at Facebook and released as open source in 2013. Instead of writing one big page, you build small **components**: a button, a comment, a product card. Each one is a function that takes some data and returns what should appear on screen, and components nest inside each other to make whole apps.

The key idea is that you describe what the screen should look like for the current data, and React works out what to change. When something happens, like a new message arriving or a like being added, you update the data, called **state**, and React redraws only the parts of the page that depend on it. Components are usually written in **JSX**, a syntax that mixes HTML-like tags into JavaScript.

React is one of the most widely used tools for frontend work, and a large ecosystem has grown around it. Frameworks like Next.js add routing and server rendering on top, and React Native uses the same ideas to build mobile apps. React itself is a library, not a full framework, so teams still choose other pieces, such as how to fetch data or handle forms.

## An analogy

LEGO for screens. You design a few kinds of brick once, snap them together into anything, and when one part needs to change you swap that brick instead of rebuilding the whole castle.

## Keep in mind

- React builds interfaces out of reusable components.
- You change the data (state) and React updates the screen to match.
- JSX lets you write HTML-like tags inside JavaScript.
- Created at Facebook, it is open source and maintained by Meta.

## Go deeper

- [React (official site)](https://react.dev/)
- [Learn React (official docs)](https://react.dev/learn)

## Related terms

- [JavaScript](https://tidbit.legios.com.ar/javascript/): The programming language that runs inside web pages and makes them interactive.
- [UX and UI](https://tidbit.legios.com.ar/ux-and-ui/): UI is what you see and touch on a screen; UX is how the whole experience feels.
- [Meta](https://tidbit.legios.com.ar/meta/): The company behind Facebook, Instagram and WhatsApp, paid for by advertising.
- [Open source](https://tidbit.legios.com.ar/open-source/): Software whose code anyone can read, use, change and share.
- [HTML](https://tidbit.legios.com.ar/html/): The text format that describes what is on a web page: headings, paragraphs, links.
- [Frontend and backend](https://tidbit.legios.com.ar/frontend-and-backend/): The part of an app you see and touch, and the part that works behind it.
- [Framework](https://tidbit.legios.com.ar/framework/): A ready-made skeleton for an app: it sets the structure and calls your code.
- [Server](https://tidbit.legios.com.ar/server/): A computer whose job is to answer requests from other computers, all day, every day.