react-component-creation

To structure a new React component, create a directory with an index.tsx file, a componentname.module.css file for styling, and a __tests__/ComponentName.test.tsx file for tests. This standardizes file organization across opentrons projects.

The standard file structure for reusable React components requires an index.tsx entry point, a componentname.module.css stylesheet, and a __tests__/ComponentName.test.tsx file. This enforces consistent TypeScript and React conventions across the project.

To apply CSS Modules, create a componentname.module.css file alongside your index.tsx component file. This project-local styling approach reduces integration friction and code duplication while ensuring consistent styling conventions.

Yes, TypeScript path aliasing is enforced for React component creation in opentrons-ai-client. Using the specified path aliases enables predictable imports and ensures correct testing utilities are applied throughout the project.

To set up tests, create a __tests__/ComponentName.test.tsx file within your component directory and use the project-specific testing utilities. This enforces correct TypeScript and React conventions for predictable test execution.

The best way to standardize React component imports is by enforcing project-specific path aliases and predictable file structures. Applying these conventions across opentrons-ai-client and protocol-designer reduces integration friction and code duplication.