Generate a beginner-friendly React function component from a simple UI idea, with every hook and prop explained in plain English.
You are a React tutor who writes components the way a beginner should actually learn them, function components with hooks, plain and uncluttered, and explains every hook as a specific answer to a specific problem instead of a term to memorize. My UI idea is [UI_IDEA], described in plain language, such as a button that toggles between liked and not liked, a counter with plus and minus buttons, or a card that expands to show more text when clicked. If I left that blank, ask me to describe one instead of building a generic example in its place. Build [UI_IDEA] as a single function component using modern React with hooks, never a class component, since class components are legacy syntax a beginner shouldn't start with. Use only the hooks the component actually needs, useState for anything that changes over time and re-renders the UI, useEffect only if the idea actually requires reacting to a change after render, such as saving a value or fetching data, and skip useEffect entirely if plain state and event handlers cover the whole idea, since adding it unprompted is a common beginner habit worth not modeling. After the code, explain each hook call on its own line, what state it's tracking, what triggers it to update, and what would happen visually if that piece of state didn't exist. Then explain each prop if the component accepts any, what type of value it expects and why it was designed as a prop instead of hardcoded inside the component. My depth is [DEPTH:select:just this component,also explain why it's structured this way]. If I chose the second option, add a short section comparing one thing this component does correctly against a common beginner mistake for that same pattern, such as mutating state directly instead of using the setter function, tied to the actual code above, not a generic list of React mistakes. If I ask to add a feature to the same component, such as adding a reset button or persisting the state, modify the existing code in place and explain only what changed instead of regenerating the whole component and its full explanation again.
Use this prompt anywhere
10,000+ expert prompts for ChatGPT, Claude, Gemini, and wherever you use AI.
Get Early AccessReact hooks read like magic incantations until you've seen enough of them tied to a real, working UI. This tool builds a small component around a UI idea you describe, then explains every hook and prop as an answer to a specific problem in that exact component, not a definition copied from documentation.
Describe your idea in [UI_IDEA], a like button, a counter, an expanding card, and the output builds it as a modern function component, never a class component, using only the hooks the idea actually needs. useState shows up for anything that changes and re-renders, useEffect only if the idea actually requires reacting after render. Every hook call gets explained, what it tracks, what triggers it, what breaks without it, and every prop gets the same treatment. Set [DEPTH] to also explain why it's structured this way for a direct comparison against a common beginner mistake tied to that same pattern.
Ask for one more feature and the existing component gets modified in place instead of rebuilt from scratch. Once components click, see the same building blocks styled with utility classes in the Tailwind class explainer, or check what actually separates React as a library from a full framework in the framework vs library explainer.
Build it in the Dock Editor to keep a running set of components you've actually understood.
Start the prompt in the Dock Editor or in ChatGPT, Claude, or Gemini, then fill in [UI_IDEA] in plain language, a toggle button, a counter, an expanding card, anything simple enough to picture in one sentence.
The output builds a modern function component with hooks, never a class component, using only the hooks your specific idea actually needs.
Each useState or useEffect call gets explained, what state it tracks, what triggers the update, and what would break without it.
If the component accepts props, each one gets explained, what value type it expects and why it's a prop instead of hardcoded inside the component.
Set [DEPTH] to also explain why it's structured this way to see the pattern compared directly against a common beginner mistake with the same code.
See useState tied to a concrete, working example instead of an abstract explanation, then modify it yourself to confirm the concept actually stuck.
Rebuild a few small components from scratch to check whether useState and useEffect concepts from lecture actually transferred to real code.
Turn a small interactive idea into a real, explained component worth including in a portfolio project instead of another copied tutorial snippet.
Compare a broken component against a correctly built version of the same idea to spot exactly where state or props went wrong.
Discover more prompts that could help with your workflow.
Build a small working program that calls a real public API, with the request, response, and API key setup explained step by step.
Explain a core functional programming idea, such as pure functions or immutability, with a broken code example and its fixed version shown side by side.
Explain a built-in math function, square root, power, absolute value, or rounding, covering math and syntax, then generate practice calls to predict before revealing results.
10,000+ expert-curated prompts for ChatGPT, Claude, Gemini, and wherever you use AI. Our extension helps any prompt deliver better results.