Introducción a Bit.dev (Bit Harmony) para gestionar nuestros componentes de React Native

Bit.dev es una infraestructura para administrar componentes de diferentes frameworks. Esto es muy interesante a la hora de reutilizar componentes entre diferentes proyectos, documentarlos, colaborar en su desarrollo y controlar las versiones de estos componentes.

En esta guía, le mostraremos cómo instalar y configurar Bit Harmony para componentes React Native. No obstante, la guía para reutilizar, construir, y gestionar componentes de React Native mediante Bit Harmony, se puede encontrar en el siguiente enlace:

Usando Bit.dev para la gestión de componentes de React Native

Instalación

Lo primero que debe hacer es instalar Bit globalmente en la máquina donde se han implementado o se implementarán los componentes. Para hacerlo, BVM (Bits Version Manager) debe instalarse usando NPM, y luego Bit Harmony se instalará a través de BVM.

1 — Instalar NPM (si ya lo tiene instalado puede omitir este paso)

Puede verificar si NPM está instalado ejecutando el siguiente comando:

npm -v

Si no está instalado, puede obtenerlo instalando NodeJS usando Descargar | Instaladores de Node.js (nodejs.org) en el caso de Windows y MacOS, mientras que en el caso de las distribuciones de Linux recomiendo instalarlo con el administrador de paquetes, como se indica en esta guía. Instalación de Node.js a través del administrador de paquetes | Node.js (nodejs.org)

2 — Instalar BVM y Bit

Si NPM se ha instalado correctamente, para instalar BVM simplemente ejecute el siguiente comando:

npm i -g @teambit/bvm

Una vez que se completa la instalación, BVM se puede usar para instalar Bit usando el comando:

install bvm

Si el comando bvm no funciona porque no se encuentra o no está disponible, entonces, dependiendo de la plataforma, se puede resolver ejecutando uno de los siguientes comandos:

Ventanas:

setx path "%path%;%LocalAppData%\.bvm"

MacOS / Linux:

echo 'export PATH=$HOME/bin:$PATH' >> ~/.bashrc && source ~/.bashrc

Después de ejecutarlo, debe reiniciar el terminal o PowerShell.

Este comando agrega la variable de entorno para poder ejecutarlo desde el terminal o PowerShell.

Una vez finalizada la instalación, puede comprobar que Bit se ha instalado correctamente ejecutando el comando:

bvm version

Debería mostrar algo similar a esto

current (used) bvm version: 0.0.24
latest available bvm version: 0.0.24current (used) bit version: 0.0.453
latest installed bit version: 0.0.453
latest available bit version: 0.0.453

Por último, vamos a comprobar que el comando bit funciona correctamente, para ello simplemente tenemos que ejecutar:

bit

Si todo va bien, mostrará una lista de todos los comandos disponibles. De lo contrario, si no encuentra el comando, es posible que la variable de entorno no se haya configurado correctamente. Para solucionar este problema, dependiendo de la plataforma, debes ejecutar uno de los siguientes comandos

Ventanas:

setx path "%path%;%LocalAppData%\.bvm"

MacOS / Linux:

echo 'export PATH=$HOME/bin:$PATH' >> ~/.bashrc && source ~/.bashrc

Después de ejecutarlo, debe reiniciar el terminal o PowerShell.
En realidad, esta es la misma solución descrita anteriormente para cuando no se encuentra el comando bvm.

Crear una cuenta y una colección

Antes de comenzar con la configuración es recomendable crear un usuario en bit.dev y, con este usuario, crear una colección donde poder cargar, administrar y compartir los componentes. De lo contrario, todo el trabajo que sigue se haría localmente, sin aprovechar algunos de los beneficios que brinda esta plataforma.

Luego de crear la cuenta en bit.dev , podemos crear una colección donde subir los componentes que decidamos exportar a la plataforma.
En mi caso simplemente crearé una colección personal, con el nombre “test”, en la versión “Harmony”, y con acceso privado.

Es relevante el nombre de la colección y si es un proyecto de equipo o personal, ya que posteriormente se requiere establecer el alcance de los componentes, su identificador y la forma de acceder a ellos.

Una vez hecho esto, tenemos que iniciar sesión en la máquina donde tenemos instalado bit ejecutando el siguiente comando:

bit login

Este comando abrirá una ventana en el navegador para iniciar sesión con la cuenta que acabamos de crear.

Configuración

La inicialización y configuración del espacio de trabajo de bits se realiza de forma similar en el caso de crear un nuevo proyecto desde cero, y en el caso de utilizar uno existente con componentes previamente implementados.

1 — Crear un nuevo proyecto React Native

En este paso, crearemos un nuevo proyecto desde cero, para que no tenga que hacerlo, y debe omitirlo si tiene la intención de inicializar y configurar el espacio de trabajo de bits para proyectos existentes de React Native.

Primero ubicamos la carpeta donde se creará la carpeta del proyecto.

En mi caso:

cd C:\Users\brand\playground

En esta carpeta ejecutamos el comando:

npx react-native init <Nombre del proyecto>

Esto creará una carpeta con el mismo nombre que el proyecto, que contendrá los archivos del proyecto y el código de la aplicación.

(Opcional) En caso de que desee crear el proyecto para usar TypeScript, en lugar del comando anterior debe ejecutar el siguiente comando:

npx react-native init <Nombre del proyecto> --template react-native-template-typescript

Como ejemplo, crearé un proyecto de prueba de TypeScript usando el siguiente comando:

npx react-native init test --template react-native-template-typescript

Usaré este mismo ejemplo para comprender mejor algunos de los comandos que se explicarán a continuación.

2 — Inicializar el espacio de trabajo de Bit

En este paso vamos a inicializar el espacio de trabajo de Bit del proyecto, para ello ubicamos dentro de la carpeta del proyecto React Native.

Para el ejemplo creado anteriormente sería:

cd C:\Users\brand\playground\test

Una vez dentro de esta carpeta ejecutaremos el comando:

bit init --harmony

Este comando crea los siguientes archivos dentro del proyecto:

• workspace.jsonc - Este es el archivo de configuración del espacio de trabajo donde se establecen las políticas del espacio de trabajo y sus componentes.
• .bitmap - Este es un archivo generado automáticamente para mapear los componentes versionados y su ubicación física.
• .git/bit Archivos de gestión de versiones del espacio de trabajo.

3 — Configuración del espacio de trabajo de Bit

Después de la inicialización, lo único que queda por hacer es configurar el espacio de trabajo para usar el aspecto y la sensación de React Native y el alcance que se ha creado previamente.

Para hacer esto, modifica el archivo workspace.jsoncen la parte "teambit.workspace/workspace"donde dice "name": "my-workspace-name"cambiar “my-workspace-name” al nombre que quieres darle al espacio de trabajo, en mi ejemplo pondré test y el resultado será el siguiente "name": "test"

Un poco más abajo en "teambit.workspace/workspace"donde dice "defaultScope": "my-scope"cambiar “my-scope” al nombre del alcance donde se van a agregar los componentes, en este caso usaremos el creado previamente. Para hacerlo, debe configurarse de la siguiente manera:

"defaultScope": "<Nombre de usuario | Nombre del equipo>. <Nombre de la colección>"

De esta forma, el ejemplo creado anteriormente se vería así:

"defaultScope": "brandres.test"

Ya que recordemos que la colección fue creada como personal y con el nombre de “prueba”.
Finalmente tenemos que reemplazar esto:

Con este:

Se puede observar que en “teambit.dependencies/dependency-resolver” en la política de peerDependencies hay que establecer la versión de react que se especifica en package.json como una dependencia de todos los componentes, ya que esta versión es la que tenemos instalada en el proyecto, y es con la que se ha desarrollado el componente. Especificar esto es muy importante ya que por defecto Bit utiliza otras políticas de dependencias que pueden dar problemas a la hora de instalar el componente en otros proyectos mediante npm ≥ 7

Traducción realizada con la versión gratuita del traductor www.DeepL.com/Translator

Luego, se debe ejecutar el siguiente comando:

bit install

Este comando se usa para instalar las dependencias y los paquetes necesarios para el proyecto. Finalmente iniciaríamos el servidor de desarrollo con los comandos:

bit compile
bit start

Se puede acceder a este servidor a través de un navegador ingresando http: // localhost: 3000 .

Aquí podemos ver y administrar diferentes propiedades de los componentes que se han versionado localmente en el espacio de trabajo.

Espero que esta guía os haya sido de utilidad, seguiré escribiendo tutoriales acerca de los aspectos mas relevantes de Bit, y cualquier duda o sugerencia me la podéis comentar.

Muchas gracias.

Como usar Bit Harmony para la gestión de componentes React Native:

Usando Bit.dev para la gestión de componentes de React Native