Cómo usar Shadcn/UI en React.js

Construir interfaces de usuario modernas y elegantes es uno de los principales objetivos para los desarrolladores front-end, y con el auge de las bibliotecas de componentes, esa tarea se ha vuelto aún más fácil. Hoy, voy a presentarles Shadcn/UI, una biblioteca de componentes potente y personalizable para React.js. Ya sea que seas nuevo en React.js o un desarrollador experimentado, Shadcn/UI puede mejorar el diseño de tu aplicación sin la hinchazón habitual de los frameworks más grandes. Además, te guiaré a través de la configuración paso a paso, incluyendo cómo aprovechar las APIs y herramientas como Apidog para que el desarrollo sea más fluido.

Al final de esta publicación, tendrás una comprensión clara de cómo usar Shadcn/UI en tu proyecto de React.js. Y, si estás construyendo tu propia API o trabajando con una, no olvides descargar Apidog gratis; es un salvavidas al probar y desarrollar APIs.

button

¡Empecemos!

¿Qué es Shadcn/UI?

Antes de sumergirnos en la configuración, primero definamos qué es Shadcn/UI y por qué es una opción sólida para tu proyecto de React.js.

Shadcn/UI es una biblioteca de componentes personalizable construida específicamente para React.js. A diferencia de los frameworks más grandes como Material UI o Bootstrap, Shadcn/UI se centra en darte más control sobre la apariencia de tus componentes. Te proporciona bloques de construcción básicos, lo que te permite crear una interfaz única sin estar atado a temas predefinidos.

¿Por qué Shadcn/UI?

Ligero: A diferencia de las bibliotecas pesadas que agrupan toneladas de componentes que nunca usarás, Shadcn/UI proporciona solo lo que necesitas.
Personalizable: Puedes diseñar y estructurar los componentes de acuerdo con los requisitos únicos de tu proyecto.
Optimizado para React.js: La integración perfecta con React.js significa que puedes concentrarte en escribir código en lugar de ajustar las configuraciones.
APIs listas: La biblioteca es compatible con herramientas de API como Apidog, lo que facilita la gestión y prueba de los endpoints de API dentro de tu aplicación React.

Guía paso a paso: Cómo usar Shadcn/UI en tu proyecto de React.js

Ahora que sabes qué es Shadcn/UI, repasemos el proceso paso a paso para integrarlo en un proyecto de React.js. Esta guía asume que ya tienes una comprensión básica de React y que tienes Node.js instalado en tu máquina.

1. Crea un nuevo proyecto de React.js

Si ya tienes un proyecto de React.js configurado, puedes omitir este paso. De lo contrario, puedes crear un nuevo proyecto usando los siguientes comandos:

npx create-react-app my-shadcn-ui-app
cd my-shadcn-ui-app
npm start

Esto creará un nuevo proyecto de React.js llamado my-shadcn-ui-app e iniciará el servidor de desarrollo. Ahora, deberías ver la aplicación React predeterminada en funcionamiento.

2. Instala Shadcn/UI

Añade dependencias a tu proyecto manualmente.

Añade Tailwind CSS

Los componentes se diseñan usando Tailwind CSS. Necesitas instalar Tailwind CSS en tu proyecto.

Sigue las instrucciones de instalación de Tailwind CSS para empezar.

Añade dependencias

Añade las siguientes dependencias a tu proyecto:

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

Añade la biblioteca de iconos

Si estás usando el estilo default, instala lucide-react:

npm install lucide-react

Si estás usando el estilo new-york, instala @radix-ui/react-icons:

npm install @radix-ui/react-icons

Configura alias de ruta

Yo uso el alias @. Así es como lo configuro en tsconfig.json:tsconfig.json

{
  "compilerOptions": {   
	"baseUrl": ".",
        "paths": {
        "@/*": ["./*"]
        }
    }
}

El alias @ es una preferencia. Puedes usar otros alias si quieres.

Si usas un alias diferente como ~, tendrás que actualizar las declaraciones de importación al añadir componentes.

Ahora puedes empezar a añadir componentes a tu proyecto.

3. Importa y usa componentes de Shadcn/UI

Pasemos a la parte divertida: añadir algunos componentes de Shadcn/UI a tu aplicación de React.js. En tu archivo src/App.js, puedes comenzar importando y usando uno de los componentes de Shadcn/UI, como el componente de botón.

Aquí tienes un ejemplo:

import React from 'react';
import { Button } from 'shadcn-ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My Shadcn/UI App</h1>
        <Button variant="primary">Click Me!</Button>
      </header>
    </div>
  );
}

export default App;

El componente Button de Shadcn/UI se importa y se usa en el componente App. Puedes usar varias props para personalizarlo. En este caso, estamos usando la prop variant="primary" para darle al botón un estilo primario.

4. Personaliza el tema de Shadcn/UI

Una de las mejores partes de Shadcn/UI es su personalización. Puedes ajustar los componentes para que coincidan con el lenguaje de diseño único de tu aplicación.

Shadcn/UI te permite definir un tema personalizado que se puede aplicar globalmente. Aquí te mostramos cómo hacerlo:

a) Crea un archivo de tema personalizado

Primero, crea un nuevo archivo llamado theme.js en tu directorio src. En este archivo, definirás tu tema personalizado de la siguiente manera:

const theme = {
  colors: {
    primary: '#ff6347', // Tomato color
    secondary: '#4caf50', // Green color
  },
  fonts: {
    body: 'Arial, sans-serif',
    heading: 'Georgia, serif',
  },
};

export default theme;

b) Aplica el tema a tus componentes

Ahora que tienes tu tema personalizado definido, puedes aplicarlo a tus componentes usando el componente ThemeProvider. Actualiza tu archivo src/App.js de la siguiente manera:

import React from 'react';
import { Button, ThemeProvider } from 'shadcn-ui';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <header className="App-header">
          <h1>Welcome to My Shadcn/UI App</h1>
          <Button variant="primary">Click Me!</Button>
        </header>
      </div>
    </ThemeProvider>
  );
}

export default App;

En este código actualizado, hemos importado ThemeProvider de Shadcn/UI y hemos envuelto nuestra aplicación dentro de él, pasando el theme personalizado como una prop.

5. Gestión de APIs con Apidog en tu proyecto Shadcn/UI + React

Ahora que tu front-end se ve genial con Shadcn/UI, es hora de hacerlo funcional conectándolo a una API. Aquí es donde Apidog es útil. Si no has oído hablar de Apidog antes, es una herramienta robusta de gestión de APIs que simplifica las pruebas de API, la documentación y la colaboración entre desarrolladores.

¿Por qué usar Apidog con tu aplicación React.js?

Pruebas de API facilitadas: Puedes probar tus endpoints de API directamente dentro de tu proyecto React.
Colaboración perfecta: Apidog te permite generar y compartir documentación de API con tu equipo.
Acelera el desarrollo: Simula fácilmente las respuestas de la API para acelerar el proceso de desarrollo.

Usando Apidog para llamadas a la API

Digamos que estás construyendo una aplicación de React.js que obtiene datos de una API del clima. Aquí te mostramos cómo podrías usar Apidog para gestionar las llamadas a la API:

Paso 1: Abre Apidog y crea una nueva solicitud.

Paso 2: En el editor de pruebas, introduce la URL de tu endpoint de API, selecciona el método HTTP y añade cualquier encabezado, parámetro o datos del cuerpo que necesites. Por ejemplo, puedes probar la ruta que devuelve un mensaje simple que creamos anteriormente:

Paso 3: Haz clic en el botón Enviar y mira el resultado de tu prueba. Deberías ver el código de estado, el tiempo de respuesta y el cuerpo de la respuesta de tu API. Por ejemplo, deberías ver algo como esto:

Apidog es una gran herramienta para probar tus APIs, ya que te ayuda a asegurar la calidad, fiabilidad y rendimiento de tus servicios web. También te ahorra tiempo y esfuerzo, ya que no necesitas escribir ningún código ni instalar ningún software para probar tus APIs. Puedes simplemente usar tu navegador y disfrutar de la interfaz fácil de usar y las características de Apidog.

6. Mejores prácticas para usar Shadcn/UI y Apidog en React.js

Aquí hay algunas mejores prácticas que debes seguir para aprovechar al máximo Shadcn/UI y Apidog:

Optimiza el rendimiento: Usa solo los componentes de Shadcn/UI que necesites para mantener pequeño el tamaño de tu paquete.
Modulariza tus componentes: Divide tu UI en componentes pequeños y reutilizables.
Prueba tus APIs: Usa Apidog para probar a fondo tus endpoints de API y asegurarte de que funcionan como se espera.
Usa el control de versiones: Confirma regularmente tus cambios para evitar perder el progreso y para colaborar eficazmente con tu equipo.

Conclusión: Construyendo aplicaciones React.js con Shadcn/UI y Apidog

¡Felicidades! Ahora tienes todo el conocimiento que necesitas para usar Shadcn/UI en tus proyectos de React.js. Desde la configuración de la biblioteca hasta la personalización de los componentes, has visto lo fácil que es crear hermosas UIs. Y con Apidog, la gestión de tus llamadas a la API se convierte en una brisa.

Recuerda, ya sea que estés construyendo una herramienta interna o una aplicación orientada al cliente, Shadcn/UI te da la flexibilidad de crear algo único, mientras que Apidog ayuda a optimizar tu flujo de trabajo de API.

P.D. Si estás trabajando en APIs, no olvides descargar Apidog gratis; ¡te ahorrará horas de desarrollo y pruebas!

button