Saltar al contenido principal
Versión: 0.77

Fundamentos de React

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

React Native funciona sobre React, una popular biblioteca de código abierto para construir interfaces de usuario con JavaScript. Para aprovechar al máximo React Native, es fundamental comprender React en sí mismo. Esta sección te servirá como punto de partida o como curso de actualización.

Cubriremos los conceptos fundamentales detrás de React:

  • components

  • JSX

  • props

  • state

Si deseas profundizar, te recomendamos consultar la documentación oficial de React.

Tu primer componente​

El resto de esta introducción a React utiliza gatos en sus ejemplos: criaturas amigables y accesibles que necesitan nombres y una cafetería para trabajar. Este es tu primer componente Cat:

Así se hace: Para definir tu componente Cat, primero usa import de JavaScript para importar React y el componente principal Text de React Native:

tsx
import React from 'react';
import {Text} from 'react-native';

Tu componente comienza como una función:

tsx
const Cat = () => {};

Puedes visualizar los componentes como planos. Lo que devuelve un componente funcional se renderiza como un elemento de React. Estos elementos te permiten describir lo que quieres ver en pantalla.

Aquí el componente Cat renderizará un elemento <Text>:

tsx
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

Puedes exportar tu componente funcional con export default de JavaScript para usarlo en toda tu aplicación:

tsx
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default Cat;

Esta es solo una de las formas de exportar tu componente. Este tipo de exportación funciona bien con Snack Player. Sin embargo, dependiendo de la estructura de archivos de tu aplicación, podrías necesitar una convención diferente. Esta práctica chuleta sobre importaciones y exportaciones en JavaScript puede ayudarte.

Ahora observa detenidamente la declaración return. <Text>Hello, I am your cat!</Text> utiliza una sintaxis de JavaScript que facilita escribir elementos: JSX.

JSX​

React y React Native usan JSX, una sintaxis que permite escribir elementos dentro de JavaScript como: <Text>Hello, I am your cat!</Text>. La documentación de React incluye una guía completa de JSX para profundizar. Como JSX es JavaScript, puedes usar variables dentro. Aquí declararías un nombre para el gato, name, e insertarlo con llaves dentro de <Text>.

Cualquier expresión JavaScript funciona entre llaves, incluyendo llamadas a funciones como {getFullName("Rum", "Tum", "Tugger")}:

¡Puedes imaginar las llaves como portales a funcionalidades JS dentro de tu JSX!

¡Recuerda que JSX viene incluido en la biblioteca de React, así que no funcionará si no tienes import React from 'react' al inicio de tu archivo!

Componentes personalizados​

Ya conoces los Componentes Principales de React Native. React permite anidar estos componentes para crear nuevos. Estos componentes reutilizables y anidables son el corazón del paradigma React.

Por ejemplo, puedes anidar Text y TextInput dentro de un View, y React Native los renderizará juntos:

Notas para desarrolladores​

If you’re familiar with web development, <View> and <Text> might remind you of HTML! You can think of them as the <div> and <p> tags of application development.

Puedes renderizar este componente múltiples veces en distintos lugares sin repetir código usando <Cat>:

Cualquier componente que renderice otros componentes es un componente padre. Aquí, Cafe es el componente padre y cada Cat es un componente hijo.

Puedes poner tantos gatos en tu cafetería como quieras. Cada <Cat> renderiza un elemento único que puedes personalizar con props.

Props​

Props (abreviatura de "properties") permiten personalizar componentes de React. Por ejemplo, aquí le pasas a cada <Cat> un name diferente para que Cat lo renderice:

La mayoría de los Core Components de React Native también se personalizan con props. Por ejemplo, al usar Image, le pasas una prop llamada source para definir qué imagen muestra:

Image tiene muchas props diferentes, incluyendo style, que acepta un objeto JS con pares propiedad-valor relacionados con diseño y maquetación.

Observa las llaves dobles {{ }} que rodean el ancho y alto en style. En JSX, los valores de JavaScript se referencian con {}. Esto es útil cuando pasas algo que no sea texto como props, como un arreglo o número: <Cat food={["fish", "kibble"]} age={2} />. Sin embargo, los objetos de JavaScript también usan llaves: {width: 200, height: 200}. Por eso, para pasar un objeto JS en JSX, debes envolverlo en otro par de llaves: {{width: 200, height: 200}}

¡Puedes construir muchas cosas con props y los Core Components Text, Image y View! Pero para crear interacciones necesitarás estado.

Estado​

Mientras las props son argumentos para configurar cómo se renderizan los componentes, el estado funciona como almacenamiento personal de datos. Es útil para manejar información que cambia con el tiempo o por interacción del usuario. ¡El estado da memoria a tus componentes!

Como regla general: usa props para configurar un componente al renderizarlo. Usa estado para manejar datos del componente que esperas que cambien con el tiempo.

Este ejemplo ocurre en una cafetería gatuna donde dos felinos hambrientos esperan comida. Su hambre (que esperamos cambie, a diferencia de sus nombres) se almacena como estado. Para alimentarlos, presiona sus botones, lo que actualizará su estado.

Agrega estado a un componente usando el Hook useState de React. Un Hook es una función que te permite "conectarte" a características de React. useState es un Hook que añade estado a componentes funcionales. Más información sobre otros Hooks en la documentación de React.

Primero importa useState desde React así:

tsx
import React, {useState} from 'react';

Luego declara el estado del componente llamando useState dentro de su función. En este ejemplo, useState crea una variable de estado isHungry:

tsx
const Cat = (props: CatProps) => {
  const [isHungry, setIsHungry] = useState(true);
  // ...
};

Puedes usar useState para rastrear cualquier tipo de dato: cadenas, números, booleanos, arreglos, objetos. Por ejemplo, ¡podrías contar cuántas veces se acarició a un gato con const [timesPetted, setTimesPetted] = useState(0)!

Llamar useState hace dos cosas:

  • Crea una "variable de estado" con valor inicial: aquí isHungry tiene valor inicial true

  • Crea una función para actualizar ese valor: setIsHungry

Los nombres pueden variar. Pero es útil recordar el patrón: [<getter>, <setter>] = useState(<initialValue>).

Luego agregas el Core Component Button y le das una prop onPress:

tsx
<Button
  onPress={() => {
    setIsHungry(false);
  }}
  //..
/>

Ahora, cuando alguien presiona el botón, onPress se activará llamando a setIsHungry(false). Esto establece la variable de estado isHungry en false. Cuando isHungry es falso, la prop disabled del Button se establece en true y su title también cambia:

tsx
<Button
  //..
  disabled={!isHungry}
  title={isHungry ? 'Give me some food, please!' : 'Thank you!'}
/>

Quizás notaste que aunque isHungry es una const, ¡parece reasignable! Lo que ocurre es que cuando se llama a una función de estado como setIsHungry, su componente se vuelve a renderizar. En este caso, la función Cat se ejecuta nuevamente, y useState nos dará el nuevo valor de isHungry.

Finalmente, coloca tus gatos dentro de un componente Cafe:

tsx
const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};

¿Ves los <> y </> arriba? Estos fragmentos de JSX son fragments. Los elementos JSX adyacentes deben envolverse en una etiqueta contenedora. Los fragments permiten hacer esto sin agregar un elemento de envoltura innecesario como View.

Ahora que has cubierto tanto React como los Componentes Principales de React Native, profundicemos en algunos de estos componentes principales explorando el manejo de <TextInput>.