Parte de la filosofía de Able nos dice que nunca debemos dejar de aprender, así que decidimos ahondar en el mundo de React Native y los resultados fueron muy prometedores. Aquí tienes la presentación, en donde encontrarás una guía de como inicializar todo esto.
Es un framework para construir aplicaciones nativas usando Javascript y React.
No somos iOS developers, pero con conocimientos básicos de Swift y Objective C (casi nulos) y sintiéndonos cómodos sobre tecnologías como Ruby y Javascript; decidímos aprovechar nuestra experiencia con Reactjs y notamos esto:
Si estás en una conversación civilizada con un Android o iOS Developer y de un momento a otro le hablas de phonegap o ionic, dejará de ser un conversación civilizada.
Con React Native escribes código para Android y iOS, pero no todo el código es compartido, lo cual significa que puedes crear bloques de código dedicados solo a una plataforma y usando los componentes nativos de esta, sí! Nativos!.
Sí! React Native implementó flexbox, para poder trabajar los layouts de un modo mucho más simple e intuitivo.
Aquí más detalles, y si no estás familiarizado con flexbox, dale click aquí
Y lo más hermoso de todo esto, es que puedes generar la lógica de tu aplicación usando Javascript. Y si eso no fuese suficiente, también puedes usar ES6.
En este repositorio encontraremos las siguientes ramas:
Nota: solo compilaremos para iOS en esta introducción.
- reactjs-lima-components
- reactjs-lima-components-list-view
- reactjs-lima-styles
- reactjs-lima-navigator
- reactjs-lima-detail
- reactjs-lima-loading
- reactjs-lima-packages
En cada commit podrás ver la evolución del código y su fácil implementación.
Esto es lo que necesitas para comenzar con un proyecto.
- Node >= v4
- npm >= v2.14
- react-native >= 0.18.1
- watchman 4.1.0
- Xcode >= 7.0
Usaremos brew para facilitarnos la vida
brew install node
brew install watchman
npm install -g react-native-cli
Y luego clonaremos nuestro proyecto
git clone [email protected]:paulrrdiaz/introduction-to-react-native.git
vamos al directorio creado y ejecutamos
npm install
Nota: si quieres comenzar un proyecto desde cero, te recomiendo la siguiente línea
react-native init mySweetProject --verbose
Deberías de obtener una pantalla de confirmación, luego vas al directorio y verás la siguiente estructura:
Nota: existen dos archivos index(index.android.js / index.ios.js), esto se debe a que cada plataforma utiliza el que le corresponde; por ejemplo, cierto componente funcionará de diferente forma para cada plataforma, solo debemos crear componente.android.js y componente.ios.js. Sweet, right?
ahora ejecuta:
open ios/mySweetProject.xcodeproj
corres el simulador y listo
también puedes ver la documentación oficial aquí
Para comenzar, veremos los componentes más básicos, en el camino iremos conociendo más y más componentes.
Una analogía simple podría ser la siguiente:
HTML | React Native
- | - div | View img | Image span, p | Text ul/ol, li | ListView, child items
Un componente para mostrar texto, entre sus propiedades más llamativas: anidamiento, estilos, limite de lineas y
Algo de código
<View style={styles.container}>
<Image style={styles.image}
source={{uri: 'http://frostney.github.io/talks/react-native/slides/images/react-logo.png'}}
/>
<Text style={styles.welcome}>
Welcome to ReactJS Lima
</Text>
<Text style={styles.yell}>
This is Able!!!
</Text>
<Image
source={require('./images/300.jpg')}
/>
</View>
Nota: Para poder usar los componentes de React Native debemos de importarlos
import React, { Image, Text, View, } from 'react-native';
Nota: El source de Image puede ser una imagen local o externa, como en el ejemplo de arriba. Más detalles, aquí
Nota: Podemos agregar estilos a partir de la propiedad style, declarando un constructor(create), en este caso, styles. Más detalles, aquí
Puedes ver el código aquí, moverte al branch reactjs-lima-components y actualizar tu simulador para verlo en vivo.
