{"id":2056,"date":"2020-06-04T08:42:18","date_gmt":"2020-06-04T06:42:18","guid":{"rendered":"https:\/\/ways4.eu\/?p=2056"},"modified":"2022-01-13T21:40:36","modified_gmt":"2022-01-13T19:40:36","slug":"how-to-kollaborative-aufgabenliste-in-react","status":"publish","type":"post","link":"https:\/\/ways4.eu\/de\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/","title":{"rendered":"HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React"},"content":{"rendered":"

Nachdem nun Wunderlist<\/strong> ja leider Geschichte<\/em> ist wollen wir uns heute mal anschauen, wie man sich diesen – https:\/\/community-tasks.now.sh\/<\/a> – einfachen und kollaborativen Echtzeit-Tasklistendienst<\/strong> selbst erstellt.
\nBenutzer k\u00f6nnen damit eine neue Liste erstellen und diese mit Freunden \/ Kollegen teilen, um die Liste gemeinsam zu bearbeiten und vervollst\u00e4ndigen.<\/p>\n

\"\"<\/a><\/p>\n

Wir werden Functional React im Frontend und Supabase als Datenbank- und Echtzeit-Engine verwenden. (Was ist Supabase?)<\/a><\/p>\n

Wer die folgende Lekt\u00fcre \u00fcberspringen\u00a0 m\u00f6chte, findet den Quellcode der Anwendung hier: https:\/\/github.com\/smartDevel\/community-tasks<\/a><\/p>\n

Anderenfalls steigen wir nun in die Details ein ?<\/p>\n

1) Projektbasis erstellen<\/h3>\n

Daf\u00fcr nutzen wir create-react-app<\/a><\/p>\n

npx create-react-app community-tasks<\/code><\/p>\n

Nachdem die initiale Struktur erstellt wurde, werden wir unser Projekt etwas (re-) strukturieren, so dass es im Code-Editor in etwa so aussieht:<\/p>\n

\"VSCode<\/a>
VSCode Filestruktur<\/figcaption><\/figure>\n

index.js<\/code> wird unser Einstiegspunkt sein, an dem wir neue Listen<\/strong> erstellen, TodoList.js<\/code> wird die Liste<\/strong> sein, die wir erstellen, und wir werden alle unsere Daten<\/strong> aus Store.js<\/code> abrufen.<\/p>\n

Dann m\u00fcssen wir noch folgende Abh\u00e4ngigkeiten in unsere package.json<\/code> eintragen:<\/p>\n

\"package.json<\/a>
package.json abh\u00e4ngigkeiten<\/figcaption><\/figure>\n

und schlie\u00dflich das ganze noch via npm install<\/code>installieren.\u2640\ufe0f<\/p>\n

2) index.js<\/a><\/h3>\n

Wir f\u00fcgen unserem Basis-Router die Render-Funktion hinzu:<\/p>\n

\n
import<\/span> {<\/span> render<\/span> }<\/span> from<\/span> '<\/span>react-dom<\/span>'<\/span>\n\nrender<\/span>(<\/span>\n  <<\/span>div<\/span> className=<\/span>\"App\"<\/span>><\/span>\n    <<\/span>Router<\/span>><\/span>\n      <<\/span>Switch<\/span>><\/span>\n        <<\/span>Route<\/span> exact<\/span> path=<\/span>\"\/\"<\/span> component=<\/span>{<\/span>Home<\/span>}<\/span> \/><\/span>\n        {<\/span>\/* weitere Routen ab hier *\/<\/span>}<\/span>\n      <\/<\/span>Switch<\/span>><\/span>\n    <\/<\/span>Router<\/span>><\/span>\n  <\/<\/span>div<\/span>>,<\/span>\n  document<\/span>.<\/span>body<\/span>\n)<\/span>\n<\/code><\/pre>\n<\/div>\n
Danach bereiten wir unsere main-Komponente vor:<\/p>\n
\n
const\u00a0newList\u00a0=\u00a0async\u00a0(history)\u00a0=>\u00a0{\n\u00a0\u00a0const\u00a0list\u00a0=\u00a0await\u00a0createList(uuidv4());\n\u00a0\u00a0history.push(`\/?uuid=${list.uuid}`);\n};\nconst\u00a0Home\u00a0=\u00a0(props)\u00a0=>\u00a0{\n\u00a0 const\u00a0history\u00a0=\u00a0useHistory();\n\u00a0 const\u00a0uuid\u00a0=\u00a0queryString.parse(props.location.search).uuid;\n\u00a0 \/\/GIF-Animation\u00a0auf\u00a0wordpress\u00a0f\u00fcr\u00a0Startscreen-Bild\n\u00a0 const\u00a0imgStartscreen\u00a0=\u00a0\"https:\/\/ways4eu.files.wordpress.com\/2020\/06\/startscreengifanimationv04.gif\";\n  const lnkGithub = \"https:\/\/github.com\/smartDevel\/community-tasks\";\n  const lnkTutorial =\n    \"https:\/\/dev.to\/awalias\/howto-build-collaborative-realtime-task-lists-in-react-4k52\";\n  const lnkDatabase = \"https:\/\/supabase.io\";\n\n  if (uuid) return TodoList(uuid);\n\u00a0\u00a0else\u00a0{\n\u00a0\u00a0\u00a0\u00a0return\u00a0(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0className=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0className=\"section\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1>Kollaborative\u00a0Aufgabenlisten<\/h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<small>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Powered\u00a0by\u00a0<a\u00a0href={lnkDatabase}>Supabase<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/small>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0className=\"section\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0className=\"bNew\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onClick={()\u00a0=>\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newList(history);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Neue\u00a0Aufgabenliste\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0className=\"section\u00a0build\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0HowTo:\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<br\u00a0\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a\u00a0href={lnkTutorial}>Tutorial<\/a>\u00a0|\u00a0<a\u00a0href={lnkGithub}>Github<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/*\u00a0***\u00a0Alternative\u00a0mit\u00a0input-Feld\u00a0***\u00a0*\/}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=\"image\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src={imgStartscreen}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onClick={()\u00a0=>\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newList(history);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt=\"Neue\u00a0Aufgabenliste\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/*\u00a0***\u00a0Alternative\u00a0mit\u00a0Button\u00a0***\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onClick={()\u00a0=>\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newList(history)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0className=\"build-img\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src={imgStartscreen}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt=\"learn\u00a0how\u00a0to\u00a0build\u00a0this\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0*\/}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/*\u00a0***\u00a0Alternative\u00a0mit\u00a0Hyperlink\u00a0***\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a\u00a0onClick={()\u00a0=>\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newList(history)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0className=\"build-img\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src={imgStartscreen}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt=\"learn\u00a0how\u00a0to\u00a0build\u00a0this\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/a>\u00a0*\/}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0}\n};<\/pre>\n
Der wichtigste Teil<\/strong> hierbei ist, dass wir beim Klicken auf die Schaltfl\u00e4che „Liste erstellen“ eine Liste createList(uuidv4())<\/code> mit einer zuf\u00e4llig generierten UUID erstellen und diese dann mit useHistory ()<\/code> und history.push (...)<\/code> als Abfrageparameter an die aktuelle URL anh\u00e4ngen. Wir tun dies, damit der Benutzer die URL aus der URL-Leiste kopieren und teilen kann.<\/p>\n
Auch wenn ein neuer Benutzer einen Link mit uuid erh\u00e4lt – die Anwendung wei\u00df, dass sie die spezifische Aufgabenliste aus der Datenbank mit der angegebenen UUID<\/strong> nachschlagen muss, dies ist hier zu sehen:<\/p>\n<\/div>\n
\n
const\u00a0uuid\u00a0=\u00a0queryString.parse(props.location.search).uuid;<\/code><\/div>\n
\n
\n
if\u00a0(uuid)\u00a0return\u00a0TodoList(uuid);<\/code><\/div>\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
3) Store.js<\/a><\/h3>\n
Jetzt schauen wir uns an, wie wir die Daten in Echtzeit speichern, abrufen und \u00fcberwachen, damit den adressierten Nutzern die jeweils aktuelle Liste mit allen neuen und bereits abgeschlossenen Aufgaben angezeigt wird, ohne dass diese die Seite erneut aktualisieren m\u00fcssen.<\/p>\n
\n
import\u00a0{\u00a0useState,\u00a0useEffect\u00a0}\u00a0from\u00a0'react'<\/code><\/div>\n
import\u00a0{\u00a0createClient\u00a0}\u00a0from\u00a0'@supabase\/supabase-js'<\/code><\/div>\n
const\u00a0supabase\u00a0=\u00a0createClient(<\/code><\/div>\n
\u00a0\u00a0process.env.REACT_APP_SUPABASE_URL,<\/code><\/div>\n
\u00a0\u00a0process.env.REACT_APP_SUPABASE_KEY<\/code><\/div>\n
)<\/code><\/div>\n<\/div>\n<\/div>\n
Wir ben\u00f6tigen eine .env-Datei im Root- Verzeichnis<\/strong>, in der wir folgende Variablen speichern:<\/div>\n
\n
REACT_APP_SUPABASE_URL<\/span>=<\/span><meine-url>\nREACT_APP_SUPABASE_KEY<\/span>=<\/span><mein-key><\/code><\/pre>\n<\/div>\n
Um die individuellen Supabase-Anmeldeinformationen<\/strong> abzurufen, rufen wir app.supabase.io<\/a> auf, erstellen eine neue Organisation und ein neues Projekt und navigieren zur API-Seite, auf der die ben\u00f6tigten Informationen zu finden sind:<\/div>\n
\n
\"API-Ansicht<\/a>
API-Ansicht in supabase-Konfigurationsseite<\/figcaption><\/figure>\n
In der Supabase Konfiguration<\/strong> gehen wir anschlie\u00dfend zur Registerkarte SQL, auf der wir unsere beiden Tabellen Listen (lists)<\/strong> und Aufgaben (tasks)<\/strong> mit dem integrierten SQL-Interpreter erstellen. Dort werden wir folgende SQL-Befehle zum Erstellen der Tabellen eintragen und ausf\u00fchren lassen:<\/p>\n<\/div>\n
\n
CREATE<\/span> TABLE<\/span> lists<\/span> (<\/span>\n  uuid<\/span> text<\/span>,<\/span>\n  id<\/span> bigserial<\/span> PRIMARY<\/span> KEY<\/span>,<\/span>\n  inserted_at<\/span> timestamp<\/span> without<\/span> time<\/span> zone<\/span> DEFAULT<\/span> timezone<\/span>(<\/span>'utc'<\/span> ::<\/span> text<\/span>,<\/span> now<\/span>())<\/span> NOT<\/span> NULL<\/span>,<\/span>\n  updated_at<\/span> timestamp<\/span> without<\/span> time<\/span> zone<\/span> DEFAULT<\/span> timezone<\/span>(<\/span>'utc'<\/span> ::<\/span> text<\/span>,<\/span> now<\/span>())<\/span> NOT<\/span> NULL<\/span>\n);<\/span>\n\nCREATE<\/span> TABLE<\/span> tasks<\/span> (<\/span>\n  task_text<\/span> text<\/span> NOT<\/span> NULL<\/span>,<\/span>\n  complete<\/span> boolean<\/span> DEFAULT<\/span> false<\/span>,<\/span>\n  id<\/span> bigserial<\/span> PRIMARY<\/span> KEY<\/span>,<\/span>\n  list_id<\/span> bigint<\/span> REFERENCES<\/span> lists<\/span> NOT<\/span> NULL<\/span>,<\/span>\n  inserted_at<\/span> timestamp<\/span> without<\/span> time<\/span> zone<\/span> DEFAULT<\/span> timezone<\/span>(<\/span>'utc'<\/span> ::<\/span> text<\/span>,<\/span> now<\/span>())<\/span> NOT<\/span> NULL<\/span>,<\/span>\n  updated_at<\/span> timestamp<\/span> without<\/span> time<\/span> zone<\/span> DEFAULT<\/span> timezone<\/span>(<\/span>'utc'<\/span> ::<\/span> text<\/span>,<\/span> now<\/span>())<\/span> NOT<\/span> NULL<\/span>\n);<\/span>\n<\/code><\/pre>\n<\/div>\n
Nun k\u00f6nnen wir damit in Store.js die createList-Methode erstellen, die wir aus index.js aufrufen:
\n<\/span><\/span><\/p>\n
\n
export<\/span> const<\/span> createList<\/span> =<\/span> async<\/span> (<\/span>uuid<\/span>)<\/span> =><\/span> {<\/span>\n  try<\/span> {<\/span>\n    let<\/span> {<\/span> body<\/span> }<\/span> =<\/span> await<\/span> supabase<\/span>.<\/span>from<\/span>(<\/span>'<\/span>lists<\/span>'<\/span>).<\/span>insert<\/span>([{<\/span> uuid<\/span> }])<\/span>\n    return<\/span> body<\/span>[<\/span>0<\/span>]<\/span>\n  }<\/span> catch<\/span> (<\/span>error<\/span>)<\/span> {<\/span>\n    console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>error<\/span>'<\/span>,<\/span> error<\/span>)<\/span>\n  }<\/span>\n}<\/span>\n<\/code><\/pre>\n<\/div>\n
Hier ist der Rest des Codes zu Store.js abrufbar<\/a>. Die anderen wichtigen Punkte in diesem Code sind<\/p>\n
        supabase<\/span>\n          .<\/span>from<\/span>(<\/span>`tasks:list_id=eq.<\/span>${<\/span>list<\/span>.<\/span>id<\/span>}<\/span>`<\/span>)<\/span>\n          .<\/span>on<\/span>(<\/span>'<\/span>INSERT<\/span>'<\/span>,<\/span> (<\/span>payload<\/span>)<\/span> =><\/span> handleNewTask<\/span>(<\/span>payload<\/span>.<\/span>new<\/span>))<\/span>\n          .<\/span>on<\/span>(<\/span>'<\/span>UPDATE<\/span>'<\/span>,<\/span> (<\/span>payload<\/span>)<\/span> =><\/span> handleNewTask<\/span>(<\/span>payload<\/span>.<\/span>new<\/span>))<\/span>\n          .<\/span>subscribe<\/span>()<\/span><\/code><\/pre>\n
4) TodoList.js<\/a><\/h3>\n
F\u00fcr die TodoList-Komponente importieren wir zun\u00e4chst aus dem Store:<\/p>\n
\n
import<\/span> {<\/span> useStore<\/span>,<\/span> addTask<\/span>,<\/span> updateTask<\/span> }<\/span> from<\/span> '<\/span>.\/Store<\/span>'<\/span>\n<\/code><\/pre>\n<\/div>\n
und dann k\u00f6nnen wir diese\u00a0 wie \u00fcbliche State-Variablen verwenden:<\/p>\n
\n
export\u00a0const\u00a0TodoList\u00a0=\u00a0(uuid)\u00a0=>\u00a0{\n  const\u00a0[newTaskText,\u00a0setNewTaskText]\u00a0=\u00a0useState('')\n\u00a0\u00a0const\u00a0{\u00a0tasks,\u00a0setTasks,\u00a0list\u00a0}\u00a0=\u00a0useStore({\u00a0uuid\u00a0})\n\n\u00a0\u00a0return\u00a0(\n\u00a0\u00a0\u00a0\u00a0<div\u00a0className=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Link\u00a0to=\"\/\">Zur\u00fcck\/Neustart<\/Link>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1\u00a0className=\"section\">\u270d??\u2728Community\u00a0Aufgabenliste\u2728?\u00a0\u2714\ufe0f<\/h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0className=\"section\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Aufruf-Link\u00a0zum\u00a0Bearbeiten\u00a0und\u00a0Anzeigen:\u00a0<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input\u00a0className=\"inputField\"\u00a0type=\"text\"\u00a0readOnly\u00a0value={window.location.href}\u00a0\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0className={'field-row\u00a0section'}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<form\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onSubmit={(e)\u00a0=>\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0e.preventDefault()\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setNewTaskText('')\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Neue\u00a0Aufgabe\u00a0hier\u00a0eintragen\u00a0und\u00a0hinzuf\u00fcgen:\u00a0<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id=\"newtask\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=\"text\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0value={newTaskText}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onChange={(e)\u00a0=>\u00a0setNewTaskText(e.target.value)}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button\u00a0type=\"submit\"\u00a0onClick={()\u00a0=>\u00a0(newTaskText\u00a0?\u00a0addTask(newTaskText,\u00a0list.id)\u00a0:\u00a0'')}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Aufgabe\u00a0hinzuf\u00fcgen\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/form>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0className=\"section\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{tasks\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?\u00a0tasks.map((task)\u00a0=>\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0key={task.id}\u00a0className={'field-row'}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0checked={task.complete\u00a0?\u00a0true\u00a0:\u00a0''}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onChange={(e)\u00a0=>\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0tasks.find((t,\u00a0i)\u00a0=>\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(t.id\u00a0===\u00a0task.id)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0tasks[i].complete\u00a0=\u00a0!task.complete\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0true\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0else\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0false\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setTasks([...tasks])\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0updateTask(task.id,\u00a0{\u00a0complete:\u00a0e.target.checked\u00a0})\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=\"checkbox\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id={`task-${task.id}`}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0><\/input>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label\u00a0htmlFor={`task-${task.id}`}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{task.complete\u00a0?\u00a0<del>{task.task_text}<\/del>\u00a0:\u00a0task.task_text}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:\u00a0''}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div\u00a0className=\"section\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<small>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Achtung:\u00a0Bitte\u00a0keine\u00a0sensiblen\u00a0Informationen\u00a0hier\u00a0eintragen,\u00a0da\u00a0die\u00a0Liste\u00a0\u00f6ffentlich\u00a0aufrufbar\u00a0und\u00a0einsehbar\u00a0ist\u00a0!\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/small>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0)\n}<\/pre>\n
Wenn wir alles soweit zum Laufen gebracht haben, sollten wir nun in der Lage sein, npm run start<\/code> auszuf\u00fchren und im Browser die URL localhost: 3000<\/code> aufzurufen, um die Anwendung in Action zu sehen.<\/p>\n<\/div>\n
Der komplette Source-Code ist in gitHub frei verf\u00fcgbar.<\/a><\/div>\n
Die komplette Dokumentation zu Supabase ist hier abrufbar.<\/a><\/div>\n
<\/div>\n
Haftungsausschluss\/ Wichtiger Hinweis ?\u26a1:<\/strong> <\/em>
\nDiese Demo wird ohne Benutzerauthentifizierung geliefert. Der Zugriff auf die Liste eines anderen Benutzers ist ohne Kenntnis der uuid zwar nicht ganz einfach aber trotzdem grunds\u00e4tzlich m\u00f6glich. Daher ist davon auszugehen, dass alles, was in die Aufgabenlisten eingetragen wird, \u00f6ffentlich verf\u00fcgbare Informationen sind.<\/strong><\/div>\n
<\/div>\n
<\/p>\n
<\/div>
<\/div>","protected":false},"excerpt":{"rendered":"
Nachdem nun Wunderlist ja leider Geschichte ist wollen wir uns heute mal anschauen, wie man sich diesen – https:\/\/community-tasks.now.sh\/ – einfachen und kollaborativen Echtzeit-Tasklistendienst selbst…<\/p>\n
WeiterlesenHowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"redux-templates_contained","format":"standard","meta":{"_oct_exclude_from_cache":false,"_mi_skip_tracking":false,"yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"BlogPosting","_wpoai_wizard_id":""},"categories":[115,23],"tags":[116],"yoast_head":"\nHowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React -<\/title>\n<meta name=\"description\" content=\"HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[:de]HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React - [:]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Streng vertraulich !\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-04T06:42:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-13T19:40:36+00:00\" \/>\n<meta name=\"author\" content=\"pathfinder\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@sabhe011\" \/>\n<meta name=\"twitter:site\" content=\"@sabhe011\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"pathfinder\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/\"},\"author\":{\"name\":\"pathfinder\",\"@id\":\"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81\"},\"headline\":\"HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React\",\"datePublished\":\"2020-06-04T06:42:18+00:00\",\"dateModified\":\"2022-01-13T19:40:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/\"},\"wordCount\":629,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81\"},\"keywords\":[\"#react\"],\"articleSection\":[\"Coding\",\"Computers and IT\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/\",\"url\":\"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/\",\"name\":\"[:de]HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React - [:]\",\"isPartOf\":{\"@id\":\"https:\/\/ways4.eu\/#website\"},\"datePublished\":\"2020-06-04T06:42:18+00:00\",\"dateModified\":\"2022-01-13T19:40:36+00:00\",\"description\":\"{:de}HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React {:}\",\"breadcrumb\":{\"@id\":\"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ways4.eu\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"(Deutsch) HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ways4.eu\/#website\",\"url\":\"https:\/\/ways4.eu\/\",\"name\":\"Streng vertraulich !\",\"description\":\"Nicht weitersagen...\",\"publisher\":{\"@id\":\"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ways4.eu\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81\",\"name\":\"pathfinder\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/ways4.eu\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.ways4.eu\/wp-content\/uploads\/2023\/01\/wp-1674746983690.jpg?fit=702%2C841&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.ways4.eu\/wp-content\/uploads\/2023\/01\/wp-1674746983690.jpg?fit=702%2C841&ssl=1\",\"width\":702,\"height\":841,\"caption\":\"pathfinder\"},\"logo\":{\"@id\":\"https:\/\/ways4.eu\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/ways4.eu\",\"https:\/\/twitter.com\/sabhe011\"],\"url\":\"https:\/\/ways4.eu\/de\/blog\/author\/pathfinder\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React -","description":"HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/","og_locale":"de_DE","og_type":"article","og_title":"[:de]HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React - [:]","og_url":"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/","og_site_name":"Streng vertraulich !","article_published_time":"2020-06-04T06:42:18+00:00","article_modified_time":"2022-01-13T19:40:36+00:00","author":"pathfinder","twitter_card":"summary_large_image","twitter_creator":"@sabhe011","twitter_site":"@sabhe011","twitter_misc":{"Verfasst von":"pathfinder","Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/#article","isPartOf":{"@id":"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/"},"author":{"name":"pathfinder","@id":"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81"},"headline":"HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React","datePublished":"2020-06-04T06:42:18+00:00","dateModified":"2022-01-13T19:40:36+00:00","mainEntityOfPage":{"@id":"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/"},"wordCount":629,"commentCount":0,"publisher":{"@id":"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81"},"keywords":["#react"],"articleSection":["Coding","Computers and IT"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/","url":"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/","name":"[:de]HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React - [:]","isPartOf":{"@id":"https:\/\/ways4.eu\/#website"},"datePublished":"2020-06-04T06:42:18+00:00","dateModified":"2022-01-13T19:40:36+00:00","description":"{:de}HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React {:}","breadcrumb":{"@id":"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ways4.eu\/blog\/2020\/06\/04\/how-to-kollaborative-aufgabenliste-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ways4.eu\/"},{"@type":"ListItem","position":2,"name":"(Deutsch) HowTo: Erstellen von kollaborativen Echtzeit-Aufgabenlisten in React"}]},{"@type":"WebSite","@id":"https:\/\/ways4.eu\/#website","url":"https:\/\/ways4.eu\/","name":"Streng vertraulich !","description":"Nicht weitersagen...","publisher":{"@id":"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ways4.eu\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/ways4.eu\/#\/schema\/person\/00041dcd2cf535a70052cf591c2abd81","name":"pathfinder","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/ways4.eu\/#\/schema\/person\/image\/","url":"https:\/\/i0.wp.com\/www.ways4.eu\/wp-content\/uploads\/2023\/01\/wp-1674746983690.jpg?fit=702%2C841&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.ways4.eu\/wp-content\/uploads\/2023\/01\/wp-1674746983690.jpg?fit=702%2C841&ssl=1","width":702,"height":841,"caption":"pathfinder"},"logo":{"@id":"https:\/\/ways4.eu\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/ways4.eu","https:\/\/twitter.com\/sabhe011"],"url":"https:\/\/ways4.eu\/de\/blog\/author\/pathfinder\/"}]}},"yasr_visitor_votes":{"number_of_votes":0,"sum_votes":0,"stars_attributes":{"read_only":false,"span_bottom":false}},"_links":{"self":[{"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/posts\/2056"}],"collection":[{"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/comments?post=2056"}],"version-history":[{"count":35,"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/posts\/2056\/revisions"}],"predecessor-version":[{"id":2155,"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/posts\/2056\/revisions\/2155"}],"wp:attachment":[{"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/media?parent=2056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/categories?post=2056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ways4.eu\/de\/wp-json\/wp\/v2\/tags?post=2056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
und wie wir den State<\/em> mit useState ()<\/code> und useEffect<\/code> verwalten.Das ist zun\u00e4chst nicht ganz einfach zu verstehen. Sehr hilfreich ist es daher unbedingt die Erl\u00e4uterung zum\u00a0 Effekt-Hook<\/a> durchzulesen, um zu verstehen, wie das alles zusammenpasst.<\/p>\n