Cách xây dựng biểu mẫu thân thiện với người dùng bằng Chakra UI trong React
Việc tạo kiểu cho các ứng dụng bằng CSS tùy chỉnh sẽ rất thú vị cho đến khi dự án trở nên phức tạp hơn. Thách thức nằm ở việc tạo kiểu và duy trì một thiết kế nhất quán trong suốt ứng dụng.
Việc sử dụng thư viện tạo kiểu giao diện người dùng (UI) chẳng hạn như Chakra UI có thể là một cách tiếp cận hiệu quả hơn so với việc chỉ dựa vào Cascading Style Sheets (CSS). Các thư viện này có lợi thế là cung cấp một phương tiện nhanh chóng để nâng cao hình thức trực quan của ứng dụng thông qua việc cung cấp các thành phần giao diện người dùng được xác định trước và các thuộc tính hữu ích.
Bắt đầu với giao diện người dùng Chakra trong ứng dụng React
Để bắt đầu với Chakra UI, hãy tiếp tục và xây dựng một ứng dụng React cơ bản bằng cách sử dụng lệnh create-react-app. Ngoài ra, bạn có thể sử dụng Vite để tạo dự án React.
Tiếp theo, cài đặt các phụ thuộc này:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
Mã nguồn của dự án này được đặt trong kho lưu trữ GitHub chuyên dụng của nó, có thể được truy cập bởi các bên quan tâm muốn xem xét hoặc đóng góp cho sự phát triển của nó.
Thêm nhà cung cấp chủ đề của Luân xa
Sau khi cài đặt thành công các phần phụ thuộc cần thiết, điều cần thiết là bao vây ứng dụng bằng ChakraProvider. Bước này có thể được thực hiện bằng cách kết hợp nhà cung cấp trong bất kỳ tệp nào nói trên, chẳng hạn như index.jsx, main.jsx hoặc App.jsx. Mã để làm như vậy sẽ giống với ví dụ được cung cấp bên dưới:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { ChakraProvider } from '@chakra-ui/react'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<ChakraProvider>
<App/>
</ChakraProvider>
</React.StrictMode>,
)
Để có quyền truy cập vào các thành phần và thuộc tính kiểu dáng của Chakra UI trong phạm vi của toàn bộ ứng dụng, bắt buộc phải bao quanh toàn bộ mã ứng dụng bằng ChakraProvider.
Chuyển đổi các chủ đề khác nhau
Chakra UI cung cấp một chủ đề mặc định được tạo sẵn bao gồm hỗ trợ các chế độ màu sáng, tối và hệ thống. Tuy nhiên, bạn có thể tùy chỉnh thêm chủ đề giao diện người dùng của ứng dụng và các thuộc tính kiểu khác trong đối tượng chủ đề như được chỉ định trong Tài liệu của Chakra.
Để tạo điều kiện thuận lợi cho việc xen kẽ giữa cách phối màu mờ và sáng, cần thiết lập thành phần ThemeToggler trong thư mục’thành phần’nằm trong thư mục’src’. Việc bao gồm mã được cung cấp sẽ kích hoạt chức năng này.
import React from 'react'
import { useColorMode, Box, IconButton} from '@chakra-ui/react';
import { SunIcon, MoonIcon } from '@chakra-ui/icons'
export default function ThemeToggler() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Box textAlign="center" py={4} >
<IconButton
icon={colorMode === 'light' ? <MoonIcon/> : <SunIcon/>}
onClick={toggleColorMode}
variant="ghost"/>
<h2>Toggle Theme</h2>
</Box>
);
}
Chắc chắn! Để tiếp tục nhập gói biểu tượng, vui lòng thực hiện lệnh sau trong trình soạn thảo mã của bạn hoặc IDE:pythonimport icon_package. Điều này sẽ cho phép bạn sử dụng các tính năng do gói cung cấp trong dự án của bạn.
npm i @chakra-ui/icons
Thành phần ThemeToggler được thiết kế để hiển thị phần tử chuyển đổi, cho phép người dùng dễ dàng chuyển đổi giữa các sơ đồ hình ảnh tương phản trong ứng dụng bằng cách chọn từ các tùy chọn có sẵn như “sáng” hoặc “tối”. Tính năng này mang lại trải nghiệm người dùng có thể thích ứng và đáp ứng sở thích cá nhân trong khi vẫn duy trì tính nhất quán với thiết kế tổng thể của nền tảng.
Phần tử cụ thể này truy xuất bảng màu hiện tại từ hook useColorMode và sử dụng hàm toggleColorMode để xen kẽ giữa các cấu hình màu khác nhau.
Thành phần IconButton kết hợp hiệu quả sự hấp dẫn trực quan và khả năng nhận biết của biểu tượng với chức năng tương tác của nút, kết hợp liền mạch hai thành phần này để tạo thành thành phần giao diện người dùng linh hoạt có thể dễ dàng kết hợp vào các bối cảnh thiết kế khác nhau.
Tạo giao diện người dùng biểu mẫu đăng nhập
Vui lòng tạo một tệp mới có tên “Login.jsx” trong thư mục “thành phần” và dán đoạn mã sau vào đó:
Đầu tiên, thêm các mục nhập này.
import React, { useState } from 'react';
import {
Box,
Button,
Card,
CardBody,
Center,
Flex,
FormControl,
FormLabel,
Heading,
HStack,
Input,
Stack,
VStack,
useColorMode,
} from '@chakra-ui/react';
Sau khi nhập các thành phần UI đã nói, người ta phải phân định thực thể chức năng React và cấu trúc ổ cắm chính sẽ đóng gói tất cả các thành phần cần thiết cho giao diện đồ họa người dùng đăng nhập.
function Login() {
const { colorMode } = useColorMode();
return (
<Box>
<Flex justify="center" align="center" height="80vh" >
<Center>
<Stack>
</Stack>
</Center>
</Flex>
</Box>
);
}
export default Login;
Thành phần Box là thành phần cơ bản trong việc hiển thị phần tử div và tạo thành nền tảng để xây dựng tất cả các thành phần UI Chakra khác. Ngược lại, Flex đại diện cho một phiên bản của thành phần Box có thuộc tính hiển thị đã được đặt thành flex, do đó cho phép tạo kiểu thông qua việc sử dụng các thuộc tính flex.
Mặc dù cả hai thành phần Center và Stack đều đóng vai trò là công cụ bố cục nhưng chúng thể hiện sự khác biệt tinh tế về chức năng. Cụ thể, thành phần Center tập trung vào việc định vị tất cả các thành phần con của nó tại điểm trung tâm, trong khi thành phần Stack tổng hợp các thành phần giao diện người dùng và kết hợp khoảng cách giữa các thành phần.
Bây giờ chúng ta sẽ xây dựng phần tiêu đề của biểu mẫu bằng cách sử dụng thành phần Tiêu đề, điều này sẽ tạo điều kiện thuận lợi cho nhiệm vụ này khá hiệu quả. Để đạt được điều này, người ta có thể chèn đoạn mã nói trên vào trong giới hạn của thành phần Stack.
<VStack spacing='6'>
<Heading
fontWeight='500'
fontSize='30px'
letterSpacing='-0.5px'
>
Login
</Heading>
</VStack>
Thành phần VStack sắp xếp các phần tử phụ của nó theo chiều dọc trong bố cục. Sau đó, xây dựng phần tử thẻ để đính kèm biểu mẫu đăng nhập và các thành phần liên quan của nó.
<Card bg='#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
size="lg" borderRadius={8} boxShadow="lg"
>
<CardBody>
<form>
<Stack spacing='4'>
<FormControl isRequired>
<FormLabel size='sm'
color={colorMode === 'dark' ? 'black' : 'black'}
>Email Address</FormLabel>
<Input
type='text'
bg='white'
borderColor='#d8dee4'
size='sm'
borderRadius='6px'
color={colorMode === 'dark' ? 'black' : 'black'}
value={email}
/>
</FormControl>
<FormControl isRequired>
<HStack justify='space-between'>
<FormLabel size='sm'
color={colorMode === 'dark' ? 'black' : 'black'}
>Password</FormLabel>
<Button
as='a'
href='#'
variant='link'
size='xs'
color='#0969da'
fontWeight='500'
>
Forgot password?
</Button>
</HStack>
<Input
type='password'
bg='white'
borderColor='#d8dee4'
size='sm'
borderRadius='6px'
color={colorMode === 'dark' ? 'black' : 'black'}
value={password}
/>
</FormControl>
<Button
type="submit"
bg='#2da44e'
color='white'
size='sm'
_hover={{ bg: '#2c974b' }}
_active={{ bg: '#298e46' }}
>
Sign in
</Button>
</Stack>
</form>
</CardBody>
</Card>
Vui lòng sửa đổi tệp App.js của bạn bằng cách kết hợp cả thành phần Đăng nhập và ThemeToggler , nếu bạn chưa làm như vậy.
import React from 'react'
import Login from './components/login'
import ThemeToggler from './components/ThemeToggler'
export default function App() {
return (
<div>
<ThemeToggler/>
<Login/>
</div>
)
}
Tuyệt vời, việc kích hoạt máy chủ phát triển sẽ cho phép chúng tôi áp dụng mọi sửa đổi được thực hiện đối với cơ sở mã.
npm run dev
Khi tải một trang web trong trình duyệt web, bản trình bày ban đầu thường là chủ đề chế độ ánh sáng mặc định.
Vui lòng nhấp vào nút “Chuyển đổi chủ đề” nằm ở đầu màn hình của bạn để chuyển đổi giữa các chủ đề màu khác nhau để có trải nghiệm trực quan hấp dẫn hơn.
Quản lý trạng thái biểu mẫu bằng React Hook
Để hiển thị biểu mẫu đăng nhập có chức năng, chúng tôi sẽ giới thiệu tính năng quản lý trạng thái bằng cách sử dụng React Hooks làm phương pháp lựa chọn chính để quản lý trạng thái ứng dụng một cách hiệu quả.
Để xác định các trạng thái khác nhau trong thành phần chức năng Đăng nhập, người ta có thể sử dụng nhiều kỹ thuật lập trình khác nhau. Ví dụ: các câu lệnh có điều kiện như mệnh đề if-else hoặc trường hợp chuyển đổi có thể được sử dụng để xác định trạng thái nào sẽ được kích hoạt dựa trên đầu vào của người dùng hoặc các yếu tố bên ngoài khác. Ngoài ra, các thư viện quản lý trạng thái như Redux hoặc MobX cũng có thể được sử dụng để quản lý và cập nhật các trạng thái này một cách có tổ chức hơn. Cuối cùng, cách tiếp cận cụ thể sẽ phụ thuộc vào yêu cầu và độ phức tạp của ứng dụng đang được phát triển.
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [success, setSuccess] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);
Sau đó, kết hợp chức năng xử lý sự kiện onChange để giám sát các thay đổi được thực hiện đối với các thành phần đầu vào, ghi lại giá trị của chúng và điều chỉnh các điều kiện email và mật khẩu nếu cần.
Hãy cân nhắc việc kết hợp các đoạn mã sau vào các trường nhập nói trên để nâng cao chức năng và trải nghiệm người dùng.
onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}
Việc triển khai sửa đổi giờ đây sẽ thu thập ý kiến đóng góp từ người dùng một cách hiệu quả.
Triển khai xác thực biểu mẫu và xử lý lỗi bằng các tính năng tích hợp của Chakra UI
Chắc chắn! Đây là ví dụ về cách bạn có thể triển khai điều này trong mã HTML:html function handSearch(event) {event.preventDefault();//ngăn chặn hành vi gửi biểu mẫu mặc địnhconst apiKey=‘YOUR_API_KEY’;//thay thế bằng keyconst API của bạn startDate=new Date(‘2023-01-01’);//đặt ngày tìm kiếm rangeconst endDate=new Date(‘2023-04-30’);//đặt ngày tìm kiếm rangeconst market=‘USD’;//đặt tiền tệ để tính tỷ giá hối đoái//
<form onSubmit={handleSubmit}>
Sau đó, thiết lập đặc tả chức năng cho phương thức handSubmit. Ngay bên dưới cấu hình trạng thái đã được mô tả, hãy bao gồm khối mã tiếp theo.
const handleSubmit = async event => {
event.preventDefault();
setIsLoading(true);
try {
await userLogin({ email, password });
setSuccess('Logged in successfully!');
setIsLoading(false);
setIsLoggedIn(true);
} catch (error) {
setError('Invalid username or password!');
setIsLoading(false);
setEmail('');
setPassword('');
}
};
Hàm handSubmit không đồng bộ được kích hoạt khi gửi biểu mẫu và nó đặt trạng thái tải thành true để mô phỏng hành động xử lý. Để chỉ ra điều này một cách trực quan cho người dùng, bạn có thể hiển thị vòng quay tải của Chakra UI trong giao diện ứng dụng của mình.
Hơn nữa, khi gửi dữ liệu biểu mẫu bằng hàm handSubmit, nó sẽ gọi hàm userLogin, hàm này chấp nhận địa chỉ email và mật khẩu làm tham số đầu vào cho mục đích xác thực.
Mô phỏng Yêu cầu API xác thực
Để đảm bảo tính hợp pháp của dữ liệu đầu vào do người dùng nhập, người ta có thể tạo một yêu cầu API mô phỏng thông qua việc triển khai hàm userLogin(), hàm này đánh giá tính xác thực của thông tin đăng nhập theo các tiêu chuẩn mong đợi từ back-end máy chủ.
Bên dưới hàm handSubmit, kết hợp đoạn mã sau:
const userLogin = async ({ email, password }) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (email === '[email protected]' && password === 'password') {
resolve();
} else {
reject();
}
}, 1000);
});
};
Mã hiện tại mô tả một hàm không đồng bộ bao gồm việc xác thực đơn giản lý luận logic.
Tính năng giao diện người dùng xử lý lỗi của Chakra.
Xem xét sự tương tác của bạn với biểu mẫu và tận dụng thư viện giao diện người dùng của Chakra, bạn có thể đưa ra phản hồi mang tính thông tin trực quan thông qua các thành phần phản hồi của nó. Để bắt đầu quá trình này, hãy bắt đầu bằng cách nhập các thành phần cụ thể đó từ kho tài nguyên của Luân xa.
Alert, AlertIcon, AlertTitle, CircularProgress
{error && !isLoggedIn &&
<Alert status='error' variant='solid'>
<AlertIcon />
<AlertTitle>{error}</AlertTitle>
</Alert>
}
{isLoggedIn && (
<Alert status="success" variant='solid'>
<AlertIcon/>
<AlertTitle>{success}</AlertTitle>
</Alert>
)}
Cuối cùng, kết hợp Thông tưProgress, một thành phần vòng quay tải, trong nút gửi bằng cách thực hiện điều chỉnh sau:
{isLoading
? (<CircularProgress isIndeterminate size="24px" color="teal"/>)
: ('Sign In')}
Sau khi đăng nhập thành công, người dùng sẽ có giao diện như sau:
Nếu có vấn đề phát sinh trong quá trình xác thực, người dùng sẽ được chào đón bằng một thông báo có tính chất này:
Cải thiện quá trình phát triển của bạn với Chakra UI
Giao diện người dùng Chakra cung cấp một loạt các thành phần giao diện người dùng được cá nhân hóa và được chế tạo trang nhã, tạo điều kiện thuận lợi cho việc xây dựng giao diện React nhanh chóng. Bất kể yêu cầu thiết kế của bạn là cơ bản hay phức tạp, Chakra bao gồm các thành phần có khả năng phục vụ gần như mọi chức năng UI có thể tưởng tượng được.