valentin13.mail@gmail.com

Creando el Conjunto de Datos de React Shadcn Codex Parte 1 - 06/09/2024

Una Inmersión en Componentes Modernos de UI

Creando el Conjunto de Datos de React Shadcn Codex: Una Inmersión en Componentes Modernos de UI

Parte 1: Introducción y Web Scraping

¡Hola, desarrolladores y entusiastas de los datos! Hoy estoy emocionado de llevarlos en un recorrido detallado sobre la creación del conjunto de datos de React Shadcn Codex. Esta colección completa de más de 3,000 componentes de React muestra el poder y la versatilidad de shadcn UI, Framer Motion y Lucide React. Ya seas un desarrollador experimentado de React o estés comenzando tu viaje con estas bibliotecas, este conjunto de datos tiene como objetivo ser un recurso invaluable para el aprendizaje, la inspiración y la investigación.

1.1 La Visión Detrás del Conjunto de Datos

Antes de sumergirnos en los detalles técnicos, hablemos de por qué este conjunto de datos es importante. En el siempre cambiante mundo del desarrollo frontend, mantenerse al día con las mejores prácticas y patrones modernos de UI puede ser un desafío. El React Shadcn Codex tiene como objetivo abordar esto proporcionando una colección curada de componentes que demuestran cómo se usan estas bibliotecas populares en escenarios del mundo real.

Los beneficios clave de este conjunto de datos incluyen:

  1. Recurso de Aprendizaje: Los desarrolladores pueden estudiar varias implementaciones de componentes de UI.
  2. Inspiración: Sirve como fuente de ideas para resolver desafíos de UI.
  3. Investigación: Proporciona un gran corpus para analizar tendencias en el diseño de componentes de React.
  4. Benchmarking: Se puede usar para comparar diferentes enfoques a problemas similares de UI.

1.2 Descripción General de las Tecnologías

Repasemos brevemente las principales tecnologías que destacamos en nuestro conjunto de datos:

  1. shadcn UI: Una colección de componentes reutilizables construidos con Radix UI y Tailwind CSS.
  2. Framer Motion: Una popular biblioteca de animación para React que facilita la creación de animaciones complejas.
  3. Lucide React: Una biblioteca de íconos de código abierto bellamente diseñados para aplicaciones React.

Estas bibliotecas, cuando se combinan, permiten a los desarrolladores crear componentes de UI modernos, animados y accesibles con facilidad.

1.3 El Proceso de Web Scraping: Recolectando Nuestros Datos

Ahora, profundicemos en el primer gran paso en la creación de nuestro conjunto de datos: el web scraping. Necesitábamos recopilar una gran cantidad de componentes de React que usaran nuestras bibliotecas objetivo. GitHub, siendo el mayor anfitrión de código abierto, fue la elección obvia para nuestra fuente de datos.

1.3.1 Elegir la Herramienta Adecuada: Selenium

Para nuestras necesidades de scraping, elegimos Selenium. Aquí está el por qué:

  1. Manejo de Contenido Dinámico: GitHub utiliza JavaScript para cargar los resultados de búsqueda, lo que hace que la capacidad de Selenium para interactuar con contenido dinámico sea crucial.
  2. Navegación: Selenium nos permitió navegar fácilmente por múltiples páginas de resultados de búsqueda.
  3. Flexibilidad: Nos proporcionó el control necesario para implementar limitación de velocidad y manejo de errores.

1.3.2 Creando la Consulta de Búsqueda Perfecta

El corazón de nuestro proceso de scraping fue la consulta de búsqueda. Necesitábamos encontrar archivos que:

  1. Fueran archivos React en TypeScript (extensión .tsx)
  2. Importaran componentes específicos de shadcn UI
  3. Utilizaran Framer Motion y Lucide React
  4. No estuvieran en ciertas rutas comunes (para evitar código boilerplate)

Aquí está la consulta que usamos:

query = f'path:*.tsx "{component}" -path:src/pages/page.tsx -path:src/pagesApp.tsx "framer-motion" "lucide-react"'

Esta consulta nos permitió encontrar componentes relevantes mientras filtrábamos mucho ruido.

1.3.3 El Algoritmo de Scraping

Desglosemos nuestro proceso de scraping paso a paso:

  1. Configuración: Inicializar Selenium WebDriver y configurar cualquier encabezado o cookie necesario.

  2. Bucle de Búsqueda: Para cada componente de shadcn UI en el que estemos interesados: a. Construir la URL de búsqueda con nuestra consulta. b. Navegar a la página de resultados de búsqueda. c. Extraer información de cada resultado (URL del archivo, URL del contenido sin formato). d. Moverse a la siguiente página si está disponible y si no hemos alcanzado nuestro objetivo de resultados.

  3. Extracción de Contenido: Para cada URL de archivo: a. Obtener el contenido sin formato. b. Almacenar el nombre del componente, la URL del archivo y el contenido.

  4. Limitación de Velocidad: Implementar retrasos entre solicitudes para evitar sobrecargar los servidores de GitHub o ser bloqueados.

Aquí está una versión simplificada de nuestra función principal de scraping:

def search_github(component, max_results=50):
    results = []
    page = 1

    while len(results) < max_results:
        query = f'path:*.tsx "{component}" -path:src/pages/page.tsx -path:src/pagesApp.tsx "framer-motion" "lucide-react"'
        url = f"https://github.com/search?q={query}&type=Code&p={page}"

        driver.get(url)
        soup = BeautifulSoup(driver.page_source, "html.parser")

        for element in soup.find_all("div", class_="f4 text-normal"):
            file_url = "https://github.com" + element.find("a")["href"]
            raw_url = file_url.replace("/blob/", "/raw/")
            code_content = requests.get(raw_url).text

            results.append({
                "component": component,
                "url": file_url,
                "raw_url": raw_url,
                "content": code_content
            })

            if len(results) >= max_results:
                break

        page += 1
        time.sleep(random.uniform(5, 15))  # Limitación de velocidad

    return results

1.3.4 Manejo de Errores y Casos Especiales

El web scraping rara vez va sin problemas en el primer intento. Encontramos varios desafíos:

  1. Limitación de Velocidad: GitHub tiene límites estrictos. Implementamos una retroalimentación exponencial:

    @backoff.on_exception(backoff.expo, requests.exceptions.RequestException, max_tries=5)
def fetch_content(url):
    response = requests.get(url)
    response.raise_for_status()
    return response.text

  2. Detección de CAPTCHA: A veces, GitHub lanzaba un CAPTCHA. Implementamos un mecanismo de detección simple:

    if "Are you a robot?" in driver.page_source:
    print("CAPTCHA detectado. Esperando intervención manual...")
    input("Presiona Enter después de resolver el CAPTCHA...")

  3. Errores de Red: Problemas temporales de red podían interrumpir nuestro scraping. Añadimos lógica de reintento:

    for attempt in range(3):
    try:
        return fetch_content(url)
    except requests.exceptions.RequestException as e:
        if attempt == 2:
            raise
        time.sleep(5 * (attempt + 1))

1.3.5 Consideraciones Éticas

Es crucial abordar el web scraping de manera ética. Tomamos varias medidas para asegurar que nuestro scraping fuera responsable:

  1. Respetamos el archivo robots.txt de GitHub y sus términos de servicio.
  2. Implementamos una limitación de velocidad generosa para evitar sobrecargar sus servidores.
  3. Solo recopilamos código públicamente disponible y respetamos las licencias de los repositorios.
  4. Incluimos instrucciones claras en nuestro conjunto de datos sobre cómo solicitar la eliminación de cualquier contenido.

1.4 Próximos Pasos

Con nuestro proceso de scraping completo, teníamos una gran cantidad de datos sin procesar para trabajar. Pero nuestro viaje estaba lejos de terminar. En la próxima parte de esta serie, profundizaremos en cómo procesamos estos datos, estructuramos nuestro conjunto de datos y lo mejoramos con prompts generados por IA.

¡Mantente atento para la Parte 2, donde exploraremos las complejidades de construir y estructurar nuestro conjunto de datos!