Stages & Components: Root Component

What are we learning here?

Stages & Components Relations:

┌───────────────┐        ┌───────────┐
│ Initial Stage ├─load──►│ Component │
└───────────────┘        └───────────┘

System Hierarchy:

► Initial Stage
  └► Root Component

---

• How to create an component based on Component
• How to load a component with load(ComponentType)

Now that we have a stage we can load a component into this stage. To do this we first need to create a component. Every component starts by writing a class that extends a base component class.

The best choice for the root component at this time is a one which extends the base class Component. We will create such a component by putting this into a file named root.js file:

src/root.js

import { Component } from "@codecoupler/cc-ui";
export default class extends Component {}

Now we will import our root component and load it into the initial stage. This will be done it in the index.js file:

src/index.js

import Root from "./root";
import { Stage } from "@codecoupler/cc-ui";
new Stage().load(Root).then((root) => {
  console.info("Root is Ready!", root.id);
});

Start Definition Object vs Shortcut Signature

We will use a signature of the load method which expects only one Component. This is just a shortcut signature. The load method normally expects a so called start definition object. This would look like:

load({
  component: Root
})

You should now see the message Root is Ready! in the console with a random id. In the browser you will see absolutely nothing. A component extended fromComponent does not have any visual representation.

Why using such a component

So one might ask why we use a component any visual representation?

Well, the root component, i.e. the first component that is loaded in the initial stage, has a special meaning. Each child component has a fixed anchor point that can always be reached via a fixed expression. Furthermore, the root component can set options that are inherited by all other components.

This can be used, for example, to share data sources between multiple components, or to enable communication between components. In the root component you can load stylesheets and prepare the main layout.

Of course, any other component can be used as the root component as we will see later. But if you don't yet know how an application develops, you can start with such a component and replace it with another later.

Let's add a error handler at this point. So we will see what is going wrong in case of an error in the next steps:

src/index.js

import Root from "./root";
import { Stage, ComponentInitError } from "@codecoupler/cc-ui";
new Stage()
  .load(Root)
  .then((root) => {
    console.info("Root is Ready!", root.id);
  })
  .catch((e) => {
    if (e instanceof ComponentInitError) {
      console.info("Error was thrown from component", e.component.id);
    }
    console.error(e);
  });