archive-gh-me/yew
1
0
Fork 0
mirror of https://github.com/yewstack/yew.git synced 2026-02-01 17:26:28 +00:00
Code Issues Projects Releases Wiki Activity

GitBook: [master] 2 pages modified

Browse Source
This commit is contained in:
Justin Starry 2019-11-28 17:41:06 +00:00
parent 2af2f04322
commit 3285c2e2ae
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/components.md
View File

@ -6,7 +6,7 @@ description: Components and their lifecycle hooks
## What are Components?
A component is an independent bundle of state that can update itself and render itself to the DOM.
Components are the building blocks of Yew and contain their own state and can update and render themselves to the DOM.
`Component` is probably the most prominent trait in Yew. It describes the lifecycle of a component attached to the DOM. What happens when it is created, how it updates, how it renders, and more, is described by this trait.
@ -32,9 +32,7 @@ html!{
}
```
## Component lifecycle hooks and associated types
### Associated types
## Associated Types
The `Component` trait has two associated types: `Message` and `Properties`.
@ -42,6 +40,8 @@ The `Component` trait has two associated types: `Message` and `Properties`.
The `Properties` associated type is a struct that has implemented the `Properties` trait \(usually by deriving it\). This type is used when creating and updating a component. It is common practice to create an enum called `Props` or `ComponentNameProps` in your component's module and use that as the component's `Properties` type. It is common to shorten "properties" to "props". Since props are handed down from parent components, the root component of your application typically has a `Properties` type of `()`, because it has no state to inherit from its parent.
## Component Lifecycle
### Create
When a component is created, it gets a copy of the component's properties, and a link, and is expected to produce an instance of the component's model - the model being the state that makes up the component.

12
docs/getting-started/README.md
View File

@ -4,6 +4,14 @@ description: How to set up and build your app
# Getting Started
## Installation
First, you'll need to install Rust. You can follow the official instructions [here](https://www.rust-lang.org/tools/install). Next, we'll be using `cargo-web` to create a sample app. You can install it by running:
```bash
cargo install cargo-web
```
## Quick Sample App
First create a new binary project:
@ -81,11 +89,11 @@ This template sets up your root `Component`, called `App` which shows a button w
#### Run your App!
Using [`cargo-web`](https://github.com/koute/cargo-web) is the quickest way to get up and running. First install the tool with `cargo install cargo-web` and then to build and start a development server, run:
Using [`cargo-web`](https://github.com/koute/cargo-web) is the quickest way to get up and running. If you haven't already, install the tool with `cargo install cargo-web` and then build and start a development server by running:
```bash
cargo web start
```
This compiles using the `wasm32-unknown-unknown` target and will make your application available at [http://\[::1\]:8000](http://[::1]:8000) by default. Consult `cargo web start --help` for other options.
`cargo-web` should automatically add the `wasm32-unknown-unknown` target for you and then will build your app and make your application available at [http://\[::1\]:8000](http://[::1]:8000) by default. Consult `cargo web start --help` for other options.