Using the concept of Script bundles, it's possible to create components that are shared for multiple widgets or Render Note.

## Exporting a single component

This is generally useful for big components.

Here's an example child hierarchy using Render Note:

- My render note
  Note type: Render Note
  Link `~renderNote` to the child note (Render note with subcomponents)

  - Render note with subcomponents
    Type: JSX

        export default function() {
            return (
                <MyComponent />
            );
        }

    - MyComponent
      Type: Code / JSX

          export default function MyComponent() {
              return <p>Hi</p>;
          }

## Multiple components per note

To export multiple components, use the `export` keyword next to each of the function components.

Here's how a sub-note called `MyComponents` would look like:

    export function MyFirstComponent() {
        return <p>First</p>;
    }

    export function MySecondComponent() {
        return <p>Bar</p>;
    }

Then in its parent note:

    const { MyFirstComponent, MySecondComponent } = MyComponents;

    export default function() {
        return (
            <>
                <MyFirstComponent />
                <MySecondComponent />
            </>
        );
    }

Alternatively, it's also possible to use the components directly without assigning them to a `const` first:

    <MyComponents.MyFirstComponent />
    <MyComponents.MySecondComponent />