Guía nativa de React para desarrolladores principiantes de Android (con aplicación de muestra)

Le presentamos una traducción del artículo de Nikhil Sachdeva publicado en hackernoon.com. La autora comparte su experiencia en el desarrollo de aplicaciones móviles usando React Native y sugiere crear su aplicación usando este marco.



Fui desarrollador de Android y usé Java durante bastante tiempo. Hace poco intenté crear aplicaciones móviles con React Native. Me hizo echar un nuevo vistazo al proceso de desarrollo, por decir lo menos. El propósito de mi artículo es mostrar las diferencias que noté al usar estos dos marcos en el desarrollo de aplicaciones.

¿Qué es React Native?

Información del sitio web oficial:

“React Native te permite crear aplicaciones móviles usando solo JavaScript con la misma estructura que React. Esto hace posible crear una interfaz de usuario móvil multifuncional utilizando componentes declarativos ".

Estas son las mismas aplicaciones que las aplicaciones nativas de iOS o Android escritas en Swift o Java / Kotlin.

“Las aplicaciones que creas con React Native no son aplicaciones web móviles porque React Native usa los mismos componentes que las aplicaciones normales de iOS y Android. En lugar de usar Swift, Kotlin o Java, construye estos componentes usando JavaScript y React ".

Entonces, resulta que React Native es un marco basado en React.js , que le permite desarrollar aplicaciones multiplataforma para Android e iOS.

Usted puede preguntar, ¿por qué alejarse de Java y aprender JavaScript y React.js? Aquí hay algunas ventajas de usar estos idiomas.

Pros: lo que ganarás

1. Desarrollo multiplataforma

El objetivo principal de los desarrolladores es proporcionar servicios a los clientes. A nadie le gustaría que sus usuarios se limitaran a una sola plataforma solo porque el desarrollador no puede crear aplicaciones para otras plataformas. Por lo tanto, el desarrollador mismo no debe limitar sus habilidades solo porque se sienta cómodo trabajando con una herramienta de desarrollo específica.

El marco React Native es portátil, es decir, su base de código único, escrita en JavaScript, creará módulos tanto para Android como para iOS.

2. Mastering React

Habiendo dominado React Native y JavaScript, descubrirá un nuevo mundo de desarrollo front-end en relación con, por ejemplo, sitios web. El marco React Native se basa en los mismos componentes que React, por lo que las habilidades adquiridas aquí no se limitan al desarrollo de aplicaciones móviles.

3. El tiempo de compilación es más rápido que en Android Studio

¿Alguna vez ha gastado más de 2-3 minutos para compilar para probar / corregir la función básica, y al mismo tiempo la corrección de errores se extendió durante muchas horas? La solución será React Native. Con él, el montaje lleva mucho menos tiempo. Con una característica como Hot Reloading, diseñar y probar la interfaz de usuario es fácil. Gracias a esta función, la aplicación se reinicia cada vez que se guarda el archivo JS.

4. JavaScript es conveniente para transmitir datos a través de una red.

En React Native, las API de llamadas, la representación de imágenes por URL y otros procesos son muy simples. Ya no necesita usar Retrofit, OkHttp, Picasso , etc. Se dedica mucho menos tiempo a la configuración. Cuando los datos provienen de una API en la plataforma Android, primero se convierten a un modelo POJO y solo luego se usan en elementos de la interfaz de usuario. Pero los datos JSON obtenidos en React Native son convenientes para JavaScript y se pueden usar directamente para obtener una vista previa de la interfaz de usuario. Esto facilita la obtención de la interfaz web para las solicitudes GET o POST de la API REST.

5. Desarrollo de UI

En React Native, el módulo flexbox , un serio competidor para el marcado XML de Android, actúa como el marcado UI. Flexbox es muy popular en la comunidad de desarrolladores web. En React Native, los elementos de la interfaz de usuario deben desarrollarse principalmente desde cero, mientras que en el desarrollo nativo de Android, la Biblioteca de soporte de diseño de Google ya está conectada. Esto le da al desarrollador libertad en términos de diseño interactivo y receptivo.

Contras: ¿qué es probable que pierdas?

1. Quizás odies JavaScript

A muchas personas no les gusta JavaScript simplemente porque este lenguaje no se parece a los lenguajes tradicionales como Java, C ++ y otros. Puede encontrar comentarios negativos detallados aquí y aquí .

2. No hay muchas bibliotecas de terceros.

La comunidad React Native todavía está en pañales y admite bibliotecas de terceros, no tan populares como la biblioteca nativa de Android (por cierto, califica la presentación de diapositivas de mi biblioteca de Android).

Ejemplo de aplicación

Para comenzar, intentemos desarrollar una aplicación para extraer datos de la API para comprender cómo funciona React Native. Obviamente, el primer paso es instalar React Native. Para hacer esto, vaya al sitio web oficial . También encontrará excelentes instrucciones para principiantes: léalo. Utilizaremos la API ficticia https://jsonplaceholder.typicode.com/photos , que contiene los siguientes datos:



Tenga en cuenta que para Android, trabajar con API que usan bibliotecas como Retrofit / OkHttp es una tarea difícil. Sin embargo, vemos que el lenguaje JavaScript dinámico e iterativo simplifica este trabajo.

Pasemos a crear el proyecto MockApp:

mockapp init nativo nativo
cd mockapp

Luego, ejecútelo en su dispositivo virtual / local usando:

reaccionar nativo run-android

La siguiente imagen aparecerá en la pantalla:


Pantalla de inicio de la aplicación

La aplicación API que crearemos se verá así:


Entonces el resultado parece una aplicación

Ahora abra el proyecto en un editor de texto y ajuste App.js, como se muestra a continuación:

export default class App extends Component<Props> { constructor(props){ super(props); this.state ={ isLoading: true} } componentDidMount(){ return fetch('https://jsonplaceholder.typicode.com/photos') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson, }, function(){ }); }) .catch((error) =>{ console.error(error); }); } render() { if(this.state.isLoading){ return( <View style={{flex: 1, padding: 20}}> <ActivityIndicator/> </View> )} return( <View style={{flex: 1, paddingTop:20}}> <Text style={styles.header}>Mock App</Text> <FlatList data={this.state.dataSource} renderItem={({item}) => <View style={styles.card}><Text style={styles.id}> {item.id}</Text><Text style={styles.title}>{item.title}</Text><Image source ={{uri : item.url }} style={styles.image}/></View>} keyExtractor={({id}, index) => id} /> </View> ); } 

Hay mucha información en este código. Proporcionaré una breve descripción general de todas las palabras clave principales en el código, pero continuaré buscando cada palabra clave que no comprenda. Tomará un tiempo

1. componentDidMount. Esto es parte de React Native en el ciclo de vida de la aplicación. componentDidMount () se inicia inmediatamente después de que el componente se haya agregado al árbol de componentes.

2. buscar. Para manejar las solicitudes de red, React Native tiene una API Fetch .

3. Variables de estado (isLoading, dataSource). isLoading es una variable bool que muestra si los datos de la API están cargados o no. dataSource es una variable que almacena la respuesta JSON del comando fetch.

4. FlatList. Este es el equivalente de RecyclerView en React Native, solo que mucho más simple. El componente FlatList muestra una hoja de datos desplazable que puede cambiar, aunque tiene una estructura común. FlatList es ideal para trabajar con listas largas en las que la cantidad de elementos puede cambiar con el tiempo.

Como podemos ver, en la lista de datos no necesitamos separar las variables para cada elemento. Esta es la belleza de un lenguaje dinámico, es decir, el lenguaje JavaScript. El tipo de variable se determina en tiempo real, por lo que trabajar incluso con grandes cantidades de datos sigue siendo una tarea simple.

Como podemos ver, los estilos de cada componente ya están definidos. Necesitamos establecer los valores de las variables. Esto se puede hacer de la siguiente manera:

 const styles = StyleSheet.create({ card: { padding: 20, margin: 10, borderColor: '#ff7a00', borderWidth: 2, borderRadius: 10, backgroundColor: '#f3ea68', flex: 1, }, header: { fontSize: 40, padding: 10, }, image: { height: 60, width: 60, }, title: { fontSize: 20, color: '#000', }, id: { fontSize: 30, } }); 

Aquí es donde termina nuestro trabajo. Pudimos crear una aplicación cuyos componentes se pueden previsualizar mediante el uso de la API.

Y finalmente, aquí está el resultado: