IntroductionSetting Up Our Sample WorkspaceOur First Marko ComponentWhat Is a Component?A Note on NamingComponent Authoring FlavorsLet’s Look at a SampleHow Marko Handles State?Deriving State from InputHandling State UpdatesHow State Updates Are Done?Inter-component State ManagementUsing a Global State Management Solution like ReduxOther State Management Pattern RecommendationsMarko’s State Management APIthis.state.x vs. state.xImmutable State Updates Through Immer vs. setStateDirtyA Little More on <context>How Marko Handles StylesOrganizing Component StylesThe Style and Class AttributesHow Marko Handles Dynamic Values via ${ }Terminology: Things to NoteHow Marko Handles EventsThe Types of Events That Marko HandlesWiring DOM Event HandlersWiring Custom Event HandlersValues That on-* Can TakeUsing an Inline Event Handler via an Arrow FunctionUsing an Inline Event Handler via an Anonymous Non-arrow FunctionUsing a Variable Reference to a Static FunctionUsing a methodName with the methodName Defined in the Class { }Binding Arguments to the Event HandlersArguments for Native Event HandlersArguments for Custom Event HandlersOne-Time Event Handlers via once-*Emitting Events via this.emitUsing this.subscribeTo to Handle Global SubscriptionsUsing the Custom <subscribe> TagMarko’s Core TagsOverviewConditional TagsLooping Tags<for> Tag to Iterate over Arrays (Similar to for..of)<for> Tag to Iterate over Object Properties<for> Tag to Iterate over Objects<for> Tag to Iterate over a Range<while> TagSetting a KeyMacrosIncluding HTML CommentsIncluding Static FilesIncluding Static Text FilesIncluding Static HTML FilesHandling AsyncGlobal APIs and Keywords in Marko TemplatesGlobal APIs on this in Marko Componentsthis.getEl(key?, index?)this.getEls(key)this.getElId(key?, index?)this.getComponent(key, index?)this.getComponents(key)this.rerender(input?)this.forceUpdate()this.update()this.insertAfter(childNode)this.insertBefore(childNode)this.prependTo(parentNode)this.appendTo(parentNode)this.replace(targetNode)this.replaceChildrenOf(targetNode)Declaratives Available in the Marko TemplateKey: Other Uses*:scopedno-update DirectivesMarko’s Additional Non-core TagsBody Content Within Marko TagsFirstly, What Do We Mean by Body Content?How Do We Render Body Content in Our Custom Tag?Can You Pass Attributes to Body Content?Named Body ContentRepeated Body ContentAttributes on Attribute TagsNested Attribute TagsDynamic Attribute TagsGeneric Syntax/Features in MarkoDynamic TextAttributesHandling Complex Javascript ExpressionsBoolean AttributesDynamic AttributesStyle AttributesClass AttributesShorthand AttributesTag ParametersArguments on Core Tags, Attributes, and body-only-ifDynamic Tag NamesDynamic Custom Marko ComponentsDynamic Body ContentAttribute TagsInline JavascriptStatic JavascriptImporting External FilesOutput Comments vs. Code-Level CommentsWhat Is a Custom Tag?Using Custom Tags Installed As NPM ModulesAuthoring Custom Tags and Publishing ThemMarko’s Tag Discovery Mechanismmarko.json vs. marko-tag.jsonmarko-tag.jsonmarko.jsonMarko’s Render APIWhat Does Render Mean?A Short Aside on Marko-Node Extension and the Compiler APIrenderSync(input)render(input)render(input, callback(err, result))render(input, stream)render(input, out)renderToString(input)renderToString(input, callback(err, html))stream(input): For Use on ServerSerializing Server-Rendered Data for Use on Client SideA Deeper Look into Marko Components: The LifecycleConclusion
