|
@@ -7,7 +7,7 @@
|
|
//!
|
|
//!
|
|
//! # Resources
|
|
//! # Resources
|
|
//!
|
|
//!
|
|
-//! This overview is provides a brief introduction to Dioxus. For a more in-depth guide, make sure to check out:
|
|
|
|
|
|
+//! This overview provides a brief introduction to Dioxus. For a more in-depth guide, make sure to check out:
|
|
//! - [Getting Started](https://dioxuslabs.com/getting-started)
|
|
//! - [Getting Started](https://dioxuslabs.com/getting-started)
|
|
//! - [Book](https://dioxuslabs.com/book)
|
|
//! - [Book](https://dioxuslabs.com/book)
|
|
//! - [Reference](https://dioxuslabs.com/reference)
|
|
//! - [Reference](https://dioxuslabs.com/reference)
|
|
@@ -53,7 +53,7 @@
|
|
//!
|
|
//!
|
|
//! ## Elements & your first component
|
|
//! ## Elements & your first component
|
|
//!
|
|
//!
|
|
-//! To assemble UI trees with Diouxs, you need to use the `render` function on
|
|
|
|
|
|
+//! To assemble UI trees with Dioxus, you need to use the `render` function on
|
|
//! something called `LazyNodes`. To produce `LazyNodes`, you can use the `rsx!`
|
|
//! something called `LazyNodes`. To produce `LazyNodes`, you can use the `rsx!`
|
|
//! macro or the NodeFactory API. For the most part, you want to use the `rsx!`
|
|
//! macro or the NodeFactory API. For the most part, you want to use the `rsx!`
|
|
//! macro.
|
|
//! macro.
|
|
@@ -74,7 +74,7 @@
|
|
//! )
|
|
//! )
|
|
//! ```
|
|
//! ```
|
|
//!
|
|
//!
|
|
-//! The rsx macro accepts attributes in "struct form" and then will parse the rest
|
|
|
|
|
|
+//! The `rsx!` macro accepts attributes in "struct form" and will parse the rest
|
|
//! of the body as child elements and rust expressions. Any rust expression that
|
|
//! of the body as child elements and rust expressions. Any rust expression that
|
|
//! implements `IntoIterator<Item = impl IntoVNode>` will be parsed as a child.
|
|
//! implements `IntoIterator<Item = impl IntoVNode>` will be parsed as a child.
|
|
//!
|
|
//!
|
|
@@ -87,7 +87,7 @@
|
|
//!
|
|
//!
|
|
//! ```
|
|
//! ```
|
|
//!
|
|
//!
|
|
-//! Used within components, the rsx! macro must be rendered into an `Element` with
|
|
|
|
|
|
+//! Used within components, the `rsx!` macro must be rendered into an `Element` with
|
|
//! the `render` function on Scope.
|
|
//! the `render` function on Scope.
|
|
//!
|
|
//!
|
|
//! If we want to omit the boilerplate of `cx.render`, we can simply pass in
|
|
//! If we want to omit the boilerplate of `cx.render`, we can simply pass in
|
|
@@ -104,7 +104,7 @@
|
|
//! }
|
|
//! }
|
|
//! ```
|
|
//! ```
|
|
//!
|
|
//!
|
|
-//! Putting everything together, we can write a simple component that a list of
|
|
|
|
|
|
+//! Putting everything together, we can write a simple component that renders a list of
|
|
//! elements:
|
|
//! elements:
|
|
//!
|
|
//!
|
|
//! ```rust, ignore
|
|
//! ```rust, ignore
|
|
@@ -146,8 +146,8 @@
|
|
//! }
|
|
//! }
|
|
//! ```
|
|
//! ```
|
|
//!
|
|
//!
|
|
-//! Our `Header` component takes in a `title` and a `color` property, which we
|
|
|
|
-//! delcare on an explicit `HeaderProps` struct.
|
|
|
|
|
|
+//! Our `Header` component takes a `title` and a `color` property, which we
|
|
|
|
+//! declare on an explicit `HeaderProps` struct.
|
|
//!
|
|
//!
|
|
//! ```rust, ignore
|
|
//! ```rust, ignore
|
|
//! // The `Props` derive macro lets us add additional functionality to how props are interpreted.
|
|
//! // The `Props` derive macro lets us add additional functionality to how props are interpreted.
|
|
@@ -203,8 +203,8 @@
|
|
//! }
|
|
//! }
|
|
//! ```
|
|
//! ```
|
|
//!
|
|
//!
|
|
-//! Components that beging with an uppercase letter may be called through
|
|
|
|
-//! traditional curly-brace syntax like so:
|
|
|
|
|
|
+//! Components that begin with an uppercase letter may be called with
|
|
|
|
+//! the traditional (for React) curly-brace syntax like so:
|
|
//!
|
|
//!
|
|
//! ```rust, ignore
|
|
//! ```rust, ignore
|
|
//! rsx!(
|
|
//! rsx!(
|
|
@@ -224,7 +224,7 @@
|
|
//! ## Hooks
|
|
//! ## Hooks
|
|
//!
|
|
//!
|
|
//! While components are reusable forms of UI elements, hooks are reusable forms
|
|
//! While components are reusable forms of UI elements, hooks are reusable forms
|
|
-//! of logic. Hooks provide us a way of retrieving state from `Scope` and using
|
|
|
|
|
|
+//! of logic. Hooks provide us a way of retrieving state from the `Scope` and using
|
|
//! it to render UI elements.
|
|
//! it to render UI elements.
|
|
//!
|
|
//!
|
|
//! By convention, all hooks are functions that should start with `use_`. We can
|
|
//! By convention, all hooks are functions that should start with `use_`. We can
|
|
@@ -245,7 +245,7 @@
|
|
//! - Functions with "use_" should not be called in loops or conditionals
|
|
//! - Functions with "use_" should not be called in loops or conditionals
|
|
//!
|
|
//!
|
|
//! In a sense, hooks let us add a field of state to our component without declaring
|
|
//! In a sense, hooks let us add a field of state to our component without declaring
|
|
-//! an explicit struct. However, this means we need to "load" the struct in the right
|
|
|
|
|
|
+//! an explicit state struct. However, this means we need to "load" the struct in the right
|
|
//! order. If that order is wrong, then the hook will pick the wrong state and panic.
|
|
//! order. If that order is wrong, then the hook will pick the wrong state and panic.
|
|
//!
|
|
//!
|
|
//! Most hooks you'll write are simply composition of other hooks:
|
|
//! Most hooks you'll write are simply composition of other hooks:
|
|
@@ -256,8 +256,8 @@
|
|
//! users.get(&id).map(|user| user.logged_in).ok_or(false)
|
|
//! users.get(&id).map(|user| user.logged_in).ok_or(false)
|
|
//! }
|
|
//! }
|
|
//! ```
|
|
//! ```
|
|
-//!
|
|
|
|
-//! To create entirely new foundational hooks, we can use the `use_hook` method on ScopeState.
|
|
|
|
|
|
+//!
|
|
|
|
+//! To create entirely new foundational hooks, we can use the `use_hook` method on `ScopeState`.
|
|
//!
|
|
//!
|
|
//! ```rust, ignore
|
|
//! ```rust, ignore
|
|
//! fn use_mut_string(cx: &ScopeState) -> &mut String {
|
|
//! fn use_mut_string(cx: &ScopeState) -> &mut String {
|
|
@@ -316,9 +316,9 @@
|
|
//!
|
|
//!
|
|
//! Alternatives to Dioxus include:
|
|
//! Alternatives to Dioxus include:
|
|
//! - Yew: supports function components and web, but no SSR, borrowed data, or bump allocation. Rather slow at times.
|
|
//! - Yew: supports function components and web, but no SSR, borrowed data, or bump allocation. Rather slow at times.
|
|
-//! - Percy: supports function components, web, ssr, but lacks in state management
|
|
|
|
|
|
+//! - Percy: supports function components, web, ssr, but lacks state management
|
|
//! - Sycamore: supports function components, web, ssr, but closer to SolidJS than React
|
|
//! - Sycamore: supports function components, web, ssr, but closer to SolidJS than React
|
|
-//! - MoonZoom/Seed: opionated in the Elm model (message, update) - no hooks
|
|
|
|
|
|
+//! - MoonZoom/Seed: opinionated frameworks based on the Elm model (message, update) - no hooks
|
|
//!
|
|
//!
|
|
//! We've put a lot of work into making Dioxus ergonomic and *familiar*.
|
|
//! We've put a lot of work into making Dioxus ergonomic and *familiar*.
|
|
//! Our target audience is TypeSrcipt developers looking to switch to Rust for the web - so we need to be comparabale to React.
|
|
//! Our target audience is TypeSrcipt developers looking to switch to Rust for the web - so we need to be comparabale to React.
|