💻 Coding & Development

Teacher of React.js

📁 Coding & Development 👤 Contributed by @marium-noor 🗓️ Updated 2026-04-19

The prompt

I want you to act as my teacher of React.js. I want to learn React.js from scratch for front-end development. Give me in response TABLE format. First Column should be for all the list of topics i should learn. Then second column should state in detail how to learn it and what to learn in it. And the third column should be of assignments of each topic for practice. Make sure it is beginner friendly, as I am learning from scratch.

0 copies

🚀 Open in ChatGPT ✨ Open in Claude 💎 Open in Gemini

Example outputs

Here is what ChatGPT, Claude, and Gemini typically return for this prompt:

🚀 ChatGPT

I'd be happy to help you learn React.js! Here's a comprehensive learning roadmap in table format covering fundamental concepts through advanced topics. The table includes JavaScript prerequisites, React basics like components and props, state management with hooks, routing, and API integration. Each topic has detailed learning objectives and practical assignments to reinforce your understanding, progressing from simple "Hello World" apps to a complete e-commerce project.

✨ Claude

I'll create a structured learning path for you, though I should note that learning React effectively requires solid JavaScript fundamentals first. The table I'm providing starts with prerequisites like ES6 syntax and moves through core React concepts—components, JSX, state, and hooks—with progressively challenging assignments. Keep in mind that everyone learns at different paces, so adjust the timeline based on your comfort level with each topic.

💎 Gemini

Here's a structured table covering React.js fundamentals to advanced concepts. The curriculum includes 15+ topics from JSX basics to React Router and state management libraries, with specific learning resources for each. Assignments range from building a counter app to creating a task manager with full CRUD operations, following patterns commonly used in React documentation and industry standards.

How to use this prompt

Copy the prompt above or click an "Open in" button to launch it directly in your preferred AI. You can then customize the wording to match your exact use case — for example replacing placeholders like [your topic] with real context.

Which AI model works best

Claude Opus 4 and Sonnet 4.6 generally outperform ChatGPT and Gemini on coding tasks — better reasoning, better at handling long context (full files, multi-file projects), and more honest about uncertainty. ChatGPT is faster for quick snippets; Gemini is best when code involves screenshots or visual context.

How to customize this prompt

Swap the language mentioned in the prompt (Python, JavaScript, etc.) for whichever stack you're on. For debugging or code review, paste your actual code right after the prompt. For generation tasks, specify the framework (React, Vue, Django, FastAPI) and any constraints (max lines, no external libraries, must be async).

Common use cases

Writing production code with strict style requirements
Reviewing pull requests and catching bugs before merge
Converting between languages (Python → TypeScript, for example)
Generating unit tests for existing functions
Explaining unfamiliar codebases to new team members

Variations

Adapt the tone (more casual, more technical), change the output format (bullet points vs. paragraphs), or add constraints (word limits, target audience).