nete a la React Conf del 7 al 8 de Octubre.

v19.1

BsquedaCtrlK

Aprende

Referencia

Comunidad

Blog

[logo by @sawaratsuki1004]

React

La biblioteca para interfaces de usuario web y nativas

Aprende React Referencia de la API

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 combnalos para formar pantallas, pginas 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>
  );
}

My video

Video description

Sin importar si trabajas por tu cuenta o con otros miles de desarrolladores, utilizar React se siente igual. Est diseado para permitirte combinar a la perfeccin componentes escritos por personas, equipos y organizaciones de forma independiente.

Escribe componentes con cdigo y marcado

Los componentes de React son funciones de JavaScript. Quieres mostrar algn contenido condicionalmente? Utiliza una sentencia if. Mostrar una lista? Prueba la funcin 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>
  );
}

3 Videos

First video

Video description

Second video

Video description

Third video

Video description

Esta sintaxis de marcado se llama JSX. Es una extensin de la sintaxis de JavaScript popularizada por React. Al poner marcado JSX cerca de la lgica de renderizado relacionada hace que los componentes de React sean fciles de crear, mantener y eliminar.

Aade 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 interaccin, 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}`} />
    </>
  );
}

example.com/videos.html

React Videos

A brief history of React

5 Videos

React: The Documentary

The origin story of React

Rethinking Best Practices

Pete Hunt (2013)

Introducing React Native

Tom Occhino (2015)

Introducing React Hooks

Sophie Alpert and Dan Abramov (2018)

Introducing Server Components

Dan Abramov and Lauren Tan (2020)

No tienes que construir toda tu pgina con React. Aade React a tu pgina HTML existente y renderiza componentes interactivos de React en cualquier lugar de ella.

Aade React a tu pgina

Cubre todo el stack
con un framework

React es una biblioteca. Te permite agrupar componentes, pero no prescribe cmo hacer el enrutamiento y la obtencin de datos. Para construir una aplicacin 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} />;
}

example.com/confs/react-conf-2021

React Conf 2021React Conf 2019

[]

19 Videos

[]

[]

[]

React Conf

Hydrogen + React 18

Helen Lin

React tambin es una arquitectura. Los frameworks que la implementan te permiten obtener datos en componentes asncronos que se ejecutan en el servidor o incluso durante la compilacin. Lee datos de un archivo o una base de datos y psalos hacia abajo a tus componentes interactivos.

Comienza a usar un framework

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

Mantente fiel a la web

Las personas esperan que las pginas de las aplicaciones web carguen rpidamente. En el servidor, React te permite servir HTML bajo demanda mientras an ests cargando datos, rellenando progresivamente el contendido faltante antes de que cargue ningn cdigo de JavaScript. En el cliente, React puede usar APIs web estndares para mantener tu interfaz de usuario responsiva incluso en medio del renderizado.

5:57 PM

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 ms. 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 organizacin puede tender puentes para romper el aislamiento entre plataformas y formar equipos que estn a cargo de funcionalidades completas de extremo a extremo.

Construye para plataformas nativas

Actualiza cuando el futuro est listo

React atiende los cambios con cuidado. Cada commit de React se prueba en escenarios crticos para el negocio con ms de mil millones de usuarios. Ms de 100000 componentes de React en Meta ayudan a validar cada estrategia de migracin.

El equipo de React siempre est investigando como mejorar React. Algunas investigaciones toman aos en arrojar resultados. React tiene el listn alto para llevar una idea de investigacin a produccin. Solo enfoques probados se vuelven parte de React.

Lee ms noticias de React

ltimas noticias de React

View Transitions and Activity

April 23, 2025

React Compiler RC

April 21, 2025

Sunsetting Create React App

February 14, 2025

React 19

December 05, 2024

Lee ms noticias de React

nete a una comunidad
de millones

No ests solo. Dos millones de desarrolladores de todo el mundo visitan la documentacin 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 conversacin en el pasillo entre dos personas en React Conf]

[Una conversacin en el pasillo en React India]

[Elizabet Oliveira hablando en React Conf]

[Personas tomndose 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 ms que una biblioteca, una arquitectura, o incluso un ecosistema. React es una comunidad. Es un lugar dnde puedes pedir ayuda, encontrar oportunidades y conocer nuevos amigos. Conocers tanto desarrolladores como diseadores, 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.