Next, we need to detect when the user hovers over a section or focuses a link. We can use an event listener to listen for the hover and focus events.
Event handlers are similar to regular attributes, but their name usually starts with on- and they accept closures as values. The closure will be called whenever the event it listens for is triggered. When an event is triggered, information about the event is passed to the closure though the Event structure.
Let's create a onmouseenter event listener in the StoryListing component:
+
Next, we need to detect when the user hovers over a section or focuses a link. We can use an event listener to listen for the hover and focus events.
Event handlers are similar to regular attributes, but their name usually starts with on- and they accept closures as values. The closure will be called whenever the event it listens for is triggered. When an event is triggered, information about the event is passed to the closure though the Event structure.
Let's create a onmouseenter event listener in the StoryListing component:
cx.render(rsx! { div { padding: "0.5rem", @@ -353,7 +353,7 @@ // New match &*preview_state.read() {-
You can read more about Hooks in the Hooks reference
Hooks are a powerful way to manage state in Dioxus, but there are some rules you need to follow to insure they work as expected. Dioxus uses the order you call hooks to differentiate between hooks. Because the order you call hooks matters, you must follow these rules:
These rules mean that there are certain things you can't do with hooks:
+
You can read more about Hooks in the Hooks reference
Hooks are a powerful way to manage state in Dioxus, but there are some rules you need to follow to insure they work as expected. Dioxus uses the order you call hooks to differentiate between hooks. Because the order you call hooks matters, you must follow these rules:
These rules mean that there are certain things you can't do with hooks:
// ❌ don't call hooks in conditionals! // We must ensure that the same hooks will be called every time // But `if` statements only run if the conditional is true! diff --git a/learn/0.4/guide/your_first_component/index.html b/learn/0.4/guide/your_first_component/index.html index 910d2f45f..44b5777ec 100644 --- a/learn/0.4/guide/your_first_component/index.html +++ b/learn/0.4/guide/your_first_component/index.html @@ -153,7 +153,7 @@ } }-
Next, let's wrap our post description in a div. You can create HTML elements in Dioxus by putting a { after the element name and a } after the last child of the element:
+
Next, let's wrap our post description in a div. You can create HTML elements in Dioxus by putting a { after the element name and a } after the last child of the element:
pub fn App(cx: Scope) -> Element { let title = "title"; let by = "author"; @@ -168,7 +168,7 @@ } }-
You can read more about elements in the rsx reference.
Next, let's add some padding around our post listing with an attribute.
Attributes (and listeners) modify the behavior or appearance of the element they are attached to. They are specified inside the {} brackets before any children, using the name: value syntax. You can format the text in the attribute as you would with a text node:
+
You can read more about elements in the rsx reference.
Next, let's add some padding around our post listing with an attribute.
Attributes (and listeners) modify the behavior or appearance of the element they are attached to. They are specified inside the {} brackets before any children, using the name: value syntax. You can format the text in the attribute as you would with a text node:
pub fn App(cx: Scope) -> Element { let title = "title"; let by = "author"; @@ -185,7 +185,7 @@ } }-
Note: All attributes defined in
dioxus-htmlfollow the snake_case naming convention. They transform their snake_case names to HTML's camelCase attributes.
Note: Styles can be used directly outside of the
style:attribute. In the above example,color: "red"is turned intostyle="color: red".
You can read more about elements in the attribute reference
Just like you wouldn't want to write a complex program in a single, long, main function, you shouldn't build a complex UI in a single App function. Instead, you should break down the functionality of an app in logical parts called components.
A component is a Rust function, named in UpperCamelCase, that takes a Scope parameter and returns an Element describing the UI it wants to render. In fact, our App function is a component!
Let's pull our story description into a new component:
+
Note: All attributes defined in
dioxus-htmlfollow the snake_case naming convention. They transform their snake_case names to HTML's camelCase attributes.
Note: Styles can be used directly outside of the
style:attribute. In the above example,color: "red"is turned intostyle="color: red".
You can read more about elements in the attribute reference
Just like you wouldn't want to write a complex program in a single, long, main function, you shouldn't build a complex UI in a single App function. Instead, you should break down the functionality of an app in logical parts called components.
A component is a Rust function, named in UpperCamelCase, that takes a Scope parameter and returns an Element describing the UI it wants to render. In fact, our App function is a component!
Let's pull our story description into a new component:
fn StoryListing(cx: Scope) -> Element { let title = "title"; let by = "author"; @@ -211,7 +211,7 @@ } }-
You can read more about elements in the component reference
Just like you can pass arguments to a function or attributes to an element, you can pass props to a component that customize its behavior!
We can define arguments that components can take when they are rendered (called Props) by adding the #[inline_props] macro before our function definition and adding extra function arguments.
Currently, our StoryListing component always renders the same story. We can modify it to accept a story to render as a prop.
We will also define what a post is and include information for how to transform our post to and from a different format using serde. This will be used with the hackernews API in a later chapter:
+
You can read more about elements in the component reference
Just like you can pass arguments to a function or attributes to an element, you can pass props to a component that customize its behavior!
We can define arguments that components can take when they are rendered (called Props) by adding the #[inline_props] macro before our function definition and adding extra function arguments.
Currently, our StoryListing component always renders the same story. We can modify it to accept a story to render as a prop.
We will also define what a post is and include information for how to transform our post to and from a different format using serde. This will be used with the hackernews API in a later chapter:
use chrono::{DateTime, Utc}; use serde::{Deserialize, Serialize}; @@ -302,7 +302,7 @@ } }-
You can read more about Props in the Props reference
Finally, by combining elements and attributes, we can make our post listing much more appealing:
Full code up to this point:
+
You can read more about Props in the Props reference
Finally, by combining elements and attributes, we can make our post listing much more appealing:
Full code up to this point:
use dioxus::prelude::*; // Define the Hackernews types @@ -443,7 +443,7 @@ }) }-