AI generated prompt for React Component Generator with TypeScript
Ask questions or share concrete improvements.
No comments yet.
Sign in to join the discussion.
**Context**: Developing React applications involves creating numerous components, each with its own set of properties, state, and lifecycle methods. Writing these components from scratch can be time-consuming and prone to errors. A React Component Generator with TypeScript support would streamline this process by automatically generating boilerplate code for new components, ensuring consistency and adherence to best practices. **Detailed Instructions**: Design a command-line interface (CLI) tool that generates React components with TypeScript. The tool should accept the following parameters: - Component name - Component type (e.g., functional, class-based) - List of props with their respective types - Whether the component should include state - List of lifecycle methods to include (for class-based components) - Optional: Custom template for the component (allowing users to specify their own boilerplate code) The generator should: 1. Validate the input parameters to ensure they are correctly formatted and make sense in the context of React and TypeScript. 2. Generate a new TypeScript file for the component, using the provided name and adhering to the specified type (functional or class-based). 3. Include type annotations for props and state (if applicable), based on the provided information. 4. Implement any requested lifecycle methods for class-based components. 5. If a custom template is provided, incorporate it into the generated component, ensuring compatibility with the other generated code. 6. Ensure the generated code follows best practices for React and TypeScript, including proper import statements, formatting, and any necessary type definitions. **Output Format**: The tool should output a TypeScript file (.tsx) containing the generated React component code. The file should be named after the component, and its contents should be formatted according to standard TypeScript and React coding conventions. If any errors occur during the generation process, the tool should display informative error messages instead of producing a file. **Examples**: - Generating a simple functional component named `HelloWorld` with a `name` prop of type `string`: ``` react-component-generator --name HelloWorld --type functional --props name:string ``` - Generating a class-based component named `Counter` with state and including `componentDidMount` lifecycle method: ``` react-component-generator --name Counter --type class-based --state --lifecycle-methods componentDidMount ``` - Using a custom template for a component named `CustomComponent`: ``` react-component-generator --name CustomComponent --template path/to/custom/template.tsx ```
This coding prompt is designed to help you get better results from AI assistants like ChatGPT, Claude, and Gemini. Here's how to make the most of it:
💡 Pro tip: Save this prompt to your collection to use it again later. Well-crafted prompts can save hours of back-and-forth with AI.
Adjust the prompt to match your specific industry, audience, or use case. Adding relevant context improves output quality.
Specify your desired output length (e.g., "in 200 words" or "in 3 bullet points") to get more targeted responses.
Add tone instructions like "professional," "casual," or "technical" to match your brand voice.
Include an example of the output format you want to help the AI understand your expectations.
Compatibility tags come from the prompt author. Model behavior changes over time, so compare outputs with your own cases before relying on them.
Learn more about using prompts effectively with our comprehensive guides: