API de Alto Nivel de React

React es el punto de entrada a la biblioteca de React. Si se carga React desde una etiqueta <script>, estas API de alto nivel estarán disponibles en el React global. Si se usa ES6 con npm se puede escribir import React from 'react'. Si se usa ES5 con npm, se puede escribir var React = require('react').

Resumen

Componentes

Los componentes de React permiten dividir la UI en piezas independientes, reusables y pensar acerca de cada pieza aisladamente. Los componentes de React pueden ser definidos creando subclases React.Component o React.PureComponent.

• React.Component
• React.PureComponent

Si no se usan las clases ES6, se puede usar el módulo create-react-class. Para más información, ver Usar React sin ES6.

Los componentes de React también pueden ser definidos como funciones que se pueden envolver:

• React.memo

Crear elementos de React

Se recomienda usar JSX para describir cómo debe verse la UI. Cada elemento de JSX es solo un azúcar sintáctico para llamar React.createElement(). Normalmente no se recurrirá a los siguientes métodos directamente si se está usando JSX.

• createElement()
• createFactory()

Para más información, ver Usar React sin JSX.

Transformar elementos

React proporciona varias API para manipular elementos:

• cloneElement()
• isValidElement()
• React.Children

Fragmentos

React también proporciona un componente para renderizar múltiples elementos sin un contenedor.

• React.Fragment

Refs

• React.createRef
• React.forwardRef

Suspense

Suspense permite que los componentes “esperen” algo antes de renderizar. Hoy Suspense solo mantiene un caso de uso: cargar componentes activamente con React.lazy. En el futuro mantendrá otros casos de uso como captura de datos.

• React.lazy
• React.Suspense

Transitions

Transitions are a new concurrent feature introduced in React 18. They allow you to mark updates as transitions, which tells React that they can be interrupted and avoid going back to Suspense fallbacks for already visible content.

• React.startTransition
• React.useTransition

Hooks

Los Hooks son una nueva adición en React 16.8. Permiten usar el estado y otras características de React sin escribir una clase. Los Hooks tienen una sección de documentos dedicados y una referencia API separada:

• Hooks Básicos

  • useState
  • useEffect
  • useContext

• Hooks Adicionales

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue
  • useDeferredValue
  • useTransition
  • useId

• Library Hooks

  • useSyncExternalStore
  • useInsertionEffect

Referencia

React.Component

React.Component es la clase base para los componentes de React cuando estos son definidos usando clases ES6:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this