evangelist

Componentes de marketing de bit.dev

El conjunto reutilizable de componentes de React utilizado para crear el sitio web de marketing bit.dev. Este repositorio es una microfrontend basada en componentes que expone componentes.

Colección de componentes: elegir y utilizar

Todos los componentes de este código base de interfaz fueron creados y expuestos utilizando Bit como un conjunto de componentes utilizables de forma independiente. Vea el alcance evangelist en bit.dev para explorar e integrar cualquier componente en su proyecto.

• Instalar componentes independientes con bbit install
• Utilice bbit import para explorar componentes en su espacio de trabajo local y modificarlos según sus propias necesidades.
• Pruebe cualquier componente de forma práctica en el área de juegos en vivo de los documentos y en la página de "composiciones".

Esta es una micro-frontend basada en componentes.

Espera... ¿qué?

Toda la plataforma bit.dev y el sitio web no están diseñados como una aplicación monolítica . En cambio, se construye a partir de componentes mantenidos en diferentes bases de código que se desarrollan por separado, luego se exponen e integran juntos usando Bit.

¡Muéstrame un ejemplo!

Eche un vistazo a la página de inicio de bit.dev.

Notarás que está construido a partir de componentes que se encuentran en diferentes bases de código de front-end:

• Componentes evangelist (aquí).
• componentes base-ui.
• Aplicación de contenedor (privada).
• etc.

Usamos Bit para contener y exponer componentes de cualquier base de código como un conjunto de API en bit.dev que se pueden integrar en diferentes páginas y aplicaciones. Por ejemplo:

• Componentes evangelist expuestos en bit.dev.
• Componentes de base-ui expuestos en bit.dev.

Componentes clave

paginas

páginas completas con márgenes, fondos. Debido a su tamaño, los componentes de la página no deben contener contenido granular y solo establecer el diseño para secciones individuales.

Secciones

Áreas individuales que contienen la mayor parte del contenido y se pueden reutilizar entre páginas. Las secciones pueden ocupar diferentes espacios en diferentes páginas, por lo que se deben evitar tamaños y fondos.

Contenido

Objetos de datos sin procesar para componentes visuales (como el modelo de MVC). Un único componente de la interfaz de usuario puede utilizar muchos componentes de contenido en diferentes lugares, y el contenido puede presentarse de manera diferente en diferentes componentes de la interfaz de usuario.

Átomo / 'hormigón'

Componentes que son específicos de esta página de inicio. Como componentes atómicos de la interfaz de usuario, siguen siendo abstractos y no deben contener textos ni contenido.

Configuración

1. Bit de instalación: npm install @teambit/bit --global
2. Clona este espacio de trabajo de bits: git clone https://github.com/teambit/evangelist.git evangelist
3. Vaya al directorio del espacio de trabajo: cd evangelist
4. Instale todos los paquetes e importe todos los componentes: bbit install
5. Ejecute la interfaz de usuario del espacio de trabajo para explorar los componentes evangelistas: bbit start y vaya a https://localhost:3000
6. ¡Disfrutar!