Guía de adopción de Ant Design: descripción general, ejemplos y alternativas

Ant Design se enorgullece de ser la segunda biblioteca de interfaz de usuario de React más popular, con más de 90000 estrellas en GitHub al momento de escribir este artículo. Es fácil entender por qué, dada su gran cantidad de componentes de interfaz de usuario completos y fáciles de usar, y otras características que hacen que crear interfaces de usuario sea una experiencia agradable.

En esta guía de adopción, exploraremos las características clave de Ant Design y cómo empezar a usarlo en un proyecto React, incluyendo las opciones de configuración y personalización. También abordaremos casos prácticos y una comparación con alternativas populares como Material Design y Bootstrap.

¿Qué es Ant Design?

Ant Design (Antd) fue creado por Ant Group (la empresa matriz de Alibaba) y lanzado públicamente en julio de 2015. Desde entonces, la biblioteca se ha expandido para incluir soporte para componentes de UI modernos, ampliar su estilo y opciones de personalización e incluso adaptarse a otras bibliotecas de componentes de JavaScript como Vue, Angular y Next.js.

Ant Design funciona de forma similar a otras bibliotecas de interfaz de usuario. Proporciona componentes y patrones de diseño de alta calidad listos para usar. Para usarlo en tu proyecto, simplemente instálalo en tu framework preferido, importa los componentes que quieras usar y personalízalo según tus necesidades mediante las propiedades del componente o el archivo de configuración de Antd.

Hay muchas grandes empresas, incluidas Alibaba.com, Baidu (el motor de búsqueda chino), Tencent y muchas más, que ya utilizan ampliamente Ant Design como su biblioteca de interfaz de usuario principal.

Lectura adicional:

• Introducción al diseño de hormigas
• Las mejores bibliotecas y kits de interfaz de usuario de React en 2023 #AntDesign
• Cómo usar Ant Design con Next.js
• Cómo usar Ant Design con Vue 3
• Los mejores frameworks de UI para Vue 3 #AntDesign

¿Por qué elegir Ant Design?

Ant Design se destaca por varias razones clave:

• Rendimiento y facilidad de usoEsta biblioteca proporciona componentes optimizados que garantizan aplicaciones rápidas y con capacidad de respuesta. Su completa documentación también facilita la puesta en marcha rápida.
• Compatibilidad con TypeScript:Totalmente compatible con TypeScript, lo que garantiza las definiciones de tipos y la seguridad.
• Integraciones:Se integra fácilmente con otras bibliotecas React y marcos CSS como Tailwind CSS
• Biblioteca de interfaz de usuario móvil:Antd ofrece una completa biblioteca de interfaz de usuario móvil con componentes para crear aplicaciones móviles intuitivas
• Bibliotecas de gráficos y animaciones:Las bibliotecas integradas para gráficos y animaciones mejoran la interacción visual.

Sin embargo, tenga en cuenta que los componentes de Ant Design pueden ser pesados. Además, los proyectos con requisitos de interfaz de usuario muy específicos podrían requerir un esfuerzo adicional de personalización. A pesar de estas desventajas, las robustas funciones y la facilidad de uso de Ant Design suelen compensar sus inconvenientes, lo que lo convierte en una excelente opción para la mayoría de los proyectos.

Introducción a Ant Design

Para comenzar a usar Ant Design en un proyecto React, cree una nueva aplicación React ejecutando el siguiente comando:

npm crear vite@latest react-antd -- --template react

Llegado a este punto, es un buen momento para instalar las dependencias predeterminadas para tu nuevo proyecto de React-Vite. A continuación, agrega la antdbiblioteca ejecutando este comando:

npm instalar antd

Una vez completada esta configuración, ahora puede importar y usar los componentes de UI de Ant Design en su aplicación React, como se muestra a continuación:

// App.jsximport "./App.css";import { Alert } from "antd";function App() { return ( h1React + Ant Design/h1 Alert message="¡Felicitaciones!" description="Se ha instalado Ant Design exitosamente." type="success" showIcon // );}export default App;

El código anterior muestra un ejemplo de cómo generar una alerta de éxito con Ant Design. Al ejecutar la aplicación, debería obtener un resultado similar al siguiente:

Ant Design incluye numerosos componentes y funciones. Analicemos brevemente los más utilizados en una aplicación típica.

Características clave de Ant Design que debes conocer

Los componentes de Ant Design se organizan en los siguientes subgrupos: general, diseño, navegación, entrada de datos, visualización de datos, retroalimentación y otros componentes. Comenzaremos analizando el grupo general de componentes.

Componentes generales

El grupo general contiene componentes esenciales como botones, iconos y tipografía.

El componente de Ant Design Button / tiene múltiples variantes, que puedes diseñar fácilmente actualizando la propiedad de tipo de componente, extendiéndolo con un ícono a través de la propiedad de ícono o actualizando su estado de carga a través de la propiedad de carga, como se muestra en el siguiente ejemplo de código:

importar { SearchOutlined } de "@ant-design/icons"; importar { Button, Flex } de "antd"; función Botones() { devolver ( {/* h1React + Ant Design/h1 */} Flex gap="large" ButtonDefault Botón/Botón Tipo de botón="primario"tipo="primario"/Botón Tipo de botón="discontinuo"tipo="discontinuo"/Botón Tipo de botón="enlace"tipo="enlace"/Botón Tipo de botón="primario" peligro Peligro Botón /Botón Tipo de botón="primario" icono={SearchOutlined /} Botón con icono /Botón Tipo de botón="primario" cargando Cargando Botón /Botón /Flex / );}exportar predeterminado Botones;

Ejecutar este código nos da el siguiente resultado:

Los íconos de Ant Design vienen preinstalados con Ant Design, lo que proporciona una amplia gama de íconos que se integran perfectamente con los componentes de Ant Design:

Sin embargo, también puedes instalar estos íconos como un paquete independiente ejecutando el siguiente comando:

npm install @ant-design/icons --save

De esta manera, podrá utilizar los íconos en proyectos que quizás no requieran la biblioteca completa de componentes de Ant Design.

Componentes de diseño

El grupo de diseño proporciona todos los componentes necesarios para crear diseños básicos y complejos en su aplicación, incluyendo diseños de cuadrícula y flexibles. Como se muestra a continuación, puede crear fácilmente un diseño de caja flexible con el Flex /componente e incluir inmediatamente sus opciones de estilo preferidas como propiedades:

importar { Botón, Flex } de "antd";const FlexBox = () = { devolver ( Flex justify="space-around" {[1, 2, 3, 4].map((item) = ( Botón type="primary" key={item} Flex Item /Button ))} /Flex );};exportar predeterminado FlexBox;// Nota: Hemos utilizado el mapeo de una matriz en este ejemplo de código para evitar la repetición.

Ejecutar este código produce el siguiente resultado:

De manera similar, puede utilizar fácilmente los componentes Row /y Col /para diseños de cuadrícula, como se muestra a continuación:

importar { Col, Row } de "antd";const style = { background: "#0092ff", padding: "20px",};const GridLayout = () = ( Row gutter={16} {[1, 2, 3, 4].map((item) = ( Col className="gutter-row" span={6} key={item} div style={style}col-6/div /Col ))} /Row /);exportar GridLayout predeterminado;

Aquí está el resultado del código anterior:

Componentes de entrada y visualización de datos

Ant Design ofrece múltiples componentes personalizables para la entrada y visualización de datos. Esto da como resultado elementos de formulario con un estilo atractivo y personalizable, como entradas, selectores de color y archivos, componentes de selección, componentes de calificación, interruptores, controles deslizantes y más.

Además, Ant Design proporciona un Form /componente que hace que sea muy fácil acceder mediante programación a los datos del formulario y sus estados, y diseñar formularios con múltiples diseños.

El grupo de visualización de datos, por otro lado, incluye de todo: desde tarjetas, carruseles, acordeones, tablas, pestañas y ventanas emergentes hasta componentes aún más exclusivos, como códigos QR, líneas de tiempo y más:

Lectura adicional:

• Opciones para construir acordeones plegables de React Native #Ant Design accordion

Componentes de retroalimentación

El grupo de comentarios contiene todos los componentes necesarios para mostrar diferentes estados de mensajes a los usuarios. Estos incluyen alertas, ventanas modales de cajón, ventanas modales de confirmación emergentes, cargadores de esqueleto y más. A continuación, se muestra un ejemplo de estos componentes:

Capacidades de internacionalización

La internacionalización (i18n) es crucial para crear aplicaciones que lleguen a un público global. Ant Design ofrece un sólido soporte de internacionalización para más de 50 idiomas. Esto facilita la adaptación de su aplicación a diferentes entornos locales.

Por ejemplo, para cambiar el idioma de tu aplicación a español, puedes importar Ant Design ConfigProviderjunto con el idioma que quieres usar y adaptar tu aplicación a él, como se muestra a continuación:

// main.jsximport ReactDOM desde "react-dom/client";import App desde "./App.jsx";import "./index.css";import { ConfigProvider } desde "antd";import esES desde "antd/locale/es_ES.js";ReactDOM.createRoot(document.getElementById("root")).render( ConfigProvider locale={esES} App / /ConfigProvider);

Una vez que envuelva su aplicación en ConfigProvider con la configuración regional establecida en esES, cualquier texto en sus componentes ahora debería cambiar a español, lo que brindará una experiencia de usuario localizada.

Personalizando tu tema Ant Design

Ant Design te permite personalizar el tema de tu aplicación, adaptándolo a tu gusto de diseño o a los requisitos de tu proyecto. También podemos hacerlo fácilmente con [nombre del tema] ConfigProvider, como se muestra a continuación:

importar { ConfigProvider } de "antd";ReactDOM.createRoot(document.getElementById("root")).render( ConfigProvider theme={{ token: { colorPrimary: "#00ccff", borderRadius: 3, }, }} App / /ConfigProvider);

Con este cambio, el color principal de su aplicación debería cambiar a #00ccff, y el valor predeterminado border-radiusdebería ser 3px.

Casos de uso para Ant Design

El conjunto de características de Ant Design lo hace ideal para diversas aplicaciones empresariales. Su extensa biblioteca de componentes es compatible con aplicaciones empresariales, plataformas de comercio electrónico y aplicaciones móviles.

Empresas como Alibaba y Baidu utilizan Ant Design para crear herramientas y paneles internos escalables. Al mismo tiempo, las plataformas de comercio electrónico se benefician de sus componentes personalizables para listados de productos, cuentas de usuario y procesamiento de pagos.

Las bibliotecas de gráficos y animaciones de Ant Design también lo hacen ideal para herramientas de visualización de datos, que son esenciales para las empresas que necesitan analizar y presentar datos de manera eficaz.

Lectura adicional:

• Visualización de datos con React y Ant Design

Diseño Ant vs. Diseño Material y Bootstrap

Cuando se mencionan bibliotecas CSS, nombres como Bootstrap y Material Design suelen venir primero a la mente. Sin embargo, Ant Design es igual de eficaz, con su completo conjunto de funciones y opciones de personalización.

Si bien Bootstrap es reconocido por su simplicidad y facilidad de uso y Material Design por su enfoque moderno y móvil, Ant Design se destaca por brindar componentes integrales adecuados para aplicaciones complejas de nivel empresarial.

Cada biblioteca tiene sus propias ventajas, lo que las hace adecuadas para diferentes necesidades de proyecto. La siguiente tabla destaca sus principales diferencias:

Esta tabla debería ser un recurso útil al elegir una biblioteca de UI para su próximo proyecto React.

Lectura adicional:

• Comparación de bibliotecas de componentes populares de React

Conclusión

En esta guía de adopción, exploramos las características y ventajas clave de Ant Design, mostramos sus casos prácticos de uso y la comparamos con otras bibliotecas de interfaz de usuario populares como Material Design y Bootstrap. Explicamos cómo empezar a usar Ant Design, incluyendo su configuración y personalización, y destacamos su rendimiento, el soporte de la comunidad y la documentación.

También puedes explorar todos los ejemplos de código utilizados en este artículo aquí. ¡Gracias por leer!

Empieza ahora

Si quieres conocer otros artículos parecidos a Guía de adopción de Ant Design: descripción general, ejemplos y alternativas puedes visitar la categoría Guias.