![logo](kagura.png) # Kagura Frontend frame-work for wasm on Rust.

Tutorial

In Japanese

[Kagura] Kagura + Rust でWebページを作成

Hello World

```rust extern crate kagura; extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

[wasm_bindgen(start)]

pub fn main() { kagura::run(kagura::Component::new(State, update, render), "app"); }

struct State;

struct Msg;

fn update(_: &mut State, _: Msg) -> Option<()> {None}

fn render(: &State) -> kagura::Html { use kagura::Html; use kagura::Attributes; use kagura::Events; Html::h1( Attributes::new(), Events::new(), vec![ Html::unsafetext("hello kagura"), ], ) } ```

Usage

Create component

rust kagura::Component::new(initial_state, update, render)

update and render is function :

rust update : fn(&mut State, Msg) -> Option<Sub>

rust render : fn(&State) -> Html<Msg>

Set a component to application

rust kagura::run(component, id_of_entry_point_in_html)

Render Element

rust kagura::Html::html_tag(attributes, events, children)

attributes : instance of kagura::Attributes

events : instance of kagura::Events

children : Vec<Html>

Example

```Html

```

is made by

```rust use kagura::Html; use kagura::Attributes; use kagura::Events;

Html::ul( Attributes::new() .class("list") .class("example") .id("my-list") .string("data-fizz", "bazz"), Events::new(), vec![ Html::li(Attributes::new(), Events::new(), vec![Html::unsafetext("foo")]), Html::li(Attributes::new(), Events::new(), vec![Html::unsafetext("bar")]), Html::li(Attributes::new(), Events::new(), vec![Html::unsafe_text("baz")]) ] ) ```

Render Component

rust kagura::Html::component(component)

component : instance of kagura::Component

Transmit message to a parent component

update can send message to parent compoent as Some(message).

Receive child message and bind to own message

component.subscribe(impl: Sub -> Box<Any>) can receive message from child component and bind to own message.

Example

```rust fn render() -> Html { Html::component( childcomponent::new().subscribe(|sub| match sub { childcomponent::Sub::Foo => Msg::Bar }) ) }

mod childcomponent { fn new() -> Component { Component::new(initialstate, update, render) }

.
.
.

} ```