Saltar al contenido principal
Versión: 0.81

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;
consejo

Esta es una de varias formas de exportar componentes. Este tipo de exportación funciona bien con Snack Player. Sin embargo, según la estructura de archivos de tu app, podrías necesitar otra convención. Esta práctica guía de importación/exportación 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!

consejo

¡Como JSX viene incluido en la biblioteca de React, no funcionará sin 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​

información

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.

nota

Observa las llaves dobles {{ }} alrededor del ancho y alto de style. En JSX, los valores JavaScript se referencian con {}. Esto es útil cuando pasas algo distinto a un string como props, como un array o número: <Cat food={["fish", "kibble"]} age={2} />. Sin embargo, los objetos JS también usan llaves: {width: 200, height: 200}. Por lo tanto, 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!

información

Como regla general: usa props para configurar componentes al renderizar. Usa estado para rastrear datos que esperas 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);
  // ...
};
consejo

Puedes usar useState para rastrear cualquier dato: strings, números, booleanos, arrays, objetos. ¡Por ejemplo, puedes contar cuántas veces se acarició 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!'}
/>
información

Es posible que hayas notado que aunque isHungry es una const, ¡parece que se puede reasignar! Lo que sucede es que cuando se llama a una función de establecimiento de estado como setIsHungry, su componente se volverá a renderizar. En este caso, la función Cat se ejecutará nuevamente y esta vez useState nos dará el siguiente valor de isHungry.

Finalmente, coloca tus gatos dentro de un componente Cafe:

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

¿Ves los <> y </> de arriba? Estos fragmentos de JSX son fragmentos. Los elementos JSX adyacentes deben estar envueltos en una etiqueta contenedora. Los fragmentos te permiten hacer esto sin anidar un elemento de envoltura adicional 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>.