Compose bigger components using smaller components

Components can be composed together to build bigger components. Here is how.

Create a container component.

1. Reload
2. Type ContainerComponent in Editor panel -> Component name field.
3. Type <div className="fixed"></div> in Editor panel -> Component markup field.
4. Type .fixed{height:200px; width: 200px; background-color:brown;} in Editor panel -> Component CSS field.
5. Click Editor panel -> Save button.
6. Click Components panel -> ContainerComponent. You should see the preview panel rendering a brown rectangle.

Create a subComponent.

1. Reload.
2. Type SubComponent in Editor Panel -> Component name field.
3. Type <h4>Hello</h4> in Editor Panel -> Component markup field.
4. Click Editor panel -> Save button.
5. Reload.
6. Click Components panel -> SubComponent. You should see the preview pane rendering "Hello".

Composing components. - Drag and drop method - gimmick.

1. Reload.
2. Click Components panel -> ContainerComponent. In Preview panel, you should see a brown rectangle.
3. Click Preview panel -> Drop button.
4. Drag Editor panel -> SubComponent and drop it on Preview Panel -> Brown rectangle. While dragging over, you should see a green border around the brown rectangle.
5. Release mouse. You should see Hello inside the brown box. This means drag and dropping the component was successful.
6. Click Preview panel -> Drop button.
7. Drag Editor panel -> HelloWorldComponent and Drop it on Preview Panel -> Brown box. While dragging over, you should see a green border around the brown rectangle. You should see Hello world with green border visible. This is another successful drop.
8. Reload
9. Click Components panel -> ContainerComponent. If you look at Editor panel -> Component markup, you can see the reference to child components are updated.
10. Click "Hello World". You should see Hi world with red border just as if it was an independent component. This shows that while composing components, the child component will retain its behaviour as it was created.

Composing components. - Easy method.

1. Reload.
2. Click Components panel -> ContainerComponent. In Preview panel, you should see a brown rectangle.
3. Edit Editor panel -> Component markup field. Add <SubComponent></SubComponent> and <HelloWorldComponent></HelloWorldComponent> wherever you would like to have.
4. Click Editor panel -> Save button.
5. Reload
6. Click Components panel -> ContainerComponent. In Preview panel, you should see child components rendered.

Next - Component composition - Subscribe to child event