Advertisement
  1. Code
  2. Mobile Development

Herramientas Para el Desarrollo React Native

by
Length:LongLanguages:

Spanish (Español) translation by Jean Perez (you can also view the original English article)

Herramientas, las bibliotecas y los servicios son una parte importante de la vida de cada desarrollador, no importa de que medio ambiente está desarrollando para. Y React Native no es la excepción. En este artículo, te guiará a través de algunos de los mejores frameworks de interfaz de usuario, bibliotecas, componentes, herramientas de desarrollo y servicios web que hará que un desarrollador React Native más felices y más productivo.

 Editores de Texto Y IDEs

Código Visual Studio es un editor de texto que tiene incorporado IntelliSense, depuración, y capacidades de integración de Git. Lo que la hace realmente buena para el desarrollo nativo de reaccionar es la extensión de herramientas Native tools. Esto le permite ejecutar comandos nativos reaccionar desde la paleta de comandos, agregue IntelliSense para API React Native y depurar código en el editor de sí mismo.

Para obtener más información acerca de cómo configurar Visual Studio código para reaccionar nativo, pásate por este post del blog: VSCode para React Native.

Si estás usando Atom, puede instalar el plugin del Nuclide. Este plugin fue creado específicamente para trabajar con proyectos de React Native, Flow y Hack. Tiene un inspector depurador y elemento incorporado con todas las características que usted está acostumbrado a en herramientas para desarrolladores de Chrome. Flujo de apoyo significa que obtiene Autocompletar sugerencias tipo y diagnostico código de la caja.

Si desea explorar más opciones IDE y el editor, pásate por este post de blog de los Top 10 Editores para React Native.

Herramientas de Desarrollo

Herramientas de desarrollo tienen un alcance amplio, por lo que voy agrupando cada herramienta basada en su enfoque:

  • SDK
  • calidad del código
  • prueba
  • depuración

SDK

Cuando se trata de SDKs para reaccionar nativa, nada mejor que Expo. Expo le permite fácilmente prototipo una aplicación sin necesidad de estudio Android o Xcode. Incluye un conjunto de componentes y bibliotecas para ayudar a acelerar su desarrollo.

El Expo workflow consiste en lo siguiente:

  1. Cree un nuevo proyecto utilizando create-react-native-app.
  2. Escriba el código en su editor de texto favorito.
  3. Ejecutar la aplicación usando la aplicación de cliente de la Expo.

No hay necesidad de conectar el teléfono al ordenador. Simplemente escanear el código QR en su terminal con la aplicación de cliente de la Expo, y automáticamente se ejecutará la aplicación. Si usas Genymotion, Expo tiene soporte.

La única desventaja al usar Expo es que se puede incluir cualquier paquete personalizado que utiliza la funcionalidad nativa del dispositivo. Expo ya incluye una serie de paquetes nativos utilizados como cámara, Facebook y mapa. Pero si usted necesita utilizar un paquete que ya no soportan, luego vas a tener que "expulsar" de su aplicación. En ese momento, su aplicación será como si fue creado con react-native init, y también pierdes la capacidad para ejecutar con la aplicación de cliente de la Expo.

Calidad del Código

Comprobar la calidad de tu código es importante, y es por eso que existen herramientas como ESLint. En Resumen, una herramienta de pelusa le permite ser más coherente con el código de verificación contra una guía de estilo. Un ejemplo de una guía de estilos es Guía de Estilo es JavaScript de Airbnb que especifica las reglas de cómo se debe escribir código JavaScript. La herramienta de pelusa entonces comprueba su código contra esas reglas para asegurar que haya sido seguidos. También hay una guía de estilo para proyectos React.

Si está utilizando texto Sublime, aquí es un buen tutorial sobre cómo usted puede configurarlo para que puedan tener información en tiempo real en la calidad de tu código mientras estás codificación: Sublime Linting para React y ES6. Si usas otro editor o IDE, asegúrese de buscar un plugin correspondiente que utiliza ESLint.

Si desea agregar el mecanografiar estático a su proyecto, puede utilizar Flow. Flujo agrega estática-escribir en JavaScript sin tener que realizar cambios en su base de código existente. Esto es porque el flujo intenta deducir el tipo siempre que sea posible. Para nuevos proyectos, sin embargo, se recomienda especificar explícitamente el tipo para cosechar los beneficios de la utilización de flujo.

Para empezar a usar flujo, aquí un tutorial sobre cómo puede configurar flujo para sus proyectos de React Native.

Prueba

Enzyme es una utilidad de prueba para reaccionar que le permite afirmar, manipular y atravesar que la salida de su componente. Proporciona métodos como shallow() para representar "superficialmente" sus componentes, find() para atravesar el componente representado y expect() para afirmar los pilares o el contenido en el componente.

Puede seguir a esta guía de Uso Enzyme a Prueba Componentes en React Native para hacer su aplicación reaccionar nativa comprobable con la enzima. Si eres nuevo en la enzima, puede leer este tutorial sobre Pruebas los Componentes Reaccionan con Enzyme y Mocha.

Depuración

Reactotron es una aplicación de escritorio que permite depurar aplicaciones nativas reaccionan y reaccionan. Algunas de sus características claves incluyen inspeccionar, modificar y suscribirse al estado de la aplicación, seguimiento de las solicitudes HTTP a través de la aplicación, benchmarking el funcionamiento de la aplicación y seguimiento de errores. Si usas Redux, puede incluso envío acciones y pista sagas de dentro de Reactotron.

Boilerplates y UI Frameworks

Snowflake es un modelo para el desarrollo nativo reaccionar full-stack. Incluye todo, desde el front-end para el back-end de la aplicación. Así que si desea una herramienta que puede ayudarle rápidamente empezar entonces usted podría encontrar útil Snowflake. Usted puede leer las notas para más información sobre qué paquetes y herramientas se utilizan para poner para arriba.

Como alternativa, puede usar Ignite. Es una herramienta de línea de comandos que incluye también un repetitivo, generadores, guía de estilo para la interfaz de usuario componentes, herramienta para probar la API y mucho más.

React Native ya viene con componentes de interfaz de usuario que puede utilizar para la interacción con el usuario. El problema es que sólo tienen el estilo más básico en orden para cada componente debe distinguirse por lo que es (por ejemplo, botón, casilla de verificación). Si desea añadir los estilos personalizados, usted tiene que escribir su propio código CSS.

Esto es donde NativeBase. Permite su aplicación tener una apariencia realmente natural aplicando el mismo diseño utilizado en Android nativo (diseño de Material) y aplicaciones de iOS (guías de interfaz humana). Fuera de la caja, tienes componentes tales como Botones de Acción, Spinners y lo mejor de todo, componentes de la forma.

Bibliotecas y Componentes

React Native tiene una gran comunidad detrás de él, así que hay un montón de librerías y componentes que puede utilizar. Podríamos pasar todo el día hablando de ellos, por lo que para mantener las cosas breves, a centrarme en las siguientes áreas:

  • navegación
  • Administración del estado
  • animaciones
  • bibliotecas y componentes comúnmente usados

Navegación

React Navigation le permite implementar fácilmente la navegación en sus aplicaciones nativas reaccionan a través de sus navegadores incorporados como pila Navigator, Navigator ficha y cajón Navigator. Eso no es todo, sin embargo: además de la navegación en la aplicación, también incluye vinculación profunda, Redux integración e integración web. Esto es una biblioteca muy robusta para la aplicación de navegación.

Gestión Estatal

MobX proporciona la funcionalidad para actualizar y administrar el estado de la aplicación utilizado por reaccionar. Qué hace un buen candidato para la administración del estado en reaccionar es su simplicidad y posibilidad de prueba. También tiene una corta curva de aprendizaje, así como funciones de async y valores computados ya se manejan detrás de las escenas.

Para aplicaciones más grandes y más complejas, se recomienda todavía Redux. Esto es porque MobX es muy liberal, no desemejante de Redux, que proporciona directrices estrictas sobre cómo debe manejarse el estado. Así que es una opción más inteligente para proyectos más grandes con más gente trabajando en ellos.

Animaciones

Nativo de reaccionar ya tiene una animación API construido en él. De hecho, no hay sólo una, sino dos APIs para trabajar con la animación: API de animación y LayoutAnimation. Los dos son muy poderosos pero pueden ser engorrosos, especialmente si todo lo que quiere hacer es aplicar animaciones básicas como mover un objeto hacia arriba y hacia abajo o lo que es de rebote. En tales casos, componentes como Animatable vienen en prácticos.

Bibliotecas y Componentes Comúnmente Usados

Aquí está una lista de componentes y librerías que se utilizan en proyectos nativos reaccionar. Estos son compatibles con dispositivos iOS y Android:

  • styled-components: le permite escribir código CSS para el estilo de sus componentes reaccionan.
  • react-native-calendar: muestra un calendario que los usuarios pueden interactuar con.
  • react-native-datepicker: para escoger las fechas y horarios.
  • react-native-progress: para crear barras de progreso y spinners.
  • react-native-spinkit: una colección de indicadores de carga.
  • Iconos Vector: permite utilizar los iconos de tus fuentes de fuente icono favorito como fuente impresionante y los iconos de Material.
  • react-native-swiper: convierte una colección de imágenes o contenedores en pasar los componentes.
  • react-native-scrollable-tab-view: pestañas de navegación que puede deslizar entre.
  • react-native-lightbox: para ver imágenes en pantalla completa pop-overs.
  • react-native-maps: permite integrar Google Maps en sus aplicaciones. No todas las funciones disponibles en la API de Google Maps están disponibles, pero la funcionalidad que proporciona debe ser suficiente en la mayoría de los casos.
  • SGListView: una implementación de memoria respetuosa de componente incorporado de reaccionar nativo del ListView. Si usted necesita mostrar listas enormes en su aplicación, utilícelo en lugar de ListView.
  • Formik: hace tratar con formas nativas reaccionan menos dolorosa. Permite obtener valores dentro y fuera del estado de forma, validar sus formularios y controlar su presentación.
  • react-native-i18n: para implementar la internacionalización de sus aplicaciones.
  • react-native-push-notification: implementa notificaciones push locales y remotos.
  • InstantSearch: una colección de componentes para la aplicación de búsqueda.
  • react-native-fs: le permite acceder a sistema de archivos nativo del dispositivo.
  • react-native-camera: un componente de la cámara que le permite tomar fotos y vídeos de tu app.
  • react-native-video: para reproducción de vídeos desde su sistema de archivos o desde una URL.
  • react-native-sqlite-storage: para almacenar y manipular datos de una base de datos SQLite.
  • react-native-store: una tienda de clave y valor basado en AsyncStorage.
  • react-native-webrtc: para implementar WebRTC.

Servicios Web

Puede crear aplicaciones de servidor y facilitar el despliegue de sus aplicaciones nativas reaccionan mediante el uso de servicios web. Hay una plétora de servicios web por ahí, pero centraremos en las siguientes áreas:

  • base de datos
  • Analytics
  • notificaciones push
  • actualizaciones de códigos
  • integración continua

Base de datos

Realm es una base de datos en tiempo real con un enfoque en aplicaciones móviles. Incluye características como la sincronización bidireccional de datos, capacidades de primera línea y push de datos. La base de datos de móvil de Reino es código abierto y multiplataforma, que significa que puede alojar el Servidor de Objetos de Realm en su propio servidor y luego usar la Biblioteca JavaScript del Realm gratis.

No todas las funciones están disponibles en la edición para desarrolladores, pero en la mayoría de casos de uso debe bien con sólo la edición para desarrolladores ya que incluye las funciones de núcleo como el objeto de la base de datos, sincronización en tiempo real y la autenticación. Aquí está una comparación de lo que se obtiene para cada edición: Productos y Precios de Realm.

Si el Reino es demasiado para sus necesidades, siempre puede pegar con la API AsyncStorage que viene con reaccionar nativo.

Analytics

Fabric es un servicio de all-in-one que permite, entre otras cosas, añadir analítica en su aplicación. Hay Respuestas, que te ofrece estadísticas en tiempo real sobre cómo se utiliza su aplicación. Esto incluye el número de usuarios activos, la longitud del período de sesiones y tasa de retención. También esta Crashlytics, que te ofrece un potente crash capacidades de reporting. Todo sucede en tiempo real, y se puede ver en panel de control en tiempo real de la tela. Puede utilizar la biblioteca de Fabric para configurar fácilmente la tela de su aplicación nativa de reaccionar.

Si quedaría bien con una solución de probada eficacia como Google Analytics, también hay una biblioteca que te permite hacer eso.

Notificaciones Push

No hay ninguna competencia cuando se trata de la aplicación de notificaciones push en aplicaciones. Bases avanzadas Cloud Messaging (anteriormente conocido como Google Cloud Messaging) permite enviar notificaciones push para aplicaciones Android e iOS. Puede utilizar el paquete de react-native-fcm package para comunicarse con FCM desde su aplicación.

Actualizaciones de Códigos

CodePush le permite implementar las actualizaciones de código para aplicaciones móviles directamente a los dispositivos de los usuarios. CodePush actúa como un repositorio central donde puede implementar cambios en activos como imágenes, CSS, JavaScript y HTML. El código de CodePush correspondiente en la aplicación entonces tiraría estos cambios. Esto es grande para empujar la corrección de errores a la aplicación sin necesidad de cargar en la app store y a la espera de los usuarios actualizar la aplicación. Puede utilizar este paquete para sacar actualizaciones de CodePush en su aplicación nativa de reaccionar.

Integración Continua

Bitrise es un servicio de entrega continua para el desarrollo de aplicaciones móviles. Permite ejecutar las pruebas, crear la aplicación y automáticamente lo empuje a los dispositivos de los usuarios cada vez que se implementa el código.

Bitrise se integra con un montón de servicios en cada paso de su flujo de trabajo de desarrollo. Por ejemplo, cuando empujas a sus sucursales de liberación en GitHub, Bitrise recibe la notificación de ese empuje a través de webhooks. Entonces comenzará a ejecutar las pruebas. Una vez pasen las pruebas, comienza el proceso de construcción. Si es sólo un "lanzamiento suave" (por ejemplo, cambios al código JavaScript) a continuación, pueden implementar los cambios a los usuarios a través de CodePush. Pero si hay cambios en el código nativo (por ejemplo, agregó un plugin de cámara), entonces Bitrise puede también construir un archivo APK o IPA implementar en Google Play o iTunes Connect.

Fastlane es una colección de herramientas que automatizan el proceso de construcción y lanzamiento de aplicaciones Android e iOS. Para iOS, encarga de tareas como correr las pruebas, generar imágenes, código de firma y lanzar la aplicación a la app store. También incluye pruebas de beta herramientas como Pilot y embarque. Piloto te permite subir tu aplicación a iTunes Connect y gestionar sus TestFlight beta-testers desde la línea de comandos. Internos crea una página de registro para TestFlight beta-testers.

Las herramientas están orientadas más hacia la implementación de iOS, pero también se pueden beneficiar si estás desplegando aplicaciones Android. Actualmente, existen sólo dos herramientas para la implementación de Android: Supply y Screengrab.

Supply le permite automatizar la carga de activos como el icono de la aplicación, promo gráficos e imágenes de su aplicación. También le permite actualizar sus aplicaciones existentes en la Google Play Store.

Screengrab, por otro lado, automatiza la generación de imágenes para varios dispositivos. También puede localizar cada captura de pantalla si su aplicación admite varios idiomas.

Conclusión

¡Eso es todo! En este artículo, usted ha aprendido acerca de algunas de las herramientas, las bibliotecas y servicios que puede utilizar al desarrollar aplicaciones React Native. ¿Y tú? ¿Cuáles son sus herramientas ir a la hora de desarrollar aplicaciones React Native?

Y mientras estés aquí, algunos de nuestros otros posts sobre desarrollo de aplicaciones React Native!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.