From f5907a682e8320951c11cb6172b77abe4ca150e7 Mon Sep 17 00:00:00 2001 From: Reinis Mazeiks Date: Thu, 10 Feb 2022 15:50:11 +0200 Subject: [PATCH] Add a better introduction to what Components are. --- .../components/component_example_title.png | Bin 0 -> 8426 bytes .../components/component_example_votes.png | Bin 0 -> 4244 bytes docs/guide/src/components/index.md | 28 +-------- docs/guide/src/components/propsmacro.md | 55 +++++++++++++++--- 4 files changed, 50 insertions(+), 33 deletions(-) create mode 100644 docs/guide/src/components/component_example_title.png create mode 100644 docs/guide/src/components/component_example_votes.png diff --git a/docs/guide/src/components/component_example_title.png b/docs/guide/src/components/component_example_title.png new file mode 100644 index 0000000000000000000000000000000000000000..60a5a329e36bac5b3aa2c63e8c27e3d9fed86b68 GIT binary patch literal 8426 zcmc(FWl$VIllB6^AvlY(S)AZba9Ci`V8Pu9?k)iWi%W3#kl>QwZo!t|ki`kXHMkz{ zRee?8y?6KC{kyK3nVPDe>7J*iXL_ERC^c1iTr3JK004li0EK7(07%aTu#JKCTq~EZ zlPRv;p&dj~>Qq4q>g#5E; zu_^d2!HFa>01^N{07d#N3|4Nc2OvYDM`=a{(KR_IB0#ACt&`JJJ8I*OTZr@93AH%w z*Gd}3e=}g^E|{-OxwBInV`H;F!*j^QX6?T?{NQtYeckx- zC5}T<{0R`gOZ>w22+pWj`=i+|IX55YJ%eE8 zwnri%0f{WbH>@}4WRv});gXJUmdsOY^0sMD-MsQ4>V^i~lO>BpLiM`Y;Z>NpRHn

J;Nn&ICk=JERm+-JGAaYXOxcTH^pRBQ5bj3h~ zG_GViW7!_i*~M0TRJ(Ouq{OA6{REtNyNFK2hY@v

7N*+YycQ)0%PpveYr-6z*}L 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 literal 0 HcmV?d00001 diff --git a/docs/guide/src/components/component_example_votes.png b/docs/guide/src/components/component_example_votes.png new file mode 100644 index 0000000000000000000000000000000000000000..b46739b2448965d953193dbdea05893caeff30bf GIT binary patch literal 4244 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 f|2HLT^#mAoxhbQ~VP)# Dioxus `Props` is very similar to [@idanarye](https://github.com/idanarye)'s [TypedBuilder crate](https://github.com/idanarye/rust-typed-builder) and supports many of the same parameters. @@ -20,16 +20,41 @@ There are 2 flavors of Props: owned and borrowed. Owned Props are very simple – they don't borrow anything. Example: ```rust -#[derive(Props, PartialEq)] -struct MyProps { - name: String +// Remember: owned props must implement PartialEq! +#[derive(PartialEq, Props)] +struct VoteButtonProps { + score: i32 } -fn Demo(cx: Scope) -> Element { - todo!() +fn VoteButton(cx: Scope) -> Element { + cx.render(rsx!{ + div { + div { "+" } + div { "{cx.props.score}"} + div { "-" } + } + }) } ``` +Now, we can use the VoteButton Component like we would use a regular HTML element: + +```rust +fn main() { + dioxus::desktop::launch(App); +} + +fn App(cx: Scope) -> Element { + cx.render(rsx! ( + VoteButton { score: 42 } + )) +} +``` + +And we can see that the Component indeed gets rendered: + +![Screenshot of running app. Text: "+ \ 42 \ -"](component_example_votes.png) + > The simplest Owned Props you can have is `()` - or no value at all. This is what the `App` Component takes as props. `Scope` accepts a generic for the Props which defaults to `()`. > > ```rust @@ -42,7 +67,7 @@ fn Demo(cx: Scope) -> Element { ### Borrowed Props -Owning a string works well as long as you only need it in one place. But what if we need to pass a String from a `Post` Component to a `TitleCard` subcomponent? A naive solution might be to [`.clone()`](https://doc.rust-lang.org/std/clone/trait.Clone.html) the String, creating a copy of it – but this would be inefficient, especially for larger Strings. +Owning props works well if your props are easy to copy around - like a single number. But what if we need to pass a larger data type, like a String from an `App` Component to a `TitleCard` subcomponent? A naive solution might be to [`.clone()`](https://doc.rust-lang.org/std/clone/trait.Clone.html) the String, creating a copy of it for the subcomponent – but this would be inefficient, especially for larger Strings. Rust allows for something more efficient – borrowing the String as a `&str`. Instead of creating a copy, this will give us a reference to the original String – this is what Borrowed Props are for! @@ -61,7 +86,21 @@ fn TitleCard<'a>(cx: Scope<'a, TitleCardProps<'a>>) -> Element { } ``` -This lifetime `'a` tells the compiler that as long as `title` exists, the String it was created from must also exist. Dioxus will happily accept such a component. +This lifetime `'a` tells the compiler that as long as `title` exists, the String it was created from must also exist. Dioxus will happily accept such a component – we can now render it alongside our VoteButton! + +```rust +fn App(cx: Scope) -> Element { + // For the sake of an example, we create the &str here. + // But you might as well borrow it from an owned String type. + let hello = "Hello Dioxus!"; + + cx.render(rsx! ( + VoteButton { score: 42 }, + TitleCard { title: hello } + )) +} +``` +![New screenshot of running app, now including a "Hello Dioxus!" heading.](component_example_title.png) ## Memoization