dnrops
/
yew
mirror of https://github.com/yewstack/yew
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

simple counter application with functional components (#2603) 

* simple counter application with functional components

* clean up some comments

* use the word 'function' instead of 'functional'

Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com>

* add the counter functional example package to workspace root cargo toml

* add data-trunk link tag in index html

* include counter functional into the examples readme file

Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com>
This commit is contained in:
zahash 2022-04-12 16:24:15 +05:30 committed by GitHub
parent daf6ec0152
commit 73771562c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Cargo.toml
View File

@ -12,6 +12,7 @@ members = [
"examples/boids",
"examples/contexts",
"examples/counter",
"examples/counter_functional",
"examples/dyn_create_destroy_apps",
"examples/file_upload",
"examples/function_memory_game",

1
examples/README.md
View File

@ -34,6 +34,7 @@ As an example, check out the TodoMVC example here: <https://examples.yew.rs/todo
| [boids](boids) | S | Yew port of [Boids](https://en.wikipedia.org/wiki/Boids) |
| [contexts](contexts) | F | A technical demonstration of Context API. |
| [counter](counter) | S | Simple counter which can be incremented and decremented |
| [counter_functional](counter_functional) | F | Simple counter which can be incremented and decremented made using function components |
| [dyn_create_destroy_apps](dyn_create_destroy_apps) | S | Uses the function `start_app_in_element` and the `AppHandle` struct to dynamically create and delete Yew apps |
| [file_upload](file_upload) | S | Uses the `gloo::file` to read the content of user uploaded files |
| [function_todomvc](function_todomvc) | F | Implementation of [TodoMVC](http://todomvc.com/) using function components and hooks. |

9
examples/counter_functional/Cargo.toml Normal file
View File

@ -0,0 +1,9 @@
[package]
name = "counter_functional"
version = "0.1.0"
authors = ["Zahash <zahash.z@gmail.com>"]
edition = "2021"
license = "MIT OR Apache-2.0"
[dependencies]
yew = { path = "../../packages/yew", features = ["csr"] }

21
examples/counter_functional/README.md Normal file
View File

@ -0,0 +1,21 @@
# Counter Example
A simple example of a counter which can be increased or decreased with the press of a button implemented using function components
## Running
Run a debug version of this application:
```bash
trunk serve
```
Run a release version of this application:
```bash
trunk serve --release
```
## Concepts
Demonstrates the use of function components.

9
examples/counter_functional/index.html Normal file
View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Counter Function Yew</title>
<link data-trunk rel="rust" />
</head>
<body></body>
</html>

28
examples/counter_functional/src/main.rs Normal file
View File

@ -0,0 +1,28 @@
use yew::prelude::*;
#[function_component(App)]
fn app() -> Html {
let state = use_state(|| 0);
let incr_counter = {
let state = state.clone();
Callback::from(move |_| state.set(*state + 1))
};
let decr_counter = {
let state = state.clone();
Callback::from(move |_| state.set(*state - 1))
};
html!(
<>
<p> {"current count: "} {*state} </p>
<button onclick={incr_counter}> {"+"} </button>
<button onclick={decr_counter}> {"-"} </button>
</>
)
}
fn main() {
yew::Renderer::<App>::new().render();
}