About Prompt
- Prompt Type – Dynamic
- Prompt Platform – ChatGPT, Grok, Deepseek, Gemini, Copilot, Midjourney, Meta AI and more
- Niche – Technology
- Language – English
- Category – Development Prompts
- Prompt Title – Prompt to Generate Clean ReactJS Code
Prompt Details
This prompt guides an AI to generate clean, efficient, and well-documented ReactJS code based on a provided specification. It is designed to be dynamic and compatible with various AI platforms, emphasizing best practices for prompt engineering.
**Instructions:**
You are an expert ReactJS developer. Your task is to generate clean, functional, and well-documented ReactJS code based on the following specifications. Adhere to best practices, including component structure, state management, prop drilling prevention, and error handling. Prioritize code readability and maintainability.
**Provide the Following Information as Input:**
* **Component Name:** (e.g., `UserList`, `ProductCard`, `OrderForm`) A descriptive name for the component.
* **Component Functionality:** (e.g., “Displays a list of users fetched from an API”, “Renders a product card with image, title, price, and add-to-cart button”, “Handles user input for an order form and submits data to a backend”) A detailed explanation of the component’s purpose and behavior.
* **Data Source (if applicable):** (e.g., “API endpoint: `/api/users`”, “Local JSON data: `products.json`”, “Parent component props”) Specify the source of data used by the component.
* **Props (if applicable):** (e.g., `user: { id: number, name: string, email: string }`, `product: { id: number, title: string, price: number, imageUrl: string }`) Define the props the component receives, including their types and descriptions.
* **User Interactions:** (e.g., “Clicking on a user navigates to a user details page”, “Clicking ‘Add to Cart’ adds the product to the cart and updates the cart count”, “Form submission validates user input and sends data to the server”) Describe how users interact with the component and the expected outcomes.
* **Styling Requirements (Optional):** (e.g., “Use Material UI components”, “Implement a custom CSS style”, “Follow the existing application style guide”) Specify any styling requirements for the component.
* **State Management (Optional):** (e.g., “Use `useState` for managing local component state”, “Use Redux for global state management”, “Use a context provider”) If required, specify the preferred state management approach.
* **Error Handling (Optional):** (e.g., “Display an error message if the API call fails”, “Validate user input and display error messages for invalid fields”) Describe how errors should be handled within the component.
* **Additional Requirements (Optional):** (e.g., “Implement accessibility features”, “Optimize for performance”, “Use TypeScript”) Any other specific requirements for the component.
**Output Format:**
Provide the generated ReactJS code within a code block using backticks (“`). Clearly separate different parts of the code (e.g., imports, component definition, JSX, styles). Include comments to explain the code’s logic and purpose.
**Example Input:**
“`
Component Name: ProductCard
Component Functionality: Renders a product card with image, title, price, and add-to-cart button.
Data Source: Parent component props.
Props: product: { id: number, title: string, price: number, imageUrl: string }
User Interactions: Clicking ‘Add to Cart’ adds the product to the cart (assume a global cart context is available).
Styling Requirements: Use Material UI.
“`
**Expected Output (Illustrative):**
“`jsx
import React, { useContext } from ‘react’;
import { Card, CardContent, CardMedia, Button, Typography } from ‘@mui/material’;
import { CartContext } from ‘../CartContext’; // Assuming a CartContext exists
const ProductCard = ({ product }) => {
const { addToCart } = useContext(CartContext);
const handleAddToCart = () => {
addToCart(product);
};
return (
{product.title}
Price: ${product.price}
);
};
export default ProductCard;
“`
This prompt encourages the AI to generate functional, well-structured, and documented ReactJS code tailored to the provided specifications, making it a valuable tool for developers. Remember to replace the example input with your specific requirements.