AI-React-Tutor
Du kannst sagen, warum eine Komponente neu gerendert wurde, und den Zustand von Anfang an dort platzieren, wo er hingehört.
Prompt-Datei Sofort-Download
Skill plus 2.500+ weitere holen
$9/Monat oder $59 pro Jahr
Library holen · $9/MonatLibrary holenEs wird nichts abgebucht. 2 Tage vor dem Ende der Testphase kommt ein −30%-Code für deine erste Zahlung.
Brauchst du nur diese Datei (Skill)?
Eine Datei, einmal bezahlt. Keine Updates, kein Connector.
Kostet etwa so viel wie 2 Monate Library.
In deinem Plan enthalten
Frag deine KI einfach nach dem Namen oder wähle es in deinem Dashboard. Du musst die Datei nicht kaufen.
In deiner KI nutzenEinmal zahlen, für immer behaltenSofort-Download30 Tage Geld-zurück-Garantie
Bekannt ausProduct HuntFazierKittyLaunch
Sicherer Checkout über Stripe
Marken ihrer jeweiligen Inhaber. KissMySkills steht in keiner Verbindung zu ihnen und wird nicht von ihnen unterstützt.
So funktioniert's
Ask it something hard.
Oder jeden Skill direkt in deiner KI.
Fragen vor dem Kauf? Ein Mensch antwortet, meist am selben Tag: hello@kissmyskills.com
// die Datei selbst
Die ersten Zeilen der Datei, die deine KI lesen wird, genau so, wie sie geliefert wird. Nichts für die Seite umgeschrieben.
Du bist ein sokratischer React-Tutor, und dein Lernender schreibt bereits JavaScript, daher vermittelst du zuerst das Render-Modell und erst danach Hooks. Du wurdest aktiviert, um zu erklären, warum eine Komponente ausgeführt wurde und wo ihr Zustand hingehört.
// was drin ist
JavaScript-Entwickler, die in die Frontend-Entwicklung wechseln, Bootcamp-Absolventen, die über die Tutorial-Phase hinaus sind, und Backend-Entwickler, die sich mit der UI befassen müssen.
// zwei Wege, es zu bekommen
$9/Monat jederzeit kündbar, oder $59 pro Jahr
$19 einmalige Zahlung
Schon bei Library oder Both? Dieser Artikel ist enthalten, du musst die Datei nicht kaufen.
Dieser React-JS-Tutor ist für den Punkt gedacht, an dem du zwar eine To-do-Liste erstellen kannst, aber nicht sagen kannst, warum deine Komponente viermal gerendert wurde, warum der Wert in useEffect veraltet ist oder wo dieser State wirklich liegen sollte. Fast jedes React-Problem hat im Kern dieselbe Ursache. Deshalb beginnt diese Datei genau dort: zuerst mit dem Render-Modell, dann mit Hooks und zuletzt mit Bibliotheken.
Füge sie in Claude, ChatGPT oder Gemini ein. Sie ordnet dich mit einer Frage dazu ein, was ein erneutes Rendern auslöst. Danach folgen die Lektionen der Reihe nach: State und erneutes Rendern, Props und das Hochziehen von State, Listen und Keys, kontrollierte Eingabefelder, useEffect und der viel häufigere Fall, in dem du es nicht brauchst, die Regeln für Hooks, Context und seine Grenzen, das Abrufen von Daten und schließlich Memoisierung – aber erst, wenn du etwas messen kannst. Wenn deine Komponente in einer Schleife läuft, fragt sie zuerst, welche Zeile während des Renderns den State setzt, bevor sie eine Lösung erwähnt.
Dieselbe Datei, dasselbe Verhalten in Claude, ChatGPT und Gemini. Eine Zahlung, kein Abonnement, und die Einrichtung dauert etwa eine Minute.
Nach dem Kauf kommt der Download-Link per E-Mail. Speichere die .txt-Datei an einem beliebigen Ort auf deinem Gerät.
Jeder KI-Chat, den du bereits nutzt: Claude, ChatGPT, Gemini, Grok, Copilot oder ein anderer.
Öffne die .txt-Datei, kopiere den Prompt-Abschnitt und füge ihn in Claude oder ChatGPT ein - oder lege ihn in einem Projekt ab, damit er immer da ist.
Deine KI ist jetzt als Spezialist konfiguriert. Frag sie alles innerhalb ihres Fachgebiets.
Keine technischen Kenntnisse erforderlich.
Mit Library gibt es nichts herunterzuladen. Verbinde deine KI einmal und bitte sie dann um einen beliebigen Skill beim Namen.
Die Datei verbietet das. Wenn dir eine Aufgabe gestellt wird, kann der Tutor dasselbe Muster an einer anderen Komponente zeigen, aber er wird deine nicht schreiben. Wenn du fehlerhaften Code einfügst, fragt er, in welcher Zeile sich der Zustand ändert und wann diese Zeile ausgeführt wird. Die Lösung erarbeitest du selbst. Der Sinn des Ganzen ist, dass du nächste Woche eine Render-Schleife eigenständig debuggen kannst.
Nur Funktionskomponenten und Hooks. Klassen werden einmal kurz behandelt, damit du alten Code in einem Repository lesen kannst, ohne davon verwirrt zu werden. Die Reihenfolge ist bewusst gewählt: das Render-Modell, dann useState, anschließend Props und das Hochheben des Zustands und erst viel später useEffect, weil die meisten useEffect-Aufrufe, die Anfänger schreiben, nicht nötig sein sollten.
Erst React, dann die Werkzeuge. Sobald die Grundlagen sitzen, behandelt der Tutor Routing, Datenabrufe mit TanStack Query, wann Context ausreicht und wann eine State-Library ihren Einsatz rechtfertigt und was eine Server Component in Next.js verändert. Paketversionen werden sorgfältig angegeben oder es wird gesagt, dass man sich nicht sicher ist, da sich dieses Ökosystem schneller verändert als jede Datei.
Nein. Die Datei wurde für deine AI geschrieben, nicht für dich. Du lädst sie hoch oder fügst sie einmal ein, und die AI übernimmt die Rolle. Danach stellst du ihr einfach Fragen, wie du es normalerweise tun würdest. Du kannst sie natürlich öffnen und lesen, aber nichts hier setzt voraus, dass du das tust.
Dieser und 2.500+ weitere, direkt in Claude, ChatGPT, Claude Code, Codex oder Cursor. Jederzeit kündbar.
