Header Ads Widget

Ticker

6/recent/ticker-posts

Creando su primer proyecto React Native

 Después de presentar React Native y ver todos los requisitos previos necesarios para crear una aplicación móvil con React Native, veamos ahora cómo crear nuestro primer proyecto desde cero.

Abra una nueva terminal y ejecute el siguiente código para invocar React Native CLI usando el npxcomando:

$ npx react-native init firstapp

Nota : Antes de continuar, ya debería haber iniciado su emulador de Android o conectado un dispositivo real a su máquina.

A continuación, inicie Metro Bundler con los siguientes comandos:

$ cd firstapp
$ react-native start

Nota : Metro es un paquete de JavaScript para React Native que es rápido, escalable e integrado que compila su código React Native (ES6 +) a JavaScript (ES5) usando Babel.

Tienes que dejar el Metro funcionando. Así que abre una nueva terminal y ejecuta los siguientes comandos para compilar e iniciar tu aplicación en el emulador de Android:

$ cd firstapp 
$ react-native run-android   

El run-androidcomando compilará e instalará la aplicación en Android.

Nota : si está bajo un macOS y desea instalar la aplicación en un emulador de iOS o en un dispositivo real, debe usar el react-native run-ioscomando en su lugar.

Debe esperar a que se cree la aplicación. Finalmente obtendrá el mensaje CONSTRUIR CON ÉXITO en su terminal y su aplicación debería abrirse en el emulador o en un dispositivo real si está adjunto.

Esta es una captura de pantalla:

React Native App en el emulador de Android

Esta es una captura de pantalla de nuestra aplicación que se ejecuta dentro de un emulador de Android:

Reaccionar la aplicación nativa en Android

Como mencionamos anteriormente, si tiene Android SDK Platform Tools v29, puede obtener adb: error: can't bind listener: Operation not allowed. En este caso, debe cambiar a v28. Consulte la sección Prueba anterior en Android y Ubuntu 19.04 .

Abrir su proyecto en Visual Studio Code

Después de ejecutar su aplicación dentro del emulador de Android. Ejecute el siguiente comando para abrir el proyecto en Visual Studio Code desde la carpeta de su proyecto:

$ code .

React Native Project en VS Code

La anatomía de un proyecto React Native

En el panel izquierdo, podemos ver la estructura de nuestro proyecto. Incluye los típicos carpetas y archivos de configuración de un proyecto como Node.js las package.jsonpackage-lock.jsonlos archivos y la node_modulescarpeta. También disponemos de otros archivos de configuración como:

  • babel.config.js: El archivo de configuración de Babel (un compilador y transpilador para JavaScript)
  • metro.config.js: El archivo de configuración de Metro, un paquete de JavaScript para React Native,
  • app.json: configura partes de nuestra aplicación que no pertenecen al código. Vea este artículo .
  • watchman.config: El archivo de configuración de Watchman , un servicio de vigilancia de archivos,
  • .flowconfig: El archivo de configuración de Flow , un verificador de tipo estático para JavaScript,
  • .eslintrc.js: El archivo de configuración para ESLint , un linter de JavaScript y JSX (una herramienta para la calidad del código),
  • .buckconfig: El archivo de configuración de Buck , un sistema de compilación creado por Facebook,
  • .gitignore.gitattributes: ignora todos los archivos en el control de versiones que deberían ser únicos para cada máquina de desarrollo

Tenemos las siguientes carpetas:

  • android: La carpeta del proyecto de Android,
  • ios: La carpeta del proyecto de iOS,
  • __tests__: La carpeta para las pruebas.

Tenemos los siguientes archivos JavaScript:

  • App.js: El componente principal de nuestra aplicación React Native,
  • index.js: El archivo principal de nuestra aplicación donde se registran los componentes.

Envolver

En esta parte, hemos creado nuestro primer proyecto React Native usando la CLI de React Native a través del npxcomando. También hemos implementado nuestra aplicación móvil en nuestro emulador de Android. Finalmente, abrimos nuestro proyecto con Visual Studio Code y explicamos la anatomía básica de un proyecto React Native.

Publicar un comentario

0 Comentarios