סיכום: שרת ולקוח
חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 22 מתוך 47.
אתגר
בינוניסיכום הפרק: קבעו בעצמכם את הגבול בין השרת ללקוח.
הדף מציג מנות בשרת, אבל גם מציב onClick ישירות על כפתור, ולכן האפליקציה לא תוצג כלל. תקנו זאת בלי לסמן את הדף כרכיב לקוח:
- ב־
components/OpenHours.jsx, בנו רכיב לקוח ('use client'בשורה 1) שמחזיק משתנה בוליאני בשםopenבמצב ומציג כפתור עםid="toggle". הטקסט שלו צריך להיותShow hoursכשהוא סגור ו־Hide hoursכשהוא פתוח. - כשהוא פתוח, הרכיב גם מציג
<p>עםid="hours"והטקסטOpen 9am-5pm. כשהוא סגור, הפסקה הזאת לא צריכה להתקיים. - ב־
app/page.jsx, החליפו את הכפתור השבור ואת הפסקה שמוצגת תמיד ב־<OpenHours />, שיובא מ־'../components/OpenHours'. הכותרת ורשימת המנות נשארות בדיוק כפי שהן: הדף נשאר רכיב שרת.
נסו בעצמכם
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}