Skip to main content

New Nested File

Create a new nested file inside the parent component.

When to use​

  • When you want to break down a large component into smaller pieces
  • When creating child components that belong to a parent component

How to use​

  1. Right-click on a file (e.g. ParentComponent.tsx) in the File Nesting Explorer panel
  2. Select "New Nested File..." from the context menu
  3. Enter the name for your new nested file (e.g. ChildComponent.tsx)
ChildComponent.tsx
export const ChildComponent = () => {
  return <div>Child Component</div>;
};
  1. The file will be created inside the ParentComponent.tsx file
ParentComponent.tsx
  └── ChildComponent.tsx
  1. To use the nested file inside the parent file, import it using the relative path and the parent name with the @ alias. For example:
ParentComponent.tsx
import { ChildComponent } from "./@ParentComponent/ChildComponent";

Example​

If you have Dashboard.tsx and create a nested file called Header.tsx, the result will be:

Dashboard.tsx
  └── Header.tsx

In the Dashboard.tsx file, you can import the Header component using the relative path and the parent name with the @ alias, and use it like this:

Dashboard.tsx
import { Header } from "./@Dashboard/Header";

export const Dashboard = () => (
  <div>
    <Header />
  </div>
);