Introducción al diseño de hormigas

Ant Design es una biblioteca React UI que contiene componentes fáciles de usar que son útiles para crear interfaces de usuario interactivas. Es muy fácil de usar y de integrar. Ant Design es una de las opciones inteligentes para diseñar aplicaciones web usando react. Nos proporciona componentes de alta calidad que se pueden utilizar con facilidad.

Características del diseño de hormigas:

• Está escrito en TypeScript con tipos estáticos.
• Tiene un paquete completo de herramientas de desarrollo que son útiles para construir interfaces de usuario interactivas.
• Tiene soporte de internacionalización para varios idiomas.
• Contiene componentes React de alta calidad.

Instalando Ant Design: Podemos instalarlo usando npm. Asegúrese de haber instalado Node.js y npm .

Usando npm:

npm install antd

Usando hilo:

yarn install antd

Comprendamos el funcionamiento del diseño de Ant usando un ejemplo.

Ejemplo: En este ejemplo, usaremos el componente Formulario de Ant Design.

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install antd

Estructura del proyecto: Tendrá el siguiente aspecto.

Ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import "antd/dist/antd.css";
import { Form, Button, Input } from 'antd';
  
export default function App() {
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Ant-Design Form Component</h4>
            <Form
                name="basicform"
                onFinishFailed={() => alert('Failed to submit')}
                onFinish={() => alert('Form Submitted')}
                initialValues={{ remember: true }}
            >
                <Form.Item
                    label="Enter username"
                    name="Username"
                    rules={[{
                        required: true,
                        message: 'Please enter username'
                    }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item>
                    <Button type="success" htmlType="submit">
                        Submit Username
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida: