×

Cài đặt thư viện Ant Design trong JavaScript

Avatar of admin
admin 1 Views

Ant Design (AntD) là một thư viện giao diện người dùng (UI) phổ biến dành cho React. Nó cung cấp các thành phần sẵn có và phong phú, được thiết kế để nhanh chóng tạo ra các ứng dụng web giao diện đẹp và chuyên nghiệp. Trong bài viết này, chúng ta sẽ khám phá cách cài đặt thư viện Ant Design trong một dự án JavaScript, với từng bước chi tiết và các lưu ý quan trọng.

1. Giới thiệu về Ant Design

1.1. Ant Design là gì?

Ant Design là một thư viện UI mã nguồn mở, được phát triển bởi Alibaba và cộng đồng lập trình viên trên toàn thế giới. Với mục tiêu cung cấp một hệ thống thiết kế và phát triển giao diện người dùng nhất quán và dễ sử dụng, Ant Design đã trở thành một trong những lựa chọn hàng đầu cho các nhà phát triển web sử dụng React.

1.2. Tại sao nên sử dụng Ant Design?

  • Thiết kế nhất quán: Ant Design tuân thủ các nguyên tắc thiết kế nhất quán, giúp tạo ra giao diện người dùng trực quan và dễ sử dụng.
  • Thành phần phong phú: Thư viện cung cấp nhiều thành phần UI có sẵn, giúp giảm thiểu thời gian phát triển.
  • Dễ dàng tùy biến: Các thành phần trong Ant Design dễ dàng tùy biến để phù hợp với nhu cầu cụ thể của từng ứng dụng.
  • Cộng đồng mạnh: Với một cộng đồng phát triển lớn mạnh, Ant Design nhận được nhiều sự hỗ trợ và cập nhật thường xuyên.

2. Cài đặt Ant Design trong dự án JavaScript

2.1. Bước 1: Tạo dự án React

Trước tiên, chúng ta cần tạo một dự án React mới. Sử dụng Create React App để khởi tạo dự án:

npx create-react-app my-ant-design-app
cd my-ant-design-app

Bước này sẽ tạo ra một cấu trúc dự án React cơ bản với các tập tin cần thiết.

2.2. Bước 2: Cài đặt Ant Design

Sau khi tạo xong dự án React, bạn cần cài đặt thư viện Ant Design. Chạy lệnh sau trong thư mục gốc của dự án:

npm install antd

Lệnh này sẽ tải xuống và cài đặt Ant Design vào dự án của bạn.

2.3. Bước 3: Cài đặt các dependencies cần thiết

Để Ant Design hoạt động tốt và có khả năng tùy chỉnh giao diện, chúng ta cần thêm một số dependencies khác như babel-plugin-import và less.

npm install --save-dev babel-plugin-import less less-loader

2.4. Bước 4: Cấu hình babel-plugin-import

Mở tệp package.json và thêm cấu hình babel-plugin-import. Thêm đoạn mã sau vào mục "babel":

"babel": {
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
  ]
}

2.5. Bước 5: Sử dụng Less để tùy chỉnh Ant Design

Nếu bạn muốn tùy biến giao diện của Ant Design, bạn cần cấu hình Less để có thể chỉnh sửa các biến Less của Ant Design. Mở tệp config-overrides.js (nếu chưa có, hãy tạo tệp này) và thêm đoạn mã sau:

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const { getThemeVariables } = require('antd/dist/theme');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      modifyVars: getThemeVariables({
        dark: true, // Enable dark mode
        compact: true, // Enable compact mode
      }),
      javascriptEnabled: true,
    },
  })
);

Nhờ cấu hình này, bạn có thể sử dụng Less để thay đổi các biến giao diện của Ant Design.

3. Sử dụng các thành phần Ant Design trong ứng dụng

3.1. Import các thành phần Ant Design

Để bắt đầu sử dụng các thành phần của Ant Design, bạn cần import chúng vào file JavaScript hoặc JSX của mình. Ví dụ:

import React from 'react';
import { Button } from 'antd';

const App = () => (
  <div className="App">
    <Button type="primary">Primary Button</Button>
  </div>
);

export default App;

3.2. Tùy biến giao diện các thành phần

Như đã đề cập ở phần trên, bạn có thể sử dụng Less để tùy chỉnh giao diện của các thành phần Ant Design. Ví dụ, để thay đổi màu chính (primary color), bạn có thể chỉnh sửa biến tương ứng trong tệp config-overrides.js:

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      modifyVars: { '@primary-color': '#1DA57A' },
      javascriptEnabled: true,
    },
  })
);

3.3. Sử dụng biểu tượng và các thành phần khác

Ant Design cung cấp một bộ các biểu tượng phong phú mà bạn có thể dễ dàng sử dụng trong ứng dụng của mình. Ví dụ:

import React from 'react';
import { Icon } from 'antd';

const App = () => (
  <div className="App">
    <Icon type="smile" theme="outlined" />
  </div>
);

export default App;

3.4. Xây dựng bố cục ứng dụng với Ant Design

Ant Design cung cấp các thành phần bố cục như Layout, Header, Sider, Content, và Footer để giúp bạn xây dựng bố cục ứng dụng một cách dễ dàng. Ví dụ:

import React from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
const { Header, Content, Footer } = Layout;

const App = () => (
  <Layout>
    <Header>
      <div className="logo" />
      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
        <Menu.Item key="1">nav 1</Menu.Item>
        <Menu.Item key="2">nav 2</Menu.Item>
        <Menu.Item key="3">nav 3</Menu.Item>
      </Menu>
    </Header>
    <Content style={{ padding: '0 50px' }}>
      <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>List</Breadcrumb.Item>
        <Breadcrumb.Item>App</Breadcrumb.Item>
      </Breadcrumb>
      <div className="site-layout-content" style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
    </Content>
    <Footer style={{ textAlign: 'center' }}>Ant Design ©2023 Created by Ant UED</Footer>
  </Layout>
);

export default App;

3.5. Sử dụng Form và các thành phần điều khiển

Ant Design cung cấp các thành phần điều khiển như Form, Input, và Button, giúp bạn nhanh chóng xây dựng các form nhập liệu. Ví dụ:

import React from 'react';
import { Form, Input, Button, Checkbox } from 'antd';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const DemoForm = () => {
  const onFinish = values => {
    console.log('Success:', values);
  };

  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default DemoForm;

4. Tích hợp Ant Design với các công cụ quản lý trạng thái

4.1. Sử dụng Redux với Ant Design

Nếu bạn đang sử dụng Redux để quản lý trạng thái ứng dụng, bạn có thể dễ dàng tích hợp Ant Design với Redux. Dưới đây là một ví dụ đơn giản:

  1. Cài đặt Redux và React-Redux:
npm install redux react-redux
  1. Tạo store và sử dụng Provider:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import App from './App';

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
  1. Kết nối Component với Redux:
import React from 'react';
import { connect } from 'react-redux';
import { Button } from 'antd';

const App = ({ count, dispatch }) => (
  <div className="App">
    <Button type="primary" onClick={() => dispatch({ type: 'INCREMENT' })}>
      {count}
    </Button>
  </div>
);

const mapStateToProps = state => ({
  count: state.count,
});

export default connect(mapStateToProps)(App);
  1. Tạo reducer:
const initialState = {
  count: 0,
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

export default rootReducer;

4.2. Sử dụng Context API với Ant Design

Nếu bạn không muốn dùng Redux mà muốn dùng Context API, bạn cũng có thể dễ dàng tích hợp với Ant Design. Dưới đây là ví dụ đơn giản:

  1. Tạo Context và Provider:
import React, { createContext, useReducer } from 'react';

const initialState = { count: 0 };
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

export const Context = createContext();

export const Provider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <Context.Provider value={{ state, dispatch }}>
      {children}
    </Context.Provider>
  );
};
  1. Sử dụng Context trong Component:
import React, { useContext } from 'react';
import { Button } from 'antd';
import { Context } from './context';

const App = () => {
  const { state, dispatch } = useContext(Context);
  return (
    <div className="App">
      <Button type="primary" onClick={() => dispatch({ type: 'INCREMENT' })}>
        {state.count}
      </Button>
    </div>
  );
};

export default App;
  1. Kết hợp Provider với App:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from './context';

ReactDOM.render(
  <Provider>
    <App />
  </Provider>,
  document.getElementById('root')
);

5. Kiểm thử và triển khai ứng dụng

5.1. Kiểm thử ứng dụng

Trước khi triển khai ứng dụng, bạn cần kiểm thử kỹ lưỡng để đảm bảo mọi thứ hoạt động tốt. Sử dụng các công cụ như Jest và React Testing Library để viết các bài kiểm thử đơn vị (unit tests) và kiểm thử tích hợp (integration tests).

  1. Cài đặt Jest và React Testing Library:
npm install --save-dev jest @testing-library/react
  1. Viết bài kiểm thử đơn giản:
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { Provider } from './context';
import App from './App';

test('increments count', () => {
  const { getByText } = render(
    <Provider>
      <App />
    </Provider>
  );

  const button = getByText(/0/i);
  fireEvent.click(button);
  expect(button.textContent).toBe('1');
});
  1. Chạy bài kiểm thử:
npm test

5.2. Triển khai ứng dụng

Sau khi kiểm thử và đảm bảo ứng dụng hoạt động tốt, bạn có thể triển khai ứng dụng lên các dịch vụ Hosting như Vercel, Netlify, hoặc GitHub Pages. Trong bài viết này, chúng ta sẽ sử dụng Vercel:

  1. Cài đặt Vercel CLI:
npm install -g vercel
  1. Đăng nhập vào Vercel:
vercel login
  1. Triển khai ứng dụng:
vercel

Ứng dụng của bạn sẽ được triển khai và bạn sẽ nhận được URL mà bạn có thể chia sẻ với người dùng.

Kết luận

Ant Design là một thư viện UI mạnh mẽ và dễ sử dụng cho các ứng dụng React. Bằng cách tuân theo các bước cài đặt và cấu hình được mô tả trong bài viết này, bạn có thể nhanh chóng bắt đầu sử dụng Ant Design trong dự án của mình. Hãy luôn kiểm thử kỹ lưỡng và tối ưu hóa mã nguồn để đảm bảo ứng dụng hoạt động hiệu quả nhất. Chúc bạn thành công!

Comments

Bài viết liên quan