Master React Coding with GitHub Copilot: A Simple Guide to Custom Instructions

Introduction

Imagine if your AI coding assistant not only saved you time but also helped you maintain consistency and quality across your React projects. With custom instructions in GitHub Copilot, this dream becomes a reality. This guide will show you how to tailor Copilot's suggestions to match your team's coding style, ensuring maintainable, high-quality code every time.

---

Why Simple Instructions for React?

React development often involves specific patterns for building user interfaces, managing data, and styling components. Without clear guidelines, your codebase can become inconsistent, leading to bugs and confusion. Custom instructions help by:

• Component Organization: Ensuring a logical grouping of components (e.g., by feature or type).
• Handling Data: Defining where data should reside (local vs. global).
• Styling Consistency: Enforcing styling conventions like CSS Modules for a cohesive UI.
• Testing Standards: Streamlining test creation with consistent patterns.
• Code Logic: Encouraging reusable patterns like custom hooks instead of inline logic.

Benefits:

• Consistent Code: Maintain uniformity across the project.
• Reduced Errors: Minimize bugs by adhering to standards.
• Faster Development: Spend less time correcting code.
• Improved Scalability: Create a maintainable and well-documented codebase.

---

Step-by-Step Guide to Creating Custom Instructions

1. Planning Your Simple Rules

Start by defining the rules your team follows. Examples:

• Naming Conventions: Are components written in PascalCase?
• Component Structure: Should each component do only one thing?
• Data Management: Should reusable logic be extracted into custom hooks?

Organize these rules into categories like Component Structure, Styling, and Testing. Write clear, actionable rules—e.g., replace "write components properly" with "each component should focus on one responsibility."

2. Initial Setup for Custom Instructions

Before you start writing your XML instructions, set up your environment:

1. Enable GitHub Copilot Extension: Ensure you have the GitHub Copilot extension installed and enabled in your code editor (e.g., VS Code).
2. Create the Instructions File: Inside the .github folder in your repository, create a file named custom-instructions.md. This file will house your tailored guidelines.

3. Understanding the XML Structure

XML provides a structured way to define rules. Here are the building blocks:

• <react-codebase-guidelines>: Root tag for all rules.
• <title>: Title of the guideline (e.g., "React Style Guide").
• <purpose>: Why the rules exist.
• <section>: Categories of rules.
• <principle>: Individual rules.
• <description>: Details about the rule.
• <example>: Code examples ("Good" vs. "Bad").

4. Simplified XML Example

<react-codebase-guidelines>
    <title>React Style Guide</title>
    <purpose>To ensure consistent, maintainable React code.</purpose>

    <section name="Component Structure">
        <principle name="Component Naming">
            <description>Use PascalCase for component names (e.g., MyComponent.tsx).</description>
            <example language="typescript">
                // Good:
                const MyComponent = () => { ... };
                // Bad:
                const myComponent = () => { ... };
            </example>
        </principle>
        <principle name="Single Responsibility Principle">
            <description>Each component should do one thing well. Split large components.</description>
            <example language="typescript">
                // Good:
                const Button = ({ onClick, children }) => { ... };
                // Bad:
                const MultiPurposeComponent = () => { ... };
            </example>
        </principle>
    </section>

    <section name="Styling">
        <principle name="CSS Modules">
            <description>Use CSS Modules for styling components. Place the module file in the same directory as the component.</description>
            <example language="typescript">
                // Good:
                import styles from './MyComponent.module.css';
                const MyComponent = () => <div className={styles.container}></div>;

                // Bad:
                const MyComponent = () => <div className="container"></div>;
            </example>
        </principle>
    </section>

    <section name="Testing">
        <principle name="Basic Tests">
            <description>All components should have tests that verify correct rendering.</description>
            <example language="typescript">
                // Good:
                describe('MyComponent', () => {
                    test('renders correctly', () => { render(<MyComponent />); });
                });

                // Bad:
                test('renders', () => { render(<MyComponent />); });
            </example>
        </principle>
    </section>
</react-codebase-guidelines>

---

5. Implementing Instructions

1. Save Your XML content: Place the XML content in your repository (e.g., .github/copilot-instructions.md).
2. Test the Rules: Create scenarios to validate if Copilot applies the instructions:
   • Naming Convention: If you name a file myComponent.tsx, Copilot should suggest MyComponent.tsx.
   • Styling: If you use global CSS, Copilot should suggest CSS Modules.

---

Adding More Instructions

Expand rules as your project grows. For example:

<section name="State Management">
    <principle name="Local State">
        <description>Use local state for specific UI data. Avoid using global state unnecessarily.</description>
        <example language="typescript">
            // Good:
            const [isOpen, setIsOpen] = useState(false);

            // Bad:
            const isOpen = globalState.isOpen;
        </example>
    </principle>
    <principle name="Global State">
        <description>Use Redux or Context API for managing global state.</description>
        <example language="typescript">
            // Good:
            const todos = useSelector(selectTodos);

            // Bad:
            const todos = globalTodos;
        </example>
    </principle>
</section>

---

Best Practices and Tips

• Start Small: Focus on the most critical rules.
• Iterate: Test frequently and update rules as needed.
• Collaborate: Share with your team and gather feedback.
• Keep It Simple: Avoid overly complex rules that are hard to maintain.

---

Real-World Examples

Here’s what Copilot might suggest with your rules:

1. Component Naming:

   // Bad:
   const myComponent = () => { ... };
   // Suggestion:
   const MyComponent = () => { ... };

1. Styling with CSS Modules:

   // Bad:
   const MyComponent = () => <div className="container"></div>;
   // Suggestion:
   import styles from './MyComponent.module.css';
   const MyComponent = () => <div className={styles.container}></div>;

1. Testing Patterns:

   // Bad:
   test('renders', () => { render(<MyComponent />); });
   // Suggestion:
   describe('MyComponent', () => {
       test('renders correctly', () => { render(<MyComponent />); });
   });

---

Conclusion

Custom instructions are a powerful way to tailor GitHub Copilot to your React project’s needs. By enforcing consistent patterns and standards, you can improve code quality, reduce bugs, and boost your development speed. Start small, test often, and update your rules as your project evolves.