Qué es React Native y sus componentes básicos

Clase 6 de 36Curso de React Native 2016

Resumen

React Native es un framework desarrollado originalmente por Facebook y actualmente impulsado por una amplia comunidad, que permite crear aplicaciones nativas utilizando React. Con lanzamientos constantes cada dos semanas y contribuciones diarias en forma de librerías y componentes, React Native destaca por su dinamismo y actualizaciones frecuentes.

¿Qué es React Native y cómo funciona?

React Native se basa en React, una librería de JavaScript orientada a la creación de interfaces de usuario. Su modelo de desarrollo gira alrededor del empleo de componentes reutilizables, lo que permite formar la interfaz de una aplicación uniendo diferentes componentes entre sí. Estos componentes poseen propiedades y un estado interno los cuales determinan su representación visual a través de la función obligatoria de renderizado.

¿Cuáles son los beneficios del enfoque basado en componentes?

  • Simplificar la implementación mediante la reutilización de componentes.
  • Facilitar la comprensión del código gracias a una estructura modular.
  • Acelerar el desarrollo al permitir ajustes puntuales sin alterar toda la interfaz.

¿Qué diferencias observarás al usar React Native respecto a React para la web?

Aunque React Native también se basa en React, notarás cambios significativos en la sintaxis y componentes utilizados, adaptados para aplicaciones móviles:

  • En lugar de utilizar div, usarás view.
  • En vez de los elementos span o img, usarás text e image, respectivamente.

La adaptación es simple y sigue la filosofía de React Native: "learn once, write anywhere" (aprende una vez y escribe en cualquier parte). Esto significa que al aprender React una vez, podrás crear aplicaciones web un día y aplicaciones móviles otro día, utilizando las mismas habilidades adquiridas.

¿Qué ejemplo sencillo ilustra la forma de trabajar con React Native?

Aquí tienes un breve fragmento de ejemplo que muestra un componente básico llamado "Saludo":

class Saludo extends Component {
  render() {
    return <Text>Hola {this.props.name}</Text>
  }
}

Este componente extiende la clase "Component" de React e implementa el método "render", mostrando un texto sencillo y dinámico. Aunque quizás al principio la sintaxis pueda parecer extraña, la práctica rápidamente simplifica su uso y utilidad.

¿Tienes alguna experiencia previa con React? ¡Comparte tus impresiones en los comentarios!