Create component with dynamic style

1. Select Components panel -> "HelloWorldComponent".
2. Edit Editor panel -> Component markup field from <h1 id="header">{state.content}</h1> to <h1 className={state.status} id="header">{state.content}</h1>.
3. Edit state in Editor panel -> Component state field from {"content":"Hello world"} to {"content":"Hello world", "status":"valid"}.
4. Type .valid{border: 1px solid green;} in Editor panel -> Component css field.
5. Click Editor panel -> Save button.
6. Reload.
7. Click Components panel -> HelloWorldComponent. Notice preview has "Hello world" with green border.
8. Select Settings panel -> h1-header check box.
9. Edit Settings panel -> Events -> Existing -> onClick -> reducer from state.content = "Hi World" to state.content = "Hi World"; state.status = "invalid".
10. Click Settings panel -> Save button.
11. Edit Editor panel -> Component css field from .valid{border: 1px solid green;} to .valid{border: 1px solid green;} .invalid{border: 1px solid red;} . Now we have two classes created.
12. Click Editor panel -> Save button.
13. Reload.
14. Click Components panel -> HelloWorldComponent. Preview panel should show "Hello World".
15. Click Preview panel -> "Hello World". "Hello world" with green border should change to "Hi World" with red border.