Cài đặt Ant Design

Giới thiệu:
Ant là tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant UED Team. Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, v.v…Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên toàn ứng dụng.

Ant hiện đang có hơn 25k star trên Github.

Có thể coi Ant Design cho React là tập hợp của hầu hết các thư viện về React. Nó đáp ứng được hầu hết các yêu cầu của project của bạn mà ban không phải cài thêm bất cứ thư viện nào nữa. Dưới đây là danh sách các component mà nó cung cấp:

General: Button, Icon
Layout: Grid, Layout
Navigation: Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps
Data Entry: AutoComplete, Checkbox, Cascader, DatePicker, Form, InputNumber, Input, Mention, Rate, Radio, Switch, Slider, Select, TreeSelect, Transfer, TimePicker, Upload
Data Display: Avatar, Badge, Collapse, Carousel, Card, Calendar, List, Popover, Tree, Tooltip, Timeline, Tag, Tabs, Table
Feedback: Alert, Drawer, Modal, Message, Notification, Progress, Popconfirm, Spin, Skeleton
Other: Anchor, BackTop, Divider, LocaleProvider

Cải đặt:
1.Tạo project reactjs tên là setup_ant

npx create-react-app setup_ant
cd setup_ant
npm start

Ở đây bạn nào dùng yarn thì dùng command yarn start để chạy project nhé
Project sẽ tự chạy ở browser với url mặc định là : http://localhost:3000
2.Cài đặt ant design:
Sử dụng npm hoặc yarn

npm install antd --save
# or
yarn add antd

3.Chạy demo show button:
Các bạn mở file D:\xampp\htdocs\setup_ant\src\App.js rồi thêm 2 dòng sau vào trên function App:

import Button from 'antd/lib/button';
import "antd/dist/antd.css";

Dòng thứ 1 là import component button
Dòng thừ 2 là import file css của ant design

Tiếp theo các bạn copy hết đoạn code sau paste đè vào function App nhé:

function App() {
  return (
    <div className="App">
        <Button type="primary">Hello gà coder</Button>
      </div>
  );
}

Cuối cùng chạy lệnh yarn start để xem kết quả nhé
Code cuối cùng của file App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Button from 'antd/lib/button';
import "antd/dist/antd.css";
function App() {
  return (
    <div className="App">
        <Button type="primary">Hello gà coder</Button>
      </div>
  );
}

export default App;

Nếu thấy hiển thị như sau là bạn đã thành công: