Share
Las herramientas, las bibliotecas y los servicios son una parte importante de la vida de cada desarrollador, independientemente del entorno en el que se desarrolle. Y React Native no es una excepción. En este artículo, lo guiaré a través de algunos de los mejores marcos de UI, bibliotecas, componentes, herramientas de desarrollo y servicios web que lo harán un desarrollador React Native más feliz y productivo..
Visual Studio Code es un editor de texto que tiene capacidades integradas de integración IntelliSense, depuración y Git. Lo que lo hace realmente bueno para el desarrollo React Native es su extensión React Native tools. Esto le permite ejecutar los comandos React Native desde la paleta de comandos, agregar IntelliSense para React Native APIs y depurar el código dentro del propio editor.
Para obtener más información sobre cómo configurar Visual Studio Code para React Native, consulte esta publicación del blog: VSCode for React Native.
Si está utilizando Atom, puede instalar el complemento Nuclide. Este complemento fue creado específicamente para trabajar con proyectos React Native, Flow y Hack. Tiene un depurador incorporado y un inspector de elementos con todas las funciones a las que está acostumbrado en las Herramientas para desarrolladores de Chrome. El soporte de flujo significa que usted obtiene autocompletado, sugerencias de tipo y diagnósticos de código listos para usar.
Si desea explorar más opciones de editor e IDE, consulte esta publicación de blog sobre los 10 mejores editores para React Native.
Las herramientas de desarrollo tienen un amplio alcance, por lo que agruparé cada herramienta en función de su enfoque:
Cuando se trata de SDK para React Native, nada es mejor que Expo. Expo le permite crear prototipos de una aplicación fácilmente sin la necesidad de Android Studio o Xcode. Incluye un conjunto de componentes y bibliotecas para ayudarlo a acelerar su desarrollo.
El flujo de trabajo de la Expo consiste en lo siguiente:
No hay necesidad de conectar su teléfono a su computadora. Simplemente escanee el código QR en su terminal utilizando la aplicación cliente Expo y se ejecutará automáticamente su aplicación. Si estás usando Genymotion, Expo también lo admite.
La única desventaja al usar Expo es que no puede incluir ningún paquete personalizado que use la funcionalidad nativa del dispositivo. Expo ya incluye varios paquetes nativos de uso común, como la cámara, Facebook y el mapa. Pero si necesita usar un paquete que ya no son compatibles, entonces tendrá que "expulsar" su aplicación. En ese punto, su aplicación será como si fuera creada con react-init nativo, y también perderá la capacidad de ejecutarlo utilizando la aplicación cliente Expo..
Es importante verificar la calidad de su código, y es por eso que existen herramientas como ESLint. En pocas palabras, una herramienta de alineación le permite ser más consistente con su código al compararlo con una guía de estilo. Un ejemplo de esta guía de estilo es la Guía de estilo de JavaScript de Airbnb, que especifica las reglas sobre cómo se debe escribir el código JavaScript. La herramienta de alineación luego compara su código con esas reglas para asegurarse de que se hayan seguido. También hay una guía de estilo para proyectos React..
Si está utilizando Sublime Text, aquí hay un buen tutorial sobre cómo puede configurarlo para que pueda obtener comentarios en tiempo real sobre la calidad de su código mientras está codificando: Sublime Linting for React y ES6. Si está utilizando otro editor o IDE, asegúrese de buscar el complemento correspondiente que use ESLint.
Si desea agregar escritura estática a su proyecto, puede usar Flow. Flow agrega escritura estática sobre JavaScript sin que tenga que realizar ningún cambio en su base de código existente. Esto se debe a que Flow intenta inferir el tipo siempre que sea posible. Sin embargo, para proyectos nuevos, se recomienda que especifique explícitamente el tipo para obtener todos los beneficios del uso de Flow.
Para comenzar a utilizar Flow, aquí hay un tutorial sobre cómo configurar Flow para sus proyectos React Native..
Enzyme es una utilidad de prueba para React que le permite afirmar, manipular y atravesar la salida de su componente. Proporciona métodos tales como superficial() para "superficialmente" renderizar sus componentes, encontrar() atravesar el componente renderizado, y esperar() Afirmar los apoyos o el contenido representado dentro del componente..
Puede seguir esta guía sobre el uso de enzimas para probar componentes en React Native para hacer que su aplicación React Native pueda probarse con enzimas. Si eres nuevo en enzimas, puedes leer este tutorial sobre cómo probar los componentes React con enzimas y mocha..
Reactotron es una aplicación de escritorio que te permite depurar las aplicaciones React y React Native. Algunas de sus características clave incluyen la inspección, modificación y suscripción al estado de la aplicación, el seguimiento de las solicitudes HTTP realizadas a través de la aplicación, la evaluación comparativa del rendimiento de la aplicación y el seguimiento de los errores. Si estás usando Redux, incluso puedes enviar acciones y rastrear sagas desde Reactotron.
Snowflake es una plantilla para el desarrollo nativo React de pila completa. Incluye todo, desde el front-end hasta el back-end de la aplicación. Entonces, si solo quiere una herramienta que pueda ayudarlo a comenzar rápidamente, entonces puede encontrar que Snowflake es útil. Puede leer las notas para obtener más información sobre qué paquetes y herramientas se utilizan para ponerlo.
Alternativamente, puedes usar Ignite. Es una herramienta de línea de comandos que también incluye una placa de calderas, generadores, guía de estilo para componentes de UI, herramienta de prueba de API y más.
React Native ya viene con componentes de UI que puede usar para la interacción del usuario. El problema es que solo tienen el estilo más básico para que cada componente se distinga por lo que es (por ejemplo, botón, casilla de verificación). Si desea agregar estilos personalizados, tiene que escribir su propio código CSS.
Aquí es donde entra en juego NativeBase. Permite que su aplicación tenga una apariencia verdaderamente nativa al implementar el mismo diseño que se usa en las aplicaciones nativas de Android (Material Design) y iOS (Human Interface Guidelines). Fuera de la caja, obtiene componentes personalizados como botones de acción flotante, giradores y, lo mejor de todo, componentes de formulario.
React Native tiene una gran comunidad detrás, por lo que hay muchas bibliotecas y componentes que puedes usar. Podríamos pasar todo el día hablando sobre esto, así que, para ser breve, me centraré en las siguientes áreas:
React Navigation le permite implementar fácilmente la navegación en sus aplicaciones React Native mediante el uso de sus navegadores integrados, como el Navegador de pila, el Navegador de pestaña y el Navegador de cajón. Sin embargo, eso no es todo: además de la navegación dentro de la aplicación, también incluye vínculos profundos, integración de Redux e integración web. Esto lo convierte en una biblioteca realmente robusta para implementar la navegación..
MobX proporciona la funcionalidad para actualizar y administrar el estado de la aplicación utilizada por React. Lo que lo hace un buen candidato para la administración estatal en React es su simplicidad y capacidad de prueba. También tiene una curva de aprendizaje corta, por lo que cosas como funciones asíncronas y valores computados ya se manejan entre bastidores.
Para aplicaciones más grandes y complejas, se recomienda Redux. Esto se debe a que MobX es muy liberal, no a diferencia de Redux, que proporciona pautas estrictas sobre cómo debe administrarse el estado. Así que es una opción más inteligente para proyectos más grandes con más gente trabajando en ellos..
React Native ya tiene una API de animación incorporada. De hecho, no hay solo una, sino dos API para trabajar con animación: API animada y LayoutAnimation. Esos dos son muy poderosos pero pueden ser engorrosos, especialmente si todo lo que quieres hacer es aplicar animaciones básicas como mover un objeto hacia arriba o hacia abajo o hacer que rebote. En tales casos, componentes como Animatable son útiles.
Aquí hay una lista de componentes y bibliotecas que se usan comúnmente en los proyectos React Native. Estos son compatibles con dispositivos Android y iOS:
Puede crear aplicaciones sin servidor y facilitar la implementación de sus aplicaciones React Native mediante el uso de servicios web. Hay una gran cantidad de servicios web por ahí, pero me centraré en las siguientes áreas:
Realm es una base de datos en tiempo real con un enfoque en aplicaciones móviles. Incluye características como la sincronización de datos bidireccional, las capacidades sin conexión primero y la inserción de datos. La base de datos móvil de Realm es de código abierto y multiplataforma, lo que significa que puede alojar el servidor de objetos de Realm en su propio servidor y luego usar la biblioteca de JavaScript de Realm de forma gratuita..
No todas las funciones están disponibles en la edición para desarrolladores, pero en la mayoría de los casos de uso, debería estar bien solo con la edición para desarrolladores, ya que incluye funciones básicas como la Base de datos de objetos, la Sincronización en tiempo real y la Autenticación. A continuación, le ofrecemos una comparación de lo que obtiene por cada edición: Realm Products y Pricing..
Si Realm es demasiado para sus necesidades, siempre puede atenerse a la API AsyncStorage que viene con React Native.
Fabric es un servicio todo en uno que le permite, entre otras cosas, agregar análisis en su aplicación. Hay Respuestas, que le proporciona estadísticas en tiempo real sobre cómo se está utilizando su aplicación. Esto incluye el número de usuarios activos, la duración de la sesión y la tasa de retención. También hay Crashlytics, lo que le da potentes capacidades de reporte de fallas. Todo esto sucede en tiempo real, y puede verlo en el panel de control en tiempo real de Fabric. Puede usar la biblioteca de Fabric para configurar fácilmente Fabric para su aplicación React Native.
Si prefiere seguir con una solución probada como Google Analytics, también hay una biblioteca que le permite hacerlo..
Realmente no hay competencia cuando se trata de implementar notificaciones push en aplicaciones. Firebase Cloud Messaging (anteriormente conocido como Google Cloud Messaging) le permite enviar notificaciones push a aplicaciones tanto de Android como de iOS. Puede usar el paquete react-native-fcm para comunicarse con FCM desde su aplicación.
CodePush le permite implementar actualizaciones de código para aplicaciones móviles directamente en los dispositivos de los usuarios. CodePush actúa como un repositorio central donde puede implementar cambios en HTML, CSS, JavaScript y activos como imágenes. El código correspondiente de CodePush en la aplicación luego tirará de estos cambios. Esto es excelente para enviar correcciones de errores a la aplicación sin la necesidad de cargarla en la tienda de aplicaciones y esperar a que los usuarios actualicen la aplicación. Puede usar este paquete para obtener actualizaciones de CodePush dentro de su aplicación React Native.
Bitrise es un servicio de entrega continua para el desarrollo de aplicaciones móviles. Le permite ejecutar sus pruebas, crear la aplicación y enviarla automáticamente a los dispositivos de sus usuarios cada vez que implemente su código.
Bitrise se integra con una gran cantidad de servicios en cada paso de su flujo de trabajo de desarrollo. Por ejemplo, cuando usted empuja a sus sucursales de lanzamiento en GitHub, Bitrise recibe una notificación de ese impulso a través de los webhooks. Entonces comenzará a ejecutar las pruebas. Una vez que pasan las pruebas, comienza el proceso de construcción. Si es solo una "versión de software" (por ejemplo, cambios en el código de JavaScript), los cambios se pueden implementar en los usuarios a través de CodePush. Pero si hay cambios en el código nativo (por ejemplo, si agregaste un complemento de la cámara), Bitrise también puede crear un APK o IPA archivar e implementar en Google Play o iTunes Connect.
Fastlane es una colección de herramientas que automatiza el proceso de compilación y lanzamiento para aplicaciones de Android e iOS. Para iOS, maneja tareas como ejecutar sus pruebas, generar capturas de pantalla, firmar códigos y lanzar la aplicación a la tienda de aplicaciones. También incluye herramientas de prueba beta como Pilot y Boarding.. Piloto le permite cargar su aplicación a iTunes Connect y administrar sus probadores beta TestFlight directamente desde la línea de comandos. Boarding crea una página de registro para los probadores beta de TestFlight.
Las herramientas están más orientadas a la implementación de iOS, pero también puede beneficiarse si está implementando aplicaciones de Android. Actualmente, solo hay dos herramientas disponibles para la implementación de Android: Supply y Screengrab.
Suministro le permite automatizar la carga de activos como el ícono de la aplicación, los gráficos promocionales y las capturas de pantalla de su aplicación. También le permite actualizar sus aplicaciones existentes en Google Play Store.
Captura de pantalla, Por otro lado, automatiza la generación de capturas de pantalla para múltiples dispositivos. Cada captura de pantalla también se puede localizar si su aplicación admite varios idiomas..
¡Eso es! En este artículo, ha aprendido acerca de algunas de las herramientas, bibliotecas y servicios que puede utilizar al desarrollar aplicaciones React Native. ¿Que pasa contigo? ¿Cuáles son sus herramientas de acceso cuando se trata de desarrollar aplicaciones en React Native??
Y mientras esté aquí, consulte algunas de nuestras otras publicaciones sobre el desarrollo de aplicaciones React Native!
Accentsconagua