Componentes en React Native
¿Qué son los componentes en React Native?
Los componentes en React Native hacen referencia a elementos que podemos crear dentro de esta librería, los cuales nos brindan la posibilidad de separar la interfaz en diferentes partes para poder hacerlas reutilizables.
Estos se representan con la palabra clave Component, que es la clase de la que van a extender todas nuestras clases.
Algo que siempre debemos tener en cuenta es que, como React Native usa React, nuestro Component se importa desde la librería de React. De modo que, para importarlo, debemos añadir lo siguiente:
import React, { Component } from ‘react’
Componentes básicos en React Native
En esta librería podemos encontrar diversos componentes, los cuales cuentan con una función específica. Los componentes más usados son los siguientes:
- StyleSheet: este es el componente en el que añadiremos los estilos del componente.
- View: este es el componente sobre el que heredan la mayoría de los demás componentes. Lo podríamos equiparar a un <div> de HTML.
- Text: este componente es en el que mostraremos textos.
- Image: este componente sirve para mostrar imágenes
- TextInput: la función de este componente es proporcionarle un espacio al usuario para que pueda ingresar texto por medio del teclado de su dispositivo.
- ScrollView: este componente permite establecer un contenedor en el que se podrán almacenar varios componentes que se pueden ir desplazando en la pantalla.
¿Cómo podemos instalar los componentes?
Otro aspecto importante en React Native es cómo se importan estos componentes. En general, para importar los componentes de esta librería lo podemos hacer de la siguiente forma:
import { StyleSheet, Text, View } from ‘react-native’
De hecho, en la siguiente imagen puedes ver una representación de cómo se importarían los componentes en React Native:
Hay que tener en cuenta que React Native está muy enfocado en reutilizar componentes, ya sea hechos por nosotros o por un tercero. Este es un aspecto que permite agilizar mucho el desarrollo de nuestro proyecto. Para instalar componentes con el propósito de integrarlos en nuestra interfaz de usuario, debemos realizar los siguientes pasos:
Para instalar componentes React de terceros usamos npm, el gestor de paquetes de node.
Para instalar un componente basta con poner
npm install –save {nombre del componente}
Por otro lado, en caso de que creemos un componente propio que pueda serle de utilidad a más programadores, podemos publicarlo en npm para que cualquiera pueda utilizarlo.
Tipos de componentes en React Native
Existen dos tipos de componentes en React Native, los cuales son:
- Componentes de clase.
- Componentes de función.
Componentes de clase
Los componentes de clase son componentes que se definen como clases de JavaScript que extienden de la clase Component de React. Estos componentes tienen un estado interno y pueden acceder a las props mediante this.props. Aquí hay un ejemplo de cómo se ve un componente de clase en React Native:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class MyComponent extends Component {
render() {
return (
<View>
<Text>{this.props.text}</Text>
</View>
);
}
}
En este ejemplo, se define un componente de clase llamado MyComponent. Este componente acepta un prop llamado text, que se utiliza para renderizar un componente Text en la pantalla. El método render devuelve un objeto que describe cómo se debe mostrar el componente en la pantalla.
Componentes de función
Por otro lado, los componentes de función son componentes que se definen como funciones de JavaScript. Estos componentes no tienen un estado interno y reciben las props como argumentos de la función. Aquí hay un ejemplo de cómo se ve un componente de función en React Native:
import React from 'react';
import { Text, View } from 'react-native';
export default function MyComponent(props) {
return (
<View>
<Text>{props.text}</Text>
</View>
);
}
En este ejemplo, se define un componente de función llamado MyComponent. Este componente acepta un prop llamado text, que se utiliza para renderizar un componente Text en la pantalla. La función MyComponent devuelve un objeto que describe cómo se debe mostrar el componente en la pantalla.
Diferencias entre componentes de clase y componentes de función
La principal diferencia entre ellos es la forma en que se definen y cómo manejan los props y el estado.
Los componentes de clase se definen como clases de JavaScript que extienden la clase Component de React. Estos componentes tienen un estado interno y pueden acceder a las props mediante this.props. Por otro lado, los componentes de función son componentes que se definen como funciones de JavaScript. Estos componentes no tienen un estado interno y reciben las props como argumentos de la función.
Otra diferencia importante es cómo se maneja el estado en cada tipo de componente. En un componente de clase, el estado se maneja a través del método setState(), mientras que en un componente de función, el estado se maneja a través de los Hooks de React.
En cuanto a los props, los componentes de clase tienen acceso a ellos a través de this.props, mientras que los componentes de función reciben los props como argumentos de la función.
