From 027b711fc1c4e51bdd115b655674ef8fc6ff8fa2 Mon Sep 17 00:00:00 2001 From: piny4man Date: Sun, 2 Jul 2023 23:16:18 +0200 Subject: [PATCH] docs: add admonish and fix front crate creation docs --- docs/src/frontend/03_01_setup.md | 6 +++--- docs/src/frontend/03_02_app_startup.md | 2 +- docs/src/frontend/03_03_01_layout.md | 5 +++-- docs/src/frontend/03_03_02_reusable_components.md | 9 +++++++-- docs/src/frontend/03_04_01_global_state.md | 6 ++++-- docs/src/frontend/03_04_02_local_state.md | 8 ++++++-- docs/src/frontend/03_04_state_management.md | 12 ++++-------- 7 files changed, 28 insertions(+), 20 deletions(-) diff --git a/docs/src/frontend/03_01_setup.md b/docs/src/frontend/03_01_setup.md index 5670338..73d04b3 100644 --- a/docs/src/frontend/03_01_setup.md +++ b/docs/src/frontend/03_01_setup.md @@ -24,11 +24,11 @@ rustup target add wasm32-unknown-unknown ### Step 3: Create a Frontend Crate -Create a new frontend crate by executing: +Create a new frontend crate from root of our project by executing: ```bash -cargo new --bin demo -cd demo +cargo new --bin front +cd front ``` ### Step 4: Add Dioxus and the Web Renderer as Dependencies diff --git a/docs/src/frontend/03_02_app_startup.md b/docs/src/frontend/03_02_app_startup.md index 072b45b..b6f9732 100644 --- a/docs/src/frontend/03_02_app_startup.md +++ b/docs/src/frontend/03_02_app_startup.md @@ -113,7 +113,7 @@ fn main() { With the logger initialized, you can now log messages to your browser's console. The following is an example of how you can log an informational message: -```rust +```admonish example log::info!("Message on my console"); ``` diff --git a/docs/src/frontend/03_03_01_layout.md b/docs/src/frontend/03_03_01_layout.md index 83ce3ac..ae080e0 100644 --- a/docs/src/frontend/03_03_01_layout.md +++ b/docs/src/frontend/03_03_01_layout.md @@ -39,8 +39,9 @@ Alright, let's start with the `Header` component. For now, we're keeping it simp Whenever you're building a new component or working in our `main.rs` file, remember to import `dioxus::prelude::*`. It gives you access to all the macros and functions you need. -> **Note:** You can adjust the Tailwind classes to suit your style. - +```admonish title="Tailwind CSS" +You can adjust the Tailwind classes to suit your style. +``` `components/header.rs` ```rust diff --git a/docs/src/frontend/03_03_02_reusable_components.md b/docs/src/frontend/03_03_02_reusable_components.md index 62e4915..be0c5b5 100644 --- a/docs/src/frontend/03_03_02_reusable_components.md +++ b/docs/src/frontend/03_03_02_reusable_components.md @@ -15,7 +15,10 @@ Before we start building, let's break down how we're going to define props in ou These kinds of props are defined separately from the component function, and the generic type needs to be hooked onto the `Scope` type. We use the `#[derive(Props)]` macro to define the props: -> **Note:** You can mark a prop as optional using `#[props(!optional)]` +```admonish tip title="Optional Props" +You can mark a prop as optional using `#[props(!optional)]` +``` + ```rust #[derive(Props)] pub struct FilmModalProps<'a> { @@ -50,7 +53,9 @@ pub fn FilmCard<'a>( Alright, now that we've got props figured out, let's start building some components! -> **Note:** When you want to use props inside your components, here's how to do it: "{cx.props.my_prop}", "{my_prop}", or "{prop.to_string()}". Make sure to keep the curly braces and the prop name as shown. +```admonish info title="Props in RSX" +When you want to use props inside your components, here's how to do it: `"{cx.props.my_prop}"`, `"{my_prop}"`, or `"{prop.to_string()}"`. Make sure to keep the curly braces and the prop name as shown. +``` ## Button diff --git a/docs/src/frontend/03_04_01_global_state.md b/docs/src/frontend/03_04_01_global_state.md index 3cd6803..935b836 100644 --- a/docs/src/frontend/03_04_01_global_state.md +++ b/docs/src/frontend/03_04_01_global_state.md @@ -66,8 +66,10 @@ pub fn FilmModal<'a>(cx: Scope<'a, FilmModalProps>) -> Element<'a> { } ``` -This demonstrates an additional concept of Dioxus: dynamic rendering. Essentially, the component is only rendered if the condition is met. -> **Note:** Dynamic rendering is a technique that enables rendering different content based on a condition. Further information can be found in the [Dioxus Dynamic Rendering documentation](https://dioxuslabs.com/docs/0.3/guide/en/interactivity/dynamic_rendering.html) +This demonstrates an additional concept of Dioxus: **dynamic rendering**. Essentially, the component is only rendered if the condition is met. +```admonish info title="Dynamic Rendering" +Dynamic rendering is a technique that enables rendering different content based on a condition. Further information can be found in the [Dioxus Dynamic Rendering documentation](https://dioxuslabs.com/docs/0.3/guide/en/interactivity/dynamic_rendering.html) +``` `main.rs` ```diff diff --git a/docs/src/frontend/03_04_02_local_state.md b/docs/src/frontend/03_04_02_local_state.md index a631768..6bcc581 100644 --- a/docs/src/frontend/03_04_02_local_state.md +++ b/docs/src/frontend/03_04_02_local_state.md @@ -15,7 +15,9 @@ In the `main.rs` file, the `App` component needs to be updated to introduce some - `selected_film`: The film to be updated. - `force_get_films`: A flag that will be employed to force a refetch of the films list from the API. -> **Note:** We are going to apply dynamic rendering again, this time to render a list of Film Cards only if the films list is not empty. +```admonish +We are going to apply dynamic rendering again, this time to render a list of Film Cards only if the films list is not empty. +``` `main.rs` ```diff @@ -82,7 +84,9 @@ We will implement the delete film feature later. The `FilmModal` component also undergoes an update in the `on_cancel` callback to clear the selected film and close the modal, in case we decide not to create or update a film. -> **Note:** We utilize the `clone` method to generate a copy of the selected film. This is because we're employing the same film object in the `FilmCard`. Remember, ownership rules apply![MEH a revisar] +```admonish tip title="Passing state as props" +We utilize the `clone` method to generate a copy of the selected film. This is because we're employing the same film object in the `FilmCard`. Check [Clone documentation](https://doc.rust-lang.org/rust-by-example/trait/clone.html) from Rust by Example to learn more about the `clone` method. +``` Finally, it's essential to modify the `FilmModal` component to: diff --git a/docs/src/frontend/03_04_state_management.md b/docs/src/frontend/03_04_state_management.md index f9a6f05..14a4dc3 100644 --- a/docs/src/frontend/03_04_state_management.md +++ b/docs/src/frontend/03_04_state_management.md @@ -4,17 +4,13 @@ In this part of our journey, we're going to dive into the lifeblood of the appli While we're only scratching the surface to get the application up and running, it's highly recommended that you refer to the [Dioxus Interactivity](https://dioxuslabs.com/docs/0.3/guide/en/interactivity/index.html) documentation. This way, you'll not only comprehend how it operates more fully, but also grasp the extensive capabilities the framework possesses. -For now, let's start with the basics. Dioxus as is very influenced by React and its ecosystem, so it's no surprise that it uses the same approach to state management, Hooks. -Hooks are Rust functions that take a reference to ScopeState (in a component, you can pass cx), and provide you with functionality and state. Dioxus allows hooks to maintain state across renders through a reference to ScopeState, which is why you must pass &cx to them. - -But wait! We can't use Hooks everywhere, there are some rules we must follow: - -## Rules of Hooks +For now, let's start with the basics. **Dioxus** as is very influenced by *React* and its ecosystem, so it's no surprise that it uses the same approach to state management, Hooks. +Hooks are Rust functions that take a reference to `ScopeState` (in a component, you can pass `cx`), and provide you with functionality and state. **Dioxus** allows hooks to maintain state across renders through a reference to `ScopeState`, which is why you must pass `&cx` to them. +```admonish tip title="Rules of Hooks" 1. Hooks may be only used in components or other hooks 2. On every call to the component function 1. The same hooks must be called 2. In the same order 3. Hooks name's should start with `use_` so you don't accidentally confuse them with regular functions - - +```