Chakra memberi Anda komponen sederhana dengan gaya yang bersih dan dapat digunakan.

Menata aplikasi dengan CSS khusus semuanya menyenangkan hingga proyek menjadi semakin kompleks. Tantangannya terletak pada penataan dan pemeliharaan desain yang konsisten di seluruh aplikasi.

Meskipun Anda masih dapat menggunakan CSS, seringkali lebih efektif menggunakan pustaka penataan UI seperti Chakra UI. Pustaka ini menyediakan cara cepat dan mudah untuk menata aplikasi Anda menggunakan komponen UI dan props utilitas yang telah ditentukan sebelumnya.

Memulai Dengan Chakra UI di Aplikasi React

Untuk memulai UI Cakra, silakan dan, scaffold aplikasi React dasar menggunakan create-react-app memerintah. Alternatifnya, Anda bisa gunakan Vite untuk membuat proyek React.

Selanjutnya, instal dependensi ini:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Anda dapat menemukan kode proyek ini di dalamnya GitHub gudang.

Tambahkan Penyedia Tema Chakra

Setelah Anda menginstal dependensi ini, Anda perlu menggabungkan aplikasi dengan

instagram viewer
Penyedia Chakra. Anda dapat menambahkan penyedia di indeks.jsx, main.jsx, atau Aplikasi.jsx sebagai berikut:

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(



 </ChakraProvider>
 </React.StrictMode>,
)

Membungkus aplikasi dengan Penyedia Chakra diperlukan untuk mengakses komponen dan properti gaya Chakra UI di seluruh aplikasi Anda.

Alihkan Tema yang Berbeda

Chakra UI menyediakan tema bawaan bawaan yang mencakup dukungan untuk mode terang, gelap, dan warna sistem. Namun, Anda dapat menyesuaikan lebih lanjut tema UI aplikasi Anda dan properti gaya lainnya dalam objek tema seperti yang ditentukan dalam Dokumentasi Chakra.

Untuk mengganti tema gelap dan terang, buat a komponen/ThemeToggler.jsx berkas di src direktori dan sertakan kode berikut.

import React from'react'
import { useColorMode, Box, IconButton} from'@chakra-ui/react';
import { SunIcon, MoonIcon } from'@chakra-ui/icons'
exportdefaultfunctionThemeToggler() {
const { colorMode, toggleColorMode } = useColorMode();
return (
"center" py={4} >
 icon={colorMode 'light'? <MoonIcon />: <SunIcon />}
 onClick={toggleColorMode}
 variant="ghost"
 />
Toggle Theme</h2>
 </Box>
 );
}

Sekarang, lanjutkan, dan impor paket ikon:

npm i @chakra-ui/icons

Itu Pengalih Tema komponen akan merender tombol yang memungkinkan pengguna beralih antara tema terang dan gelap di aplikasi.

Komponen ini mengakses mode warna saat ini gunakanMode Warna kait dan gunakan beralihWarnaMode berfungsi untuk beralih antar mode.

Itu Tombol Ikon komponen mengambil karakteristik ikon sekaligus memiliki kemampuan tombol yang dapat diklik.

Buat UI Formulir Masuk

Buat yang baru Masuk.jsx berkas di komponen direktori, dan tambahkan kode berikut ke dalamnya:

Pertama, tambahkan impor ini.

import React, { useState } from'react';
import { 
 Box,
 Button,
 Card,
 CardBody,
 Center,
 Flex,
 FormControl,
 FormLabel,
 Heading,
 HStack,
 Input,
 Stack,
 VStack,
 useColorMode,
} from'@chakra-ui/react';

Setelah mengimpor komponen UI ini, tentukan komponen fungsional React dan komponen container utama yang akan menampung semua elemen untuk antarmuka pengguna login.

functionLogin() {
const { colorMode } = useColorMode();
return (

"center" align="center" height="80vh" >



 </Stack>
 </Center>
 </Flex>
 </Box>
 );
}

exportdefault Login;

Itu Kotak komponen merender a div elemen—ini berfungsi sebagai blok penyusun dasar tempat Anda membangun semua komponen UI Chakra lainnya. Melenturkan, di sisi lain, adalah komponen Box dengan properti tampilannya disetel ke melenturkan. Ini berarti Anda dapat menggunakan properti flex untuk menata gaya komponen.

Baik komponen Center maupun Stack merupakan komponen tata letak, namun keduanya memiliki sedikit perbedaan dalam fungsinya. Komponen tengah bertanggung jawab untuk menyelaraskan semua komponen anak di pusatnya, sementara Stack, mengelompokkan elemen UI dan menambahkan spasi di antara elemen tersebut.

Sekarang, mari buat bagian header formulir. Komponen Header akan sangat membantu untuk bagian ini. Di dalam komponen Stack, tambahkan kode ini.

'6'>
 fontWeight='500'
 fontSize='30px'
 letterSpacing='-0.5px'
 >
 Login
 </Heading> 
</VStack>

Itu VStack komponen menumpuk elemen turunannya dalam arah vertikal. Selanjutnya, buat komponen kartu yang akan menampung form login dan elemen-elemennya.

'#f6f8fa' variant='outline' borderColor='#d8dee4' w='308px'
 size="lg" borderRadius={8} boxShadow="lg"
>



'4'>

'sm'
 color={colorMode 'dark'? 'black': 'black'}
 >Email Address</FormLabel>
 type='text'
 bg='white'
 borderColor='#d8dee4'
 size='sm'
 borderRadius='6px'
 color={colorMode 'dark'? 'black': 'black'}
 value={email}
 />
 </FormControl>



'space-between'>
'sm'
 color={colorMode 'dark'? 'black': 'black'}
 >Password</FormLabel>


as='a'
 href='#'
 variant='link'
 size='xs'
 color='#0969da'
 fontWeight='500'
 >
 Forgot password?
 </Button>
 </HStack>


 type='password'
 bg='white'
 borderColor='#d8dee4'
 size='sm'
 borderRadius='6px'
 color={colorMode 'dark'? 'black': 'black'}
 value={password}
 />
 </FormControl>


 type="submit"
 bg='#2da44e'
 color='white'
 size='sm'
 _hover={{ bg: '#2c974b' }}
 _active={{ bg: '#298e46' }}
 >
 Sign in
 </Button>
 </Stack>
 </form>
 </CardBody>
 </Card>

Silakan dan perbarui Aplikasi.jsx file untuk mengimpor Login, serta komponen ThemeToggler.

import React from'react'
import Login from'./components/login'
import ThemeToggler from'./components/ThemeToggler'
exportdefaultfunctionApp() {
return (




 </div>
 )
}

Besar! Mulai server pengembangan untuk memperbarui perubahan.

npm run dev

Sekarang, setelah halaman dimuat di browser, halaman tersebut akan menampilkan tema mode cahaya default.

Sekarang, klik Alihkan Tema tombol ikon untuk mengganti mode tema.

Mengelola Status Formulir Menggunakan React Hooks

Saat ini, formulir login hanya berisi dua kolom input dan tombol masuk. Untuk membuatnya berfungsi, mari kita mulai dengan menerapkan logika pengelolaan negara menggunakan kait React.

Tentukan status berikut di dalam komponen fungsional Login.

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

Selanjutnya, tambahkan dalam perubahan fungsi handler yang akan mendengarkan perubahan pada kolom input, menangkap input, dan memperbarui status email dan kata sandi yang sesuai.

Tambahkan pernyataan kode ini ke kolom input.

onChange={(e)=> { setEmail(e.target.value)}}
onChange={(e)=> { setPassword(e.target.value)}}

Dengan perubahan ini, Anda kini menangkap masukan pengguna.

Menerapkan Validasi Formulir dan Penanganan Kesalahan Dengan Fitur Bawaan Chakra UI

Sekarang, tambahkan fungsi handler yang akan memproses input dan mengembalikan hasil yang sesuai. Di membentuk tag pembuka elemen, tambahkan diKirim fungsi handler sebagai berikut.

Selanjutnya, tentukan menanganiKirim fungsi. Tepat di bawah negara bagian yang telah Anda tentukan, sertakan kode berikut.

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('');
 }
};

Ini tidak sinkron menanganiKirim fungsi akan terpicu ketika seseorang mengirimkan formulir. Fungsi ini menyetel status pemuatan ke true—mensimulasikan tindakan pemrosesan. Anda dapat merender spinner pemuatan Chakra UI untuk memberikan isyarat visual kepada pengguna.

Selain itu, fungsi handleSubmit akan memanggil login pengguna fungsi yang menggunakan email dan kata sandi sebagai parameter untuk memvalidasinya.

Simulasikan Permintaan API Otentikasi

Untuk memverifikasi bahwa input yang diberikan oleh pengguna valid, Anda dapat menyimulasikan panggilan API dengan mendefinisikan login pengguna fungsi yang akan memverifikasi kredensial login serupa dengan bagaimana API backend melakukannya.

Tepat di bawah fungsi handleSubmit, tambahkan kode ini:

const userLogin = async ({ email, password }) => {
returnnewPromise((resolve, reject) => {
 setTimeout(() => {
if (email 'test@email.com' && password 'password') {
 resolve();
 } else {
 reject();
 }
 }, 1000);
 });
};

Kode ini mendefinisikan fungsi asinkron yang menjalankan logika validasi logika sederhana.

Fitur UI Penanganan Kesalahan Chakra.

Anda dapat memberikan umpan balik visual yang sesuai kepada pengguna berdasarkan interaksi mereka pada formulir dengan menggunakan komponen umpan balik Chakra. Untuk melakukannya, mulailah dengan mengimpor komponen ini dari perpustakaan UI Chakra.

Alert, AlertIcon, AlertTitle, CircularProgress

Sekarang, tambahkan kode berikut tepat di bawah tag pembuka elemen formulir.

{error && !isLoggedIn && 
'error' variant='solid'> 

{error}</AlertTitle>
 </Alert>
}
{isLoggedIn && ( 
"success" variant='solid'>

{success}</AlertTitle>
 </Alert>
)}

Terakhir, lakukan pembaruan pada tombol kirim untuk menyertakan komponen pemintal pemuatan, CircularProgress.

{isLoading
? (<CircularProgressisIndeterminatesize="24px"color="teal" />)
: ('Sign In')}

Inilah yang akan dilihat pengguna setelah mereka berhasil masuk:

Jika terjadi kesalahan pada proses login, akan muncul respon seperti ini:

Tingkatkan Proses Pengembangan Anda Dengan Chakra UI

Chakra UI menyediakan serangkaian komponen UI yang dirancang dengan baik dan dapat disesuaikan yang dapat Anda gunakan untuk membangun dengan cepat Bereaksi UI. Terlepas dari seberapa sederhana atau rumit desain Anda, Chakra memiliki komponen untuk hampir semua UI tugas.