# Create React Component

> Use when: creating a new Relay-connected React component, defining a GraphQL fragment, or wiring a component to a query

- Skill: `opencti-platform/create-react-component` (Agent Skill)
- Install (CLI): `npx skillmds@latest add opencti-platform/create-react-component`
- Raw SKILL.md: https://api.skillmd.com/api/skills/opencti-platform/create-react-component/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: OpenCTI-Platform (https://skillmd.com/u/opencti-platform)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/opencti-platform/create-react-component

---


# Create React Component (Relay)

## Prerequisites
- **Parent Component**: Knowing where this will be used.
- **Fragment**: The data requirements from GraphQL.

## Procedure

### Step 0 — Find an Existing Example
Use the **Codebase Pattern Finder** agent to locate a similar existing component in `opencti-platform/opencti-front/src/private/components/` that uses `useFragment`. Model the new component after the existing one to stay idiomatic.

### Step 1 — Create Component File
Location: `opencti-platform/opencti-front/src/private/components/...`.

### Step 2 — Define Fragment & Props
Use `graphql` tag and `useFragment`.

```tsx
import React from 'react';
import { graphql, useFragment } from 'react-relay';
import { MyComponent_data$key } from './__generated__/MyComponent_data.graphql';

const myComponentFragment = graphql`
  fragment MyComponent_data on EntityType {
    id
    name
    description
  }
`;

interface MyComponentProps {
  data: MyComponent_data$key;
}

const MyComponent: React.FC<MyComponentProps> = ({ data }) => {
  const node = useFragment(myComponentFragment, data);

  return (
    <div>
      <h1>{node.name}</h1>
      <p>{node.description}</p>
    </div>
  );
};

export default MyComponent;
```

### Step 3 — Run Relay Compiler
Run `yarn relay` to generate the TypeScript types.