Programando Juntos

Construa o seu futuro na programação, passo a passo!

Ant Design – Instalação e Personalização

por · Published · Updated

Nesse tutorial Ant Design – Instalação e Personalização, iremos aprender um pouco sobre essa biblioteca muito poderosa e útil na hora de criar interfaces responsivas para nossos sites.

Introdução

O Ant Design React é uma biblioteca que oferece um conjunto abrangente de componentes e ferramentas para ajudar os desenvolvedores a criarem interfaces incríveis e responsivas em seus projetos ReactJS.

Link do site do Ant Design React: https://ant.design/

Visão geral do Ant Design React

Escolhi trazer essa biblioteca para vocês hoje por ela ser uma biblioteca muito completa e que permite um alto nível de personalização, criação de temas e uma vasta gama de componentes prontos para uso, um sistema de design consistente e personalizável, além de uma documentação detalhada e com o desenvolvimento muito ativo. Inclusive uma nova versão foi lançada agora dia 15 de maio de 2023.

Vídeo

Se você gosta de acompanhar tudo em vídeo e vendo na prática o que acontece, clique no vídeo abaixo e acesse nosso canal no Youtube. Não esqueça de curtir o vídeo e se inscrever no canal para acompanhar todas as novidades.

Configuração e Instalação do Ant Design React

Vamos fazer um passo a passo de como instalar a biblioteca Ant Design e como dar os primeiros passos.

Antes de começar, quero lembrar que para utilizar o react e bibliotecas derivadas, como a biblioteca Ant Design, é necessário que tenha o nodeJS e o npm ou yarn instalados na sua máquina.

Então se você ainda não tem essas ferramentas instaladas, recomendo você instalar e então voltar aqui para poder prosseguir sem erros.

Para esse tutorial eu estarei utilizando o yarn para fazer o passo a passo, que é um similar ao npm.

Instalação nodeJs + Yarn no Windows

Instalação nodeJs + Yarn no Linux

Então a primeira coisa que vamos fazer é abrir nosso terminal, vamos entrar na pasta onde criaremos nosso projeto e vamos digitar o seguinte comando:

yarn create react-app antd-demo

Sendo essa última parte do comando, o nome do projeto e da pasta que iremos criar.

Aqui pode ser que demore um pouquinho, pois o yarn vai baixar e configurar um novo project react pra você.

Agora vamos entrar na pasta que acabamos de criar com o comando:

cd antd-demo

A próximo passo é executar o comando de instalação da biblioteca Ant Design:

yarn add antd

Depois da instalação finalizada iremos executar o seguinte comando para poder inicializar nosso projeto, colocar ele pra rodar:

yarn start

Uma nova aba irá abrir no seu navegador e conseguimos ver nosso projeto rodando por padrão na porta 3000

Explorando alguns componentes de Ant Design

Vamos começar a explorar alguns componentes básicos da biblioteca pra vocês verem como é muito fácil usar ela.

Botões

Acho que botão é o componente mais básico de todos, mas eu achei tão bonito os botões dessa biblioteca, que eu vou começar por aqui.
O primeiro passo para utilizar algum componente dessa biblioteca, é importar o componente no arquivo que você quer utilizar.
Então vou abrir aqui o nosso arquivo src/App.js e vou colocar o seguinte código no topo do arquivo:

import { Button } from 'antd';

Vou apagar o conteúdo que já vem no arquivo e então vou adicionar um botão aqui pra gente ver como que fica:

<Button type="primary">Primary Button</Button>

Esse é um botão bem básico, mas ele tem um efeito bem legal de click que se expande em todos os outros botões.
Agora vou inserir um outro botão, porém com uma skin de “danger”, que da aquele sinal de “cuidado”, geralmente representado pela cor vermelha:

<Button type="primary" danger>Danger Primary Button</Button>

E também é possível criar um botão com o fundo branco, e com bordas e letras coloridas, basta remover o atributo “type” do botão, ficando assim:

<Button danger>Danger Button</Button>

Ou assim, dependendo do tipo de botão que você quer criar.

<Button>Button</Button>

Bem fácil até aqui, né?

DatePicker

Um componente que acho muito interessante na biblioteca Ant Design é o datepicker. Ele é muito bonito visualmente e também é altamente personalizável. Este é um componente para selecionar datas.

Vamos inserir ele no nosso projeto assim.

O primeiro passo é importar o Datepicker no arquivo em que vamos usar ele, igual fizemos com o componente do botão:

import { DatePicker } from 'antd';

E depois disso vamos criar o componente no nosso arquivo:

<DatePicker onChange={onChange} />

Ao salvar e atualizar, pode ver que da um erro e para corrigir esse erro vamos precisar implementar essa função “onChange” que é executada toda vez que a data é alterada no componente:

const onChange = (date, dateString) => {
  console.log(date, dateString);
};

Agora com o console aberto, quando alteramos a data, podemos ver a função sendo executada.
O primeiro parâmetro dessa função é um objeto do tipo “Date” e o segundo parâmetro é a data convertida em string.

Responsividade e Temas no Ant Design

Agora vou ensinar como personalizar um tema de forma bem rápida.

Para isso, o primeiro passo é abrir o arquivo src/index.js e importar o componente “ConfigProvider”:

import { ConfigProvider } from 'antd';

Depois disso vamos substituir a tag 

<React.StrictMode>

Pela tag 

<ConfigProvider direction="rtl">

O arquivo então ficará assim:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ConfigProvider } from 'antd';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ConfigProvider direction="rtl">
    <App />
  </ConfigProvider>
);


reportWebVitals();

Salve, execute e confira se está tudo funcionando certinho até aqui.

Personalizando nosso tema no Ant Design

Agora vamos adicionar a propriedade “theme” no nosso componente “ConfigProvider” para iniciar a personalização do tema.

Ele recebe um objeto como parâmetro e dentro dele terá outro objeto com o índice “token” que também é um objeto. Dentro de “token” terá a string “colorPrimary” e aqui iremos colocar o hexadecimal da cor que queremos que seja a cor primária do tema.
Nesse exemplo vou utilizar uma cor amarela igual a cor principal do “Programando Juntos”:

<ConfigProvider theme={{
      token: {
        colorPrimary: '#FFF23B,
      },
    }}
 direction="rtl">

Aqui você pode ver que onde era azul, ficou tudo amarelo. Isso facilita quando você quer aplicar as cores do seu negócio em um layout construído com Ant Design. 

Bem prático, né?

Recursos Adicionais e Documentação do Ant Design

Existem muitos recursos adicionais no Ant Design como ícones, animações e vários utilitários que com certeza vão te ajudar a criar suas interfaces cada vez mais bonitas, intuitivas e padronizadas.


Link de recursos extras: https://ant.design/docs/resources

Agradecimentos 🙂

Muito obrigado por ler até aqui, e se eu te ajudei de alguma forma, considere compartilhar esse artigo com algum amigo que também está iniciando na área de programação.


Não se esqueça de se inscrever no nosso canal para poder ficar por dentro de todas as novidades.

Aqui temos um outro artigo do nosso blog que pode te interessar: Typed.JS – Tutorial – PT-BR

Até a próxima, pessoal o/

Você pode gostar...