Saltar al contenido principal
Versión: 0.80

Conceptos básicos

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 es como React, pero usa componentes nativos en lugar de componentes web como bloques fundamentales. Para comprender la estructura básica de una aplicación React Native, necesitas entender algunos conceptos básicos de React como JSX, componentes, state y props. Si ya conoces React, aún debes aprender aspectos específicos de React Native, como los componentes nativos. Este tutorial está dirigido a todo tipo de público, tengas o no experiencia con React.

Manos a la obra.

Hello World​

Siguiendo las antiguas tradiciones de nuestra comunidad, primero debemos construir una aplicación que no haga nada excepto mostrar "¡Hola mundo!". Aquí está:

Si sientes curiosidad, puedes experimentar con el código de ejemplo directamente en los simuladores web. También puedes pegarlo en tu archivo App.js para crear una aplicación real en tu máquina local.

¿Qué está pasando aquí?​

  1. Primero, necesitamos importar React para poder usar JSX, que luego se transformará en los componentes nativos de cada plataforma.

  2. En la línea 2, importamos los componentes Text y View desde react-native

Luego definimos la función HelloWorldApp, que es un componente funcional y se comporta igual que en React para web. Esta función retorna un componente View con algunos estilos y un Text como elemento hijo.

El componente Text nos permite renderizar texto, mientras que View renderiza un contenedor. Este contenedor tiene varios estilos aplicados, analicemos qué hace cada uno.

El primer estilo que encontramos es flex: 1. La propiedad flex define cómo tus elementos "llenarán" el espacio disponible a lo largo del eje principal. Como solo tenemos un contenedor, ocupará todo el espacio disponible del componente padre. En este caso, al ser el único componente, ocupará todo el espacio disponible en pantalla.

El siguiente estilo es justifyContent: "center". Esto alinea los elementos hijos de un contenedor en el centro de su eje principal. Finalmente, tenemos alignItems: "center", que alinea los elementos hijos en el centro del eje transversal del contenedor.

Algunas cosas aquí pueden no parecerte JavaScript. No entres en pánico. Este es el futuro.

Primero, ES2015 (también conocido como ES6) es un conjunto de mejoras para JavaScript que ahora es parte del estándar oficial, pero aún no es compatible con todos los navegadores, por lo que a menudo no se usa en desarrollo web. React Native incluye soporte para ES2015, así que puedes usar estas características sin preocuparte por compatibilidad. import, export, const y from en el ejemplo anterior son todas características de ES2015. Si no estás familiarizado con ES2015, probablemente puedas aprenderlo leyendo código de ejemplo como este tutorial. Si lo deseas, esta página ofrece un buen resumen de las características de ES2015.

Lo otro inusual en este ejemplo de código es <View><Text>Hello world!</Text></View>. Esto es JSX: una sintaxis para incrustar XML dentro de JavaScript. Muchos frameworks usan lenguajes de plantillas especializados que permiten incrustar código dentro del lenguaje de marcado. En React, esto se invierte. JSX te permite escribir tu lenguaje de marcado dentro del código. Se parece a HTML en la web, excepto que en lugar de elementos web como <div> o <span>, usas componentes de React. En este caso, <Text> es un Componente Básico que muestra texto y View es como un <div> o <span>.

Componentes​

Este código define HelloWorldApp, un nuevo Component. Al crear aplicaciones en React Native, crearás nuevos componentes constantemente. Todo lo que ves en pantalla es algún tipo de componente.

Props​

La mayoría de componentes pueden personalizarse al crearse mediante distintos parámetros. Estos parámetros de creación se llaman props.

Tus propios componentes también pueden usar props. Esto te permite crear un único componente que se utilice en múltiples partes de tu app, con propiedades ligeramente diferentes en cada lugar. Accede a ellas mediante props.YOUR_PROP_NAME en componentes funcionales o this.props.YOUR_PROP_NAME en componentes de clase. Aquí tienes un ejemplo:

Usar name como prop nos permite personalizar el componente Greeting, permitiéndonos reutilizarlo para diferentes saludos. Este ejemplo también utiliza Greeting en JSX. Esta capacidad es lo que hace a React tan potente.

El otro elemento nuevo aquí es el componente View. Un View resulta útil como contenedor para otros componentes, ayudando a controlar el estilo y el diseño.

Con props y los componentes básicos Text, Image y View, puedes crear gran variedad de pantallas estáticas. Para que tu app cambie dinámicamente, necesitas aprender sobre el Estado.

Estado​

A diferencia de las props que son de solo lectura y no deben modificarse, el state permite que los componentes de React cambien su renderizado en respuesta a acciones del usuario, respuestas de red u otros eventos.

¿Qué diferencia hay entre estado y props en React?​

En un componente de React, las props son variables que pasamos de un componente padre a un hijo. El estado también son variables, pero con la diferencia de que el componente mismo las inicializa y gestiona internamente.

¿Hay diferencias entre React y React Native para manejar el estado?​

tsx
// ReactJS Counter Example using Hooks!

import React, {useState} from 'react';



const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <p>You clicked {count} times</p>
      <button
        onClick={() => setCount(count + 1)}>
        Click me!
      </button>
    </div>
  );
};


// CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

tsx
// React Native Counter Example using Hooks!

import React, {useState} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Click me!"
      />
    </View>
  );
};

// React Native Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Como se mostró anteriormente, ¡no hay diferencia en el manejo del state entre React y React Native! Puedes usar el estado de tus componentes tanto en clases como en componentes funcionales mediante hooks.

En el siguiente ejemplo mostraremos el mismo contador anterior usando clases.