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

* 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

View File

@ -370,9 +370,10 @@ struct VideosListProps {
Then we modify the `VideosList` component to pass the "emit" the selected video to the callback. 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)] #[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(); + let on_click = on_click.clone();
videos.iter().map(|video| { videos.iter().map(|video| {
+ let on_video_select = { + 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 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 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 :::note
Struct components act differently. See [the documentation](advanced-topics/struct-components/introduction.mdx) to learn about those. 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: Update the `Video` struct to derive the `Deserialize` trait:
```rust ,ignore {1-2} ```rust ,ignore {1, 3-4}
+ use serde::Deserialize; + use serde::Deserialize;
- #[derive(Clone, PartialEq)] - #[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 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; + use gloo_net::http::Request;
#[function_component(App)] #[function_component(App)]

View File

@ -364,9 +364,10 @@ struct VideosListProps {
Then we modify the `VideosList` component to pass the "emit" the selected video to the callback. 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)] #[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(); + let on_click = on_click.clone();
videos.iter().map(|video| { videos.iter().map(|video| {
+ let on_video_select = { + 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 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 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 :::note
Struct components act differently. See [the documentation](concepts/components/introduction) to learn about those. 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: Update the `Video` struct to derive the `Deserialize` trait:
```rust ,ignore {1-2, 5-6} ```rust ,ignore {1,3-4}
+ use serde::Deserialize; + use serde::Deserialize;
- #[derive(Clone, PartialEq)] - #[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 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; + use gloo_net::http::Request;
#[function_component(App)] #[function_component(App)]