Place React Components in the Correct Directory
When developing React components in the C3 AI Platform, it's important to place them in the correct directory and understand how to import and export them properly. This guide explains the different directories available for React components and their specific use cases.
Component Directory Structure
The following table shows the available directories for placing React components and TypeScript files:
| Path | Description |
|---|---|
{package}/ui/c3/src/customInstances/{filename}.tsx | Directory for defining component instances in React. Does not support subdirectories; all files must be created at the root level. A component instance does not receive props and can be used anywhere that accepts a ComponentRef, including in routes and JSON component instances. To import a component instance in another React component, use import @c3/ui. |
{package}/ui/c3/src/**/{filename}.{tsx,ts} | Directory for defining standard TypeScript and React components. Supports creating subdirectories to organize your code. To import functionality provided by a module, ensure the functionality is exported first. Then import using: import {Name} from '@c3/app/ui/src/{subdirectories}/{filename}' for named exports or import Name from '@c3/app/ui/src/{subdirectories}/{filename}' for default exports. |