Skip to content

Stages & Components: Initial Stage

What are we learning here?

Stages & Components Relations:

┌───────────────┐
│ Initial Stage │
└───────────────┘

System Hierarchy:

► Initial Stage
  • An initial stage can be created with new Stage()

Everything starts by initializing a stage. From here we build a hierarchy of different types of components. We also call the entire tree that starts from the initial stage our “system”.

We create our intial stage in the index.js file:

src/index.js

1
2
import { Stage } from "@codecoupler/cc-ui";
new Stage();

In the browser you will see absolutely nothing. Because we have used no arguments in new Stage() a new div will be created in the body of our page which will cover the whole viewport.

The new div is transparent and permeable to pointer events. It will stay fixed in the position of the viewport even you have already scrollable content on your page. The elements “body” and “html” are set to height: 100% as a precaution.

You can also pass an already existing element as argument to convert the element into a stage. We will disuss this case later.