Hello Angel!
\n\n```\n\nProps are data coming from the outside world that the component doesn't own, thus, they can't be changed by the component.\nIf a component wants to change that data in any way, it needs to send a message to the outside world, which is done via _events_ (see section below).\n\n### Internal state\n\nComponents can also define a `state()` function that returns the initial state for the component.\nThis function is passed the component's `props` as input:\n\n```js\nconst Counter = defineComponent({\n state(props) {\n return {\n count: props.initialCount ?? 0,\n }\n },\n\n render() {\n return h('p', {}, [`Count: ${this.state.count}`])\n },\n})\n```\n\nThe component can access the state via the `this.state` object.\nThe component owns the state, so it can change it.\nTo modify the state, the component needs to call the `this.updateState()` function, which takes as input the new state—complete or partial—for the component:\n\n```js\nconst Counter = defineComponent({\n state(props) {\n return {\n count: props.initialCount ?? 0,\n }\n },\n\n render() {\n return hFragment([\n h(\n 'button',\n {\n on: {\n click: () => this.updateState({ count: this.state.count + 1 }),\n },\n },\n ['+']\n ),\n h('p', {}, [`Count: ${this.state.count}`]),\n ])\n },\n})\n```\n\nYou can now mount this component in the DOM, passing it the `initialCount` prop:\n\n```js\nconst vdom = h(Counter, { initialCount: 10 })\nmountDOM(vdom, document.body)\n```\n\nWhich will render the following HTML:\n\n```html\n\n \nCount: 10
\n\n```\n\nClicking the button will update the state of the component, which will trigger a re-render of the component, updating the DOM.\n\n### Child components\n\nA component can render other components as its children by including them in the virtual DOM returned by the `render()` function:\n\n```js\nconst ListItem = defineComponent({\n render() {\n return h('li', {}, [this.props.text])\n },\n})\n\nconst List = defineComponent({\n render() {\n return h('ul', {}, [\n h(ListItem, { text: 'A point is that which has no part.' }),\n h(ListItem, { text: 'A line is breadthless length.' }),\n h(ListItem, { text: 'The ends of a line are points.' }),\n ])\n },\n})\n```\n\n### Events\n\nComponents can send messages to the outside world via events.\nTo emit an event, a component needs to call the `this.emit()` function, which takes as input the name of the event and the payload to send.\nThe parent component can handle the event as if it was a regular DOM event.\n\nLet's imagine a button that, when clicked, increments a count by one, but when double-clicked, increments it by ten:\n\n```js\nconst IncrementButton = defineComponent({\n render() {\n return h(\n 'button',\n {\n on: {\n click: () => this.emit('increment', { amount: 1 }),\n dblclick: () => this.emit('increment', { amount: 10 }),\n },\n },\n ['Increment']\n )\n },\n})\n```\n\nWe can incorporate it into a `Counter` component that keeps track of the count:\n\n```js\nconst Counter = defineComponent({\n state() {\n return { count: 0 }\n },\n\n render() {\n return hFragment([\n h(IncrementButton, {\n on: {\n increment: ({ amount }) =>\n this.updateState({ count: this.state.count + amount }),\n },\n }),\n h('p', {}, [`Count: ${this.state.count}`]),\n ])\n },\n})\n```\n\nYou can now mount this component in the DOM:\n\n```js\nconst vdom = h(Counter)\nmountDOM(vdom, document.body)\n```\n\nAnd play with it.\n\n### Methods\n\nA component can define methods that can be called inside the `render()` function.\nThis helps to keep the `render()` function clean and easy to read.\n\nFor example, we can move the event handler in the example above to a method:\n\n```js\nconst Counter = defineComponent({\n state() {\n return { count: 0 }\n },\n\n render() {\n return hFragment([\n h(IncrementButton, {\n on: {\n increment: this.increment, // Pass the method as the event handler\n },\n }),\n h('p', {}, [`Count: ${this.state.count}`]),\n ])\n },\n\n // Increments the count by the given amount\n increment({ amount }) {\n this.updateState({ count: this.state.count + amount })\n },\n})\n```\n\n## [v4.0 - Chapter 14](https://github.com/angelsolaorbaiceta/fe-fwk-book/tree/ch14/packages/runtime)\n\n_See the example application in the [examples/ch14 folder](https://github.com/angelsolaorbaiceta/fe-fwk-book/tree/main/examples/ch14)_.\n\nTo checkout this version of the code:\n\n```bash\n$ git checkout ch14\n```\n\nThis version of the framework implements the `onMounted()` and `onUnmounted()` _lifecycle hooks_ for components.\nYou can react to a component being mounted and unmounted by passing the `defineComponent()` function you own functions:\n\n```js\ndefineComponent({\n async onMounted() {\n // Called when the component is mounted\n },\n\n async onUnmounted() {\n // Called when the component is unmounted\n },\n})\n```\n\n## [v5.0 - Chapter 15](https://github.com/angelsolaorbaiceta/fe-fwk-book/tree/ch15/packages/runtime)\n\n_See the example application in the [examples/ch15 folder](https://github.com/angelsolaorbaiceta/fe-fwk-book/tree/main/examples/ch15)_.\n\nTo checkout this version of the code:\n\n```bash\n$ git checkout ch15\n```\n\nThis version of the framework allows to insert external content into a component using _slots_.\nA component can define where the external content should be inserted by using the `hSlot()` function:\n\n```js\nconst Comp = defineComponent({\n render() {\n return h('div', {}, [hSlot()])\n },\n})\n```\n\nThen, when mounting the component, you can pass the external content as the third argument to the `h()` function:\n\n```js\nh(Comp, {}, [h('span', {}, ['Hello'])])\n```\n\nThe result of mounting the component above will be:\n\n```html\n