> For the complete documentation index, see [llms.txt](https://kagura.gitbook.io/kagura-nusa-en/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kagura.gitbook.io/kagura-nusa-en/single-component/creates-a-component.md). # Creates a Component ## HelloComponent Kagura recomends to create a component by file. Basically, file and component have same name. {% code title="src/hello\_component.rs" %} ```rust use kagura::pelude::*; use nusa::prelude::*; pub struct Props {} pub enum Msg {} pub enum On {} pub struct HelloComponent {} impl Component for HelloComponent { type Props = Props; type Msg = Msg; type Event = On; } impl HtmlComponent for HelloComponent {} impl Constructor for HelloComponent { fn constructor(_props: Self::Props) -> Self { Self {} } } impl Update for HelloComponent {} impl Render for HelloComponent { type Children = (); fn render(&self, _children: Self::Children) -> Html { Html::h1( Attributes::new(), Events::new(), vec![Html::text("Hello Component")] ) } } ``` {% endcode %} ## Mounts a Component {% code title="src/lib.rs" %} ```rust extern crate js_sys; extern crate kagura; extern crate nusa; extern crate wasm_bindgen; extern crate wasm_bindgen_futures; extern crate web_sys; use nusa::html::html_element::Attributes; use nusa::html::html_element::Events; use nusa::Html; use wasm_bindgen::prelude::*; mod hello_component; use hello_component::HelloComponent; #[wasm_bindgen(start)] pub fn main() { wasm_bindgen_futures::spawn_local(kagura::Runtime::run(nusa::dom_node::BasicDomNode::new( entry_point(), |this| { vec![HelloComponent::new( this, None, hello_component::Props {}, Sub::none(), () )] }, ))); } fn entry_point() -> web_sys::Node { web_sys::window() .unwrap() .document() .unwrap() .get_element_by_id("app") .unwrap() .into() } ``` {% endcode %}