archive-gh-me/yew
1
0
Fork 0
mirror of https://github.com/yewstack/yew.git synced 2025-12-08 21:26:25 +00:00
Code Issues Projects Releases Wiki Activity

Fix +/- marker and highlighting with ignore in the tutorial (#2939)

Browse Source 
* Fix missing +/- markers

* Fix missing period

* Fix change highlights lines

* Fix missing +/- markers and ignore highlights

* Fix missing period.

* Fix changes hightlighters

* Fix one space too many
This commit is contained in:
Tilman 2022-11-06 14:18:03 +01:00 committed by GitHub
parent ccaa06a2fa
commit 868b2c235a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
website/docs/tutorial/index.mdx
View File

@ -370,9 +370,10 @@ struct VideosListProps {
Then we modify the `VideosList` component to pass the "emit" the selected video to the callback.
```rust ,ignore {3,5-11,14-15}
```rust ,ignore {2-4,6-12,15-16}
#[function_component(VideosList)]
fn videos_list(VideosListProps { videos, on_click }: &VideosListProps) -> Html {
-fn videos_list(VideosListProps { videos }: &VideosListProps) -> Html {
+fn videos_list(VideosListProps { videos, on_click }: &VideosListProps) -> Html {
+ let on_click = on_click.clone();
videos.iter().map(|video| {
+ let on_video_select = {
@ -460,7 +461,7 @@ element returned by the `Iterator` with a special `{ for ... }` syntax
Remember the `use_state` used earlier? That is a special function, called a "hook". Hooks are used to "hook" into
lifecycle of a function component and perform actions. You can learn more about this hook, and others
[here](concepts/function-components/hooks/introduction.mdx#pre-defined-hooks)
[here](concepts/function-components/hooks/introduction.mdx#pre-defined-hooks).
:::note
Struct components act differently. See [the documentation](advanced-topics/struct-components/introduction.mdx) to learn about those.
@ -489,7 +490,7 @@ wasm-bindgen-futures = "0.4"
Update the `Video` struct to derive the `Deserialize` trait:
```rust ,ignore {1-2}
```rust ,ignore {1, 3-4}
+ use serde::Deserialize;
- #[derive(Clone, PartialEq)]
@ -504,7 +505,7 @@ struct Video {
Now as the last step, we need to update our `App` component to make the fetch request instead of using hardcoded data
```rust ,ignore {3-23,32-33}
```rust ,ignore {1,5-25,34-35}
+ use gloo_net::http::Request;
#[function_component(App)]

11
website/versioned_docs/version-0.19.0/tutorial/index.mdx
View File

@ -364,9 +364,10 @@ struct VideosListProps {
Then we modify the `VideosList` component to pass the "emit" the selected video to the callback.
```rust ,ignore {3,5-11,14-15}
```rust ,ignore {2-4,6-12,15-16}
#[function_component(VideosList)]
fn videos_list(VideosListProps { videos, on_click }: &VideosListProps) -> Html {
-fn videos_list(VideosListProps { videos }: &VideosListProps) -> Html {
+fn videos_list(VideosListProps { videos, on_click }: &VideosListProps) -> Html {
+ let on_click = on_click.clone();
videos.iter().map(|video| {
+ let on_video_select = {
@ -453,7 +454,7 @@ element returned by the `Iterator` with the `{ for ... }` syntax.
Remember the `use_state` used earlier? That is a special function, called a "hook". Hooks are used to "hook" into
lifecycle of a function component and perform actions. You can learn more about this hook, and others
[here](concepts/function-components/pre-defined-hooks#use_state)
[here](concepts/function-components/pre-defined-hooks#use_state).
:::note
Struct components act differently. See [the documentation](concepts/components/introduction) to learn about those.
@ -482,7 +483,7 @@ wasm-bindgen-futures = "0.4"
Update the `Video` struct to derive the `Deserialize` trait:
```rust ,ignore {1-2, 5-6}
```rust ,ignore {1,3-4}
+ use serde::Deserialize;
- #[derive(Clone, PartialEq)]
@ -497,7 +498,7 @@ struct Video {
Now as the last step, we need to update our `App` component to make the fetch request instead of using hardcoded data
```rust ,ignore {3-23,32-33}
```rust ,ignore {1,5-25,34-35}
+ use gloo_net::http::Request;
#[function_component(App)]