` for more details on what is happening.
### Congratulations
You have now successfully set up your Yew development environment and built your first Yew web application.
## Building HTML
Yew makes use of Rust's procedural macros and provides us with a syntax similar to JSX (an extension to JavaScript
which allows you to write HTML-like code inside JavaScript) to create the markup.
### Converting classic HTML
Since we already have a pretty good idea of what our website will look like, we can simply translate our mental draft
into a representation compatible with `html!`. If you are comfortable writing simple HTML, you should have no problem
writing marking inside `html!`. It is important to note that the macro does differ from HTML in a few ways:
1. Expressions must be wrapped in curly braces (`{ }`)
2. There must only be one root node. If you want to have multiple elements without wrapping them in a container,
an empty tag/fragment (`<> ... `) is used
3. Elements must be closed properly.
We want to build a layout that looks something like this in raw HTML:
```html
RustConf Explorer
Videos to watch
John Doe: Building and breaking things
Jane Smith: The development process
Matt Miller: The Web 7.0
Tom Jerry: Mouseless development
John Doe: Building and breaking things
```
Now, let's convert this HTML into `html!`. Type (or copy/paste) the following snippet into the body of `app` function
such that the value of `html!` is returned by the function
```rust ,ignore
html! {
<>
{ "RustConf Explorer" }
{"Videos to watch"}
{ "John Doe: Building and breaking things" }
{ "Jane Smith: The development process" }
{ "Matt Miller: The Web 7.0" }
{ "Tom Jerry: Mouseless development" }
{ "John Doe: Building and breaking things" }
}
```
Refresh the browser page, and you should see the following output displayed:
### Using Rust language constructs in the markup
A big advantage of writing markup in Rust is that we get all the coolness of Rust in our markup.
Now, instead of hardcoding the list of videos in the HTML, let's define them as a `Vec` of `Video` structs.
We create a simple `struct` (in `main.rs` or any file of our choice) that will hold our data.
```rust
struct Video {
id: usize,
title: String,
speaker: String,
url: String,
}
```
Next, we will create instances of this struct in our `app` function and use those instead of hardcoding the data:
```rust
use website_test::tutorial::Video; // replace with your own path
let videos = vec![
Video {
id: 1,
title: "Building and breaking things".to_string(),
speaker: "John Doe".to_string(),
url: "https://youtu.be/PsaFVLr8t4E".to_string(),
},
Video {
id: 2,
title: "The development process".to_string(),
speaker: "Jane Smith".to_string(),
url: "https://youtu.be/PsaFVLr8t4E".to_string(),
},
Video {
id: 3,
title: "The Web 7.0".to_string(),
speaker: "Matt Miller".to_string(),
url: "https://youtu.be/PsaFVLr8t4E".to_string(),
},
Video {
id: 4,
title: "Mouseless development".to_string(),
speaker: "Tom Jerry".to_string(),
url: "https://youtu.be/PsaFVLr8t4E".to_string(),
},
];
```
To display them, we need to convert the `Vec` into `Html`. We can do that by creating an iterator,
mapping it to `html!` and collecting it as `Html`:
```rust ,ignore
let videos = videos.iter().map(|video| html! {
{format!("{}: {}", video.speaker, video.title)}
}).collect::();
```
:::tip
Keys on list items help Yew keep track of which items have changed in the list, resulting in faster re-renders. [It is always recommended to use keys in lists](/concepts/html/lists.mdx#keyed-lists).
:::
And finally, we need to replace the hardcoded list of videos with the `Html` we created from the data:
```rust ,ignore {6-10}
html! {
<>
{ "RustConf Explorer" }
{ "Videos to watch" }
-
{ "John Doe: Building and breaking things" }
-
{ "Jane Smith: The development process" }
-
{ "Matt Miller: The Web 7.0" }
-
{ "Tom Jerry: Mouseless development" }
+ { videos }
// ...
}
```
## Components
Components are the building blocks of Yew applications. By combining components, which can be made of other components,
we build our application. By structuring our components for re-usability and keeping them generic, we will be able to use
them in multiple parts of our application without having to duplicate code or logic.
The `app` function we have been using so far is a component, called `App`. It is a "function component".
There are two different types of components in Yew.
1. Struct Components
2. Function Components
In this tutorial, we will be using function components.
Now, let's split up our `App` component into smaller components. We begin by extracting the videos list into
its own component.
```rust ,compile_fail
use yew::prelude::*;
struct Video {
id: usize,
title: String,
speaker: String,
url: String,
}
#[derive(Properties, PartialEq)]
struct VideosListProps {
videos: Vec