Το Material UI (MUI) είναι μια δημοφιλής βιβλιοθήκη στοιχείων που εφαρμόζει το σύστημα Σχεδιασμού Υλικού της Google. Παρέχει ένα ευρύ φάσμα προ-ενσωματωμένων στοιχείων διεπαφής χρήστη που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε λειτουργικές και οπτικά ελκυστικές διεπαφές.
Παρόλο που έχει σχεδιαστεί για το React, μπορείτε να επεκτείνετε τις δυνατότητές του σε άλλα πλαίσια εντός του οικοσυστήματος του React, όπως το Next.js.
Πίνακας περιεχομένων
Ξεκινώντας με το React Hook Form and Material UI
React Hook Form είναι μια δημοφιλής βιβλιοθήκη που παρέχει έναν απλό και δηλωτικό τρόπο δημιουργίας, διαχείρισης και επικύρωσης φορμών.
Με την ενσωμάτωση Διεπαφή χρήστη υλικού Τα στοιχεία και τα στυλ διεπαφής χρήστη, μπορείτε να δημιουργήσετε όμορφες φόρμες που είναι εύχρηστες και να εφαρμόσετε μια συνεπή σχεδίαση στην εφαρμογή Next.js.
Για να ξεκινήσετε, δημιουργήστε ένα έργο Next.js τοπικά. Για τους σκοπούς αυτού του οδηγού, εγκαταστήστε την πιο πρόσφατη έκδοση του Next.js που χρησιμοποιεί τον κατάλογο εφαρμογών.
npx create-next-app@latest next-project --app
Στη συνέχεια, εγκαταστήστε αυτά τα πακέτα στο έργο σας:
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
Ακολουθεί μια προεπισκόπηση του τι θα δημιουργήσετε:
Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό GitHub αποθήκη.
Δημιουργία και διαμόρφωση φορμών
Το React Hook Form παρέχει μια ποικιλία από βοηθητικές λειτουργίες, συμπεριλαμβανομένου του γάντζου useForm.
Αυτό το άγκιστρο απλοποιεί τη διαδικασία χειρισμού της κατάστασης φόρμας, την επικύρωση εισόδου και την υποβολή, απλοποιώντας τις θεμελιώδεις πτυχές της διαχείρισης φόρμας.
Για να δημιουργήσετε μια φόρμα που χρησιμοποιεί αυτό το άγκιστρο, προσθέστε τον ακόλουθο κώδικα σε ένα νέο αρχείο, src/components/form.js.
Αρχικά, προσθέστε τις απαιτούμενες εισαγωγές για τα πακέτα React Hook Form και MUI:
"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';
Το MUI παρέχει μια συλλογή από έτοιμα προς χρήση στοιχεία διεπαφής χρήστη που μπορείτε να προσαρμόσετε περαιτέρω περνώντας στηρίγματα styling.
Ωστόσο, εάν θέλετε περισσότερη ευελιξία και έλεγχο στη σχεδίαση διεπαφής χρήστη, μπορείτε να επιλέξετε να χρησιμοποιήσετε τη μέθοδο στυλ για να διαμορφώσετε τα στοιχεία διεπαφής χρήστη με ιδιότητες CSS. Σε αυτήν την περίπτωση, μπορείτε να διαμορφώσετε τα κύρια στοιχεία της φόρμας: το κύριο κοντέινερ, την ίδια τη φόρμα και τα πεδία κειμένου εισαγωγής.
Ακριβώς κάτω από τις εισαγωγές, προσθέστε αυτόν τον κωδικό:
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>
</>
);
}
Τέλος, εισαγάγετε αυτό το στοιχείο στο αρχείο σας app/page.js. Διαγράψτε όλο τον κώδικα του boilerplate Next.js και ενημερώστε τον με τα εξής:
import Form from 'src/components/Form'export default function Home() {
return (
<main >
<Form />
</main>
)
}
Ξεκινήστε τον διακομιστή ανάπτυξης και θα πρέπει να δείτε μια βασική φόρμα με δύο πεδία εισαγωγής και ένα κουμπί υποβολής στο πρόγραμμα περιήγησής σας.
Επικύρωση φόρμας χειρισμού
Η φόρμα φαίνεται υπέροχη, αλλά δεν κάνει τίποτα ακόμα. Για να το κάνετε λειτουργικό, πρέπει να προσθέσετε κάποιο κωδικό επικύρωσης. Οι λειτουργίες του βοηθητικού προγράμματος useForm hook θα σας φανούν χρήσιμες κατά τη διαχείριση και την επικύρωση των εισόδων χρήστη.
Αρχικά, ορίστε την ακόλουθη μεταβλητή κατάστασης για να διαχειριστείτε την τρέχουσα κατάσταση της φόρμας, ανάλογα με το αν ένας χρήστης έχει παράσχει τα σωστά διαπιστευτήρια. Προσθέστε αυτόν τον κώδικα μέσα στο λειτουργικό στοιχείο:
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
Στη συνέχεια, δημιουργήστε μια συνάρτηση χειριστή για να επικυρώσετε τα διαπιστευτήρια. Αυτή η συνάρτηση θα προσομοιώσει ένα αίτημα API HTTP που εμφανίζεται συνήθως όταν οι εφαρμογές πελάτη αλληλεπιδρούν με ένα API ελέγχου ταυτότητας backend.
const onSubmit = (data) => {
if (data.username === 'testuser' && data.password === 'password123') {
setFormStatus({ success: true, error: '' });
} else {
setFormStatus({ success: false, error: 'Invalid username or password' });
}
};
Προσθέστε μια λειτουργία χειρισμού συμβάντων onClick στο στοιχείο του κουμπιού—μεταβιβάζοντάς το ως βάση—για να ενεργοποιήσετε τη λειτουργία onSubmit όταν ένας χρήστης κάνει κλικ στο κουμπί υποβολής.
onClick={handleSubmit(onSubmit)}
Η τιμή της μεταβλητής κατάστασης formStatus είναι σημαντική γιατί θα καθορίσει τον τρόπο με τον οποίο παρέχετε σχόλια στον χρήστη. Εάν ο χρήστης εισάγει τα σωστά διαπιστευτήρια, ενδέχεται να εμφανιστεί ένα μήνυμα επιτυχίας. Εάν είχατε άλλες σελίδες στην εφαρμογή Next.js, θα μπορούσατε να τις ανακατευθύνετε σε διαφορετική σελίδα.
Θα πρέπει επίσης να παρέχετε τα κατάλληλα σχόλια εάν τα διαπιστευτήρια είναι λανθασμένα. Το Material UI προσφέρει ένα εξαιρετικό στοιχείο ανατροφοδότησης που μπορείτε να χρησιμοποιήσετε παράλληλα με την τεχνική απόδοσης υπό όρους του React για να ενημερώσετε τον χρήστη, με βάση την τιμή του formStatus.
Για να το κάνετε αυτό, προσθέστε τον ακόλουθο κώδικα ακριβώς κάτω από την ετικέτα ανοίγματος StyledForm.
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
Τώρα, για να καταγράψετε και να επικυρώσετε τα δεδομένα εισόδου χρήστη, μπορείτε να χρησιμοποιήσετε τη συνάρτηση εγγραφής για να καταχωρίσετε τα πεδία εισαγωγής της φόρμας, να παρακολουθήσετε τις τιμές της και να καθορίσετε τους κανόνες επικύρωσης.
Αυτή η συνάρτηση λαμβάνει πολλά ορίσματα, συμπεριλαμβανομένου του ονόματος του πεδίου εισαγωγής και ενός αντικειμένου παραμέτρων επικύρωσης. Αυτό το αντικείμενο καθορίζει τους κανόνες επικύρωσης για το πεδίο εισαγωγής, όπως το συγκεκριμένο μοτίβο και το ελάχιστο μήκος.
Συνεχίστε και συμπεριλάβετε τον ακόλουθο κώδικα ως βάση στο στοιχείο ονόματος χρήστη StyledTextField.
{...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'
},
})}
Τώρα, προσθέστε το ακόλουθο αντικείμενο ως βάση στο στοιχείο κωδικού πρόσβασης StyledTextField.
{...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>}
Φοβερός! Με αυτές τις αλλαγές, θα πρέπει να έχετε μια οπτικά ελκυστική, λειτουργική φόρμα φτιαγμένη με React Hook Form και Material UI.
Βελτιώστε την ανάπτυξη Next.js σας με βιβλιοθήκες από την πλευρά του πελάτη
Το Material UI και το React Hook Form είναι μόνο δύο παραδείγματα των πολλών εξαιρετικών βιβλιοθηκών από την πλευρά του πελάτη που μπορείτε να χρησιμοποιήσετε για να επιταχύνετε την ανάπτυξη του frontend του Next.js.
Οι βιβλιοθήκες από την πλευρά του πελάτη παρέχουν μια ποικιλία δυνατοτήτων που είναι έτοιμες για παραγωγή και προκατασκευασμένα στοιχεία που μπορούν να σας βοηθήσουν να δημιουργήσετε καλύτερες εφαρμογές front-end πιο γρήγορα και αποτελεσματικά.