mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
f0209c786f
* 0.20 Changelog * Improve changelog generator * Add blog post * Add blog post * Apply suggestions from code review Co-authored-by: WorldSEnder <WorldSEnder@users.noreply.github.com> Co-authored-by: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com> * update Changelog * update Cargo.toml * changelog gen compiles * website version 0.20 * add migration guides * prettier * i18n Co-authored-by: WorldSEnder <WorldSEnder@users.noreply.github.com> Co-authored-by: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com>
33 lines
1.2 KiB
Plaintext
33 lines
1.2 KiB
Plaintext
---
|
|
title: 'Introduction'
|
|
description: 'Components in Yew'
|
|
---
|
|
|
|
## What are Components?
|
|
|
|
Components are the building blocks of Yew. They manage their own state and can render themselves to the DOM.
|
|
Components are created by implementing the `Component` trait for a type.
|
|
|
|
## Writing Component's markup
|
|
|
|
Yew uses Virtual DOM to render elements to the DOM. The Virtual DOM tree can be constructed by using the
|
|
`html!` macro. `html!` uses syntax which is similar to HTML but is not exactly the same. The rules are also
|
|
much stricter. It also provides super-powers like conditional rendering and rendering of lists using iterators.
|
|
|
|
:::info
|
|
[Learn more about the `html!` macro, how it's used and its syntax](concepts/html/introduction.mdx)
|
|
:::
|
|
|
|
## Passing data to a component
|
|
|
|
Yew components use _props_ to communicate between parent and children. A parent component may pass any data as props to
|
|
its children. Props are similar to HTML attributes but any Rust type can be passed as props.
|
|
|
|
:::info
|
|
[Learn more about the props](advanced-topics/struct-components/properties.mdx)
|
|
:::
|
|
|
|
:::info
|
|
For other than parent/child communication, use [contexts](../../concepts/contexts.mdx)
|
|
:::
|