Client-Komponenten im NextJS-Framework

Lassen Sie uns nun unsere Server- Komponente in eine Client-Komponente umwandeln. Dafür schreiben wir am Anfang der Komponentendatei die Direktive 'use client':

src/app/test/page.jsx'use client';

export default function Test() {
  return <h1>hello, user!</h1>;
}

Nun werden uns States zugänglich, die via useState erstellt werden. Lassen Sie uns zur Veranschaulichung einen State erstellen und dessen Inhalt im Markup ausgeben:

src/app/test/page.jsx'use client';

import { useState } from 'react';

export default function Test() {
  let [name, setName] = useState('user');
  return <h1>hello, {name}!</h1>;
}

Задание 1

Erstellen Sie eine Client-Komponente mit zwei Input-Feldern und einem Button. Es sollen Zahlen in die Input-Felder eingegeben werden können. Bei Klick auf den Button geben Sie in einem Absatz die Summe der eingegebenen Zahlen aus.

Задание 2

Entfernen Sie die Direktive 'use client'. Stellen Sie sicher, dass NextJS in diesem Fall einen Fehler ausgibt, weil States nicht in Server-Komponenten verwendet werden können.