Материал УИ (МУИ) је популарна библиотека компоненти која имплементира Гоогле-ов систем дизајна материјала. Пружа широк спектар унапред изграђених УИ компоненти које можете користити за креирање функционалних и визуелно привлачних интерфејса.
Иако је дизајниран за Реацт, можете проширити његове могућности на друге оквире унутар Реацт-овог екосистема, као што је Нект.јс.
Преглед садржаја
Почетак рада са Реацт Хоок формом и корисничким интерфејсом материјала
Реацт Хоок Форма је популарна библиотека која пружа једноставан и декларативни начин за креирање, управљање и валидацију образаца.
Интеграцијом Материјални кориснички интерфејс Компоненте корисничког интерфејса и стилови, можете да креирате форме које добро изгледају које су једноставне за коришћење и примените конзистентан дизајн на своју Нект.јс апликацију.
Да бисте започели, поставите пројекат Нект.јс локално. За потребе овог водича, инсталирајте најновију верзију Нект.јс која користи директоријум Апп.
npx create-next-app@latest next-project --app
Затим инсталирајте ове пакете у свој пројекат:
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
Ево прегледа онога што ћете направити:
Код овог пројекта можете пронаћи у овоме ГитХуб репозиторијум.
Креирање и обликовање форми
Реацт Хоок Форм пружа разне услужне функције, укључујући усеФорм куку.
Ова кука поједностављује процес управљања стањем обрасца, валидације уноса и подношења, поједностављујући основне аспекте управљања обрасцима.
Да бисте креирали образац који користи ову куку, додајте следећи код у нову датотеку, срц/цомпонентс/форм.јс.
Прво додајте потребне увозе за Реацт Хоок Форм и МУИ пакете:
"use client"
import React, {useState} from 'react';
import { useForm } from 'react-hook-form';
import { TextField, Button as MuiButton, Alert } from '@mui/material';
import { styled } from '@mui/system';
МУИ обезбеђује колекцију компоненти корисничког интерфејса спремних за употребу које можете додатно да прилагодите преношењем стилских реквизита.
Без обзира на то, ако желите већу флексибилност и контролу над дизајном корисничког интерфејса, можете се одлучити да користите стилизовани метод за стилизовање елемената корисничког интерфејса помоћу ЦСС својстава. У овом случају можете да стилизујете главне компоненте обрасца: главни контејнер, сам образац и поља за унос текста.
Одмах испод увоза, додајте овај код:
const FormContainer = styled('div')({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
});const StyledForm = styled('form')({
width: '80%',
maxWidth: '400px',
padding: '20px',
borderRadius: '10px',
border: '2px solid #1E3A8A',
boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
backgroundColor: '#ffffff',
textAlign: 'center',
});
const StyledTextField = styled(TextField)({
marginBottom: '16px',
width: '100%',
});
Одржавање модуларне кодне базе је важно у развоју. Из тог разлога, уместо да збијате сав код у једну датотеку, требало би да дефинишете и стилизујете прилагођене компоненте у одвојеним датотекама.
На овај начин можете лако да увезете и користите ове компоненте у различитим деловима ваше апликације, чинећи ваш код организованијим и лакшим за одржавање.
Сада дефинишите функционалну компоненту:
export default function Form() {
const { register, handleSubmit, formState: { errors } } = useForm();
return (
<>
<FormContainer>
<StyledForm>
<StyledTextField
label="Username"
type="text"
/>
<StyledTextField
label="Password"
type="password"
/>
<MuiButton
type="submit"
variant="contained"
color="primary"
margin="5px"
> Submit </MuiButton>
</StyledForm>
</FormContainer>
</>
);
}
На крају, увезите ову компоненту у датотеку апп/паге.јс. Избришите сав шаблон Нект.јс кода и ажурирајте га следећим:
import Form from 'src/components/Form'export default function Home() {
return (
<main >
<Form />
</main>
)
}
Покрените развојни сервер и требало би да видите основни образац са два поља за унос и дугме за слање у вашем претраживачу.
Руковање валидацијом обрасца
Форма изгледа одлично, али још ништа не ради. Да би био функционалан, потребно је да додате неки код за валидацију. усеФорм хоок услужне функције ће бити корисне приликом управљања и провере корисничких уноса.
Прво дефинишите следећу променљиву стања да бисте управљали тренутним статусом обрасца, у зависности од тога да ли је корисник дао исправне акредитиве. Додајте овај код унутар функционалне компоненте:
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
Затим креирајте функцију руковања да бисте потврдили акредитиве. Ова функција ће симулирати ХТТП АПИ захтев који се обично јавља када клијентске апликације комуницирају са позадинским АПИ-јем за аутентификацију.
const onSubmit = (data) => {
if (data.username === 'testuser' && data.password === 'password123') {
setFormStatus({ success: true, error: '' });
} else {
setFormStatus({ success: false, error: 'Invalid username or password' });
}
};
Додајте функцију онЦлицк за руковање догађајима компоненти дугмета — проследите је као проп — да бисте покренули функцију онСубмит када корисник кликне на дугме за слање.
onClick={handleSubmit(onSubmit)}
Вредност променљиве стања формСтатус је важна јер ће одредити начин на који пружате повратне информације кориснику. Ако корисник унесе исправне акредитиве, можда ћете приказати поруку о успеху. Ако сте имали друге странице у апликацији Нект.јс, могли бисте да их преусмерите на другу страницу.
Такође треба да пружите одговарајуће повратне информације ако су акредитиви погрешни. Материјални кориснички интерфејс нуди одличну компоненту повратних информација коју можете користити заједно са Реацт-овом техником условног рендеровања да обавестите корисника, на основу вредности формСтатус.
Да бисте то урадили, додајте следећи код одмах испод почетне ознаке СтиледФорм.
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
Сада, да бисте ухватили и потврдили кориснички унос, можете користити функцију регистра да региструјете поља за унос обрасца, пратите његове вредности и одредите правила валидације.
Ова функција узима неколико аргумената, укључујући име поља за унос и објекат параметара валидације. Овај објекат специфицира правила валидације за поље за унос, као што су специфични образац и минимална дужина.
Само напред и укључите следећи код као проп у компоненту корисничког имена СтиледТектФиелд.
{...register('username', {
required: 'Username required',
pattern: {
value: /^[a-zA-Z0-9_.-]*$/,
message: 'Invalid characters used'
},
minLength: {
value: 6,
message: 'Username must be at least 6 characters'
},
})}
Сада додајте следећи објекат као проп у компоненту лозинке СтиледТектФиелд.
{...register('password', {
required: 'Password required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters'
},
})}
Додајте следећи код испод поља за унос корисничког имена да бисте пружили визуелне повратне информације о захтевима за унос.
Овај код ће покренути упозорење са поруком о грешци како би обавестио корисника о захтевима, како би се осигурало да исправи све грешке пре слања обрасца.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>}
На крају, укључите сличан код одмах испод текстуалног поља за унос лозинке:
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
Сјајно! Са овим променама, требало би да имате визуелно привлачан, функционалан облик направљен са Реацт Хоок Форм и Материал УИ.
Побољшајте развој Нект.јс помоћу библиотека на страни клијента
Материал УИ и Реацт Хоок Форм су само два примера многих одличних библиотека на страни клијента које можете користити да убрзате развој Нект.јс фронтенда.
Библиотеке на страни клијента пружају разне функције спремне за производњу и унапред изграђене компоненте које вам могу помоћи да брже и ефикасније изградите боље фронт-енд апликације.