@JsExport
class TestComponent : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        div {
            a {
                +"Hello, world!"
            }
        }
    }
}

@JsExport
class TestComponent : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        div {
            aComponent {}
        }
    }
}

@JsExport
class AComponent : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        a {
            +"My name is jaychy-yy!"
        }
    }
}

fun RBuilder.aComponent(handler: RProps.() -> Unit): ReactElement {
    return child(AComponent::class) {
        this.attrs(handler)
    }
}

fun RBuilder.aComponent(): ReactElement {
    return child(AComponent::class) {}
}

external interface AComponentProps : RProps {
    var name: String
}

@JsExport
class AComponent : RComponent<AComponentProps, RState>() {
    override fun RBuilder.render() {
        a {
            +"My name is ${props.name}!"
        }
    }
}

fun RBuilder.aComponent(handler: AComponentProps.() -> Unit): ReactElement {
    return child(AComponent::class) {
        this.attrs(handler)
    }
}

@JsExport
class TestComponent : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        div {
            aComponent {
                attrs {
                    name = "jaychy-yy"
                }
                // attrs.name = "jaychy-yy" // 이렇게도 할 수 있습니다.
            }
        }
    }
}

data class AComponentState(
    val test: String,
) : RState

@JsExport
class AComponent : RComponent<AComponentProps, AComponentState>() {

    init {
        state = AComponentState("")
    }

    override fun RBuilder.render() {
        a {
            +"My name is ${props.name}!"
        }
    }
}

object MyStyles : StyleSheet("MyStyles", isStatic = true) {
    val name by css {
        fontSize = 20.px
        color = rgb(0, 0, 0)
        backgroundColor = Color.white
    }
}

@JsExport
class AComponent : RComponent<AComponentProps, AComponentState>() {
    init {...}
    override fun RBuilder.render() {
        styledA {
            css {
                +MyStyles.name
            }
            +"My name is ${props.name}!"
        }
    }
}

src
  ㄴ main
      ㄴ kotlin
          ㄴ MainStyles.kt        ] - Styled Component 형식으로 정리한 스타일 객체
          ㄴ ToDoListStyles.kt    ]
          ㄴ client.kt            - 이후에 나오는 컴포넌트들을 root 아래에 두기 위한 기초 컴포넌트
          ㄴ main.kt              - ToDoList의 메인 화면 컴포넌트
          ㄴ toDo.kt              - ToDoList 내부의 ToDo를 담당하는 컴포넌트
          ㄴ toDoInsertion.kt     - ToDo를 생성하기 위한 input 컴포넌트
          ㄴ toDoList.kt          - ToDoList의 몸체 
      ㄴ resources
          ㄴ index.html           - 빌드 후 생성된 kotlin-react.learn.js 스크립트를 실행할 기초 HTML