ant Design JS

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Ant JS nos dará muchos componentes visuales que podremos utilizar en nuestros desarrollos.

Instalación y carga de ant Design JS

npm i antd

import { DatePicker } from 'antd';

export default () => <DatePicker />

Componentes destacados

Grid

Cada fila tiene 24 posiciones. El atributo span define las posiciones de cada columna

import { Row, Col } from 'antd';

export default () => (<>
    <h1>Ejercicios</h1>
    <Row gutter={[20, 20]} align="top | middle | bottom | stretch">
        <Col xs={24} sm={16} md={8} lg={4}>
            <h2>Título 1</h2>
        </Col>
        <Col xs={24} sm={16} md={8} lg={4}>
            <h2>Título 2</h2>
        </Col>    
    </Row>
</>);

Space

<Space direction="horizontal">
   <div>
      aaa
   </div>
   <div>
      bbb
   </div>
</Space>

<Space.compact direction="vertical">
   <div>
      aaa
   </div>
   <div>
      bbb
   </div>
</Space>

Modal, notification…

Implementación:

import ReactDOM from 'react-dom/client'
import App from './App.jsx'

import { App as AntdApp } from 'antd';

const theme = {
  token: {
    colorPrimary:'red',
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <ConfigProvider theme={theme}>
     <AntdApp>
        <App />
     </AntdApp>,
  </ConfigProvider>
)

import { App } from 'antd';

const { modal, notification } = App.useApp();

const showModal = () => {
  modal.confirm({
    title: '¿Estás seguro de que quieres eliminar este elemento?',
    content:'Contenido del popup',
    width:700,
    cancelText: 'No',
    okText: 'Sí',
    onOk: async () => {
      await deleteTask(userId, task.id);
      updateTasks();
    }
  });
}

const showNotification = () => {
  notification.info({
      message: `Debes escribir algo`,
      placement: 'topRight',
  });
}

Tipos de modales:

Tenemos cuatro tipos de modales: confirm, info, warning, error.

Drawer

     <Drawer
        title="Drawer with extra actions"
        placement={'right'}
        width={500}
        onClose={onClose}
        open={open}
        extra={
          <Space>
            <Button onClick={onClose}>Cancel</Button>
            <Button type="primary" onClick={onClose}>
              OK
            </Button>
          </Space>
        }
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>

Form

const onFinish = (values) => {
  console.log(value);
}
...
<Form initialValues={task} onFinish={onFinish}>
  <Radio.Group name="opcion">
    <Radio value={0}>Opción 1</Radio>
    <Radio value={1}>Opción 2</Radio>
  </Radio.Group>
  <Form.Item name="name">
    <Input />
  </Form.Item>
  <Button htmlType="submit">Enviar</Button>
</Form>

Ejercicio

Los iconos

Ant Design viene con su propia colección de iconos, pero es un proco pobre, en su lugar recomiendo usar esta colección de colecciones: react-icons. Para instalarla:

npm i react-icons

Tienes la documentación con todos los iconos disponibles en este enlace.

Cargar otro framework CSS: Bootstrap

Aunque personalmente, prefiero antJS, también es posible usar otros frameworks como Bootstrap en React:

npm i react-bootstrap bootstrap

import { Container, Row, Col } from 'react-bootstrap';

export default () => (
    <div>
        <Container>
            <Row>
                <Col>Text 1</Col>
                <Col>Text 2</Col>
            </Row>
        </Container>
    </div>
)