Curso de React | ant Design JS 1

Curso de React
ant Design JS

Curso de React | ant Design JS 2

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.Compact>

Notification…

Implementación:

import { notification } from "antd";
...
notification.info({
      message: "¡Éxito!",
      description: "El Room ID ha sido copiado al portapapeles",
      placement: "topRight",
      duration: 4,
});

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

Este componente permite alimentar y recuperar los inputs internos sin tener que declarar un estado para cada uno.

Para ello deberemos envolver cada elemento del formulario cuyo valor queremos alimentar y recuperar con un componente Form.Item cuyo name corresponde a la propiedad a la que queremos acceder.

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

Utilizando antd, realizar el ejercicio del enlace.

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>
)