logo by @sawaratsuki1004

React

La biblioteca para interfaces de usuario web y nativas

Crea interfaces de usuario a partir de componentes

React te permite construir interfaces de usuario a partir de piezas individuales llamadas componentes. Crea tus propios componentes de React como Thumbnail, LikeButton, y Video. Luego combínalos para formar pantallas, páginas y aplicaciones.

Video.js

function Video({ video }) {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}

Sin importar si trabajas por tu cuenta o con otros miles de desarrolladores, utilizar React se siente igual. Está diseñado para permitirte combinar a la perfección componentes escritos por personas, equipos y organizaciones de forma independiente.

Escribe componentes con código y marcado

Los componentes de React son funciones de JavaScript. ¿Quieres mostrar algún contenido condicionalmente? Utiliza una sentencia if. ¿Mostrar una lista? Prueba la función map() de un array. Aprender React es aprender a programar.

VideoList.js

function VideoList({ videos, emptyHeading }) {
const count = videos.length;
let heading = emptyHeading;
if (count > 0) {
const noun = count > 1 ? 'Videos' : 'Video';
heading = count + ' ' + noun;
}
return (
<section>
<h2>{heading}</h2>
{videos.map(video =>
<Video key={video.id} video={video} />
)}
</section>
);
}

Esta sintaxis de marcado se llama JSX. Es una extensión de la sintaxis de JavaScript popularizada por React. Al poner marcado JSX cerca de la lógica de renderizado relacionada hace que los componentes de React sean fáciles de crear, mantener y eliminar.

Añade interactividad dondequiera que la necesites

Los componentes de React reciben datos y devuelven lo que debe aparecer en la pantalla. Puedes pasarles nuevos datos en respuesta a una interacción, como cuando el usuario escribe en un campo de texto. React actualizará entonces la pantalla para que se corresponda con los nuevos datos.

SearchableVideoList.js

import { useState } from 'react';

function SearchableVideoList({ videos }) {
const [searchText, setSearchText] = useState('');
const foundVideos = filterVideos(videos, searchText);
return (
<>
<SearchInput
value={searchText}
onChange={newText => setSearchText(newText)} />
<VideoList
videos={foundVideos}
emptyHeading={`No matches for “${searchText}”`} />
</>
);
}

No tienes que construir toda tu página con React. Añade React a tu página HTML existente y renderiza componentes interactivos de React en cualquier lugar de ella.

Cubre todo el stack con un framework

React es una biblioteca. Te permite agrupar componentes, pero no prescribe cómo hacer el enrutamiento y la obtención de datos. Para construir una aplicación completa en React, recomendamos un framework full-stack de React como Next.js o Remix.

confs/[slug].js

import { db } from './database.js';
import { Suspense } from 'react';

async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}

async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}

React también es una arquitectura. Los frameworks que la implementan te permiten obtener datos en componentes asíncronos que se ejecutan en el servidor o incluso durante la compilación. Lee datos de un archivo o una base de datos y pásalos hacia abajo a tus componentes interactivos.

Utiliza lo mejor de cada plataforma

A las personas les encantan las aplicaciones web y nativas por razones diferentes. React te permite construir tanto aplicaciones web como nativas utilizando las mismas habilidades. Se apoya en las fortalezas únicas de cada plataforma para permitir que tus interfaces se sientan naturales en cada una de ellas.

example.com

Manténte fiel a la web

Las personas esperan que las páginas de las aplicaciones web carguen rápidamente. En el servidor, React te permite servir HTML bajo demanda mientras aún estás cargando datos, rellenando progresivamente el contendido faltante antes de que cargue ningún código de JavaScript. En el cliente, React puede usar APIs web estándares para mantener tu interfaz de usuario responsiva incluso en medio del renderizado.

1:31 AM

Logra una UI realmente nativa

Las personas esperan que las aplicaciones nativas se vean y se sientan como su plataforma. React Native y Expo te permiten construir aplicaciones en React para Android, iOS y más. Lucen y se sienten como nativas porque sus UIs son realmente nativas. No es una vista web: tus componentes de React renderizan vistas reales de Android e iOS provistas por la plataforma.

Con React, puedes ser un desarrollador web y de aplicaciones nativas. Tu equipo puede producir para muchas plataformas sin sacrificar la experiencia de usuario. Tu organización puede tender puentes para romper el aislamiento entre plataformas y formar equipos que estén a cargo de funcionalidades completas de extremo a extremo.

Actualiza cuando el futuro esté listo

React atiende los cambios con cuidado. Cada commit de React se prueba en escenarios críticos para el negocio con más de mil millones de usuarios. Más de 100 000 componentes de React en Meta ayudan a validar cada estrategia de migración.

El equipo de React siempre está investigando como mejorar React. Algunas investigaciones toman años en arrojar resultados. React tiene el listón alto para llevar una idea de investigación a producción. Solo enfoques probados se vuelven parte de React.

Únete a una comunidad de millones

No estás solo. Dos millones de desarrolladores de todo el mundo visitan la documentación de React cada mes. React es algo que las personas y los equipos pueden estar de acuerdo.

Personas cantando karaoke en React Conf
Sunil Pai hablando en React India
Una conversación en el pasillo entre dos personas en React Conf
Una conversación en el pasillo en React India
Elizabet Oliveira hablando en React Conf
Personas tomándose un selfie en React India
Nat Alison hablando en React Conf
Los organizadores saludando a los participantes en React India

Es por esto que React es más que una biblioteca, una arquitectura, o incluso un ecosistema. React es una comunidad. Es un lugar dónde puedes pedir ayuda, encontrar oportunidades y conocer nuevos amigos. Conocerás tanto desarrolladores como diseñadores, principiantes y expertos, investigadores y artistas, maestros y estudiantes. Nuestros antecedentes pueden ser muy diferentes, pero React nos permite a todos crear juntos interfaces de usuario.

logo by @sawaratsuki1004

Bienvenido a la comunidad de React

Introducción