# Start api server
% cd actix_api
% cargo run
# Start client
% cd yew_ui
% trunk serve --open
curl -X POST -d '{"title": "This is a tweet", "body": "hello world"}' -H "Content-type: application/json" http://localhost:3000/posts
- https://docs.rs/rusqlite/latest/rusqlite/struct.Statement.html#method.query_map
- https://docs.rs/hdbconnect/latest/hdbconnect/struct.PreparedStatement.html
- query_map: https://docs.rs/rusqlite/0.6.0/rusqlite/struct.Statement.html#method.query_map
- Executes the prepared statement and maps a function over the resulting rows.Unlike the iterator produced by query, the returned iterator does not expose the possibility for accessing stale rows.
- serialize(rust -> network)
- deserialize(network -> rust: parse)
- https://yew.rs/docs/tutorial
- csr(client side rendering): https://docs.rs/yew/latest/yew/#supported-features
- convert between javascript Promise to Rust Future
- https://rustwasm.github.io/wasm-bindgen/api/wasm_bindgen_futures/
- wasm-logger: https://yew.rs/docs/more/debugging
- gloo_console
- counter
You are currently reading about function components - the recommended way to write components when starting with Yew and when writing simple presentation logic.
There is a more advanced, but less accessible, way to write components - Struct components. They allow very detailed control, though you will not need that level of detail most of the time.
- https://docs.rs/yew/latest/yew/functional/fn.use_state.html
- input value change like react
- debug
log::debug!("{}", state);
- console上に表示される
- web_sys: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.InputEvent.html
- MDN: https://developer.mozilla.org/en-US/docs/Web/API/InputEvent
- inputEvent.data => get input event
- web_sys's InputEvent is almost same with MDN
- web_sys: https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Event.html
- MDN: https://developer.mozilla.org/en-US/docs/Web/API/Event
- onchange is the event that is triggerd after one event is done
- oninput is the event that is triggered when typing into input area
- so, you should use oninput if you would like to do like react onchange
// ex
let input_value = use_state(|| String::from(""));
let handle_change = {
let input_value = input_value.clone();
Callback::from(move |e: web_sys::InputEvent| {
let new_input_value: HtmlInputElement = e.target_unchecked_into();
input_value.set(new_input_value.value());
})
};
- ref: yewstack/yew#233
- UseStateHandle 構造体は set メソッドにより値を設定します。* 演算子により参照を外すことにより UseStateHandle 構造体より現在の状態を取得できます。
- the value of use_state is wrapped by UseStateHandle.
- *if you wanna access to the value wrapped UseStateHandle, you can use (dereference).
- https://trunkrs.dev/assets/
- if you wanna make directory for styles, you add
data-trunk
to link tag like below
<link data-trunk rel="css" href="styles/index.css" />