docs: more docs

This commit is contained in:
Jonathan Kelley committed 2021-11-01 18:38:09 -04:00
1 parent 5a21493fb7
commit 9874f342e2
10 files changed
+212 -16

No files matched your search

@@ -26,7 +26,7 @@ struct AppProps {
Now that we have a "logged_in" flag accessible in our props, we can render two different screens:
```rust
fn App((cx, props): Component<AppProps>) -> Element {
fn App((cx, props): Scope<AppProps>) -> Element {
if props.logged_in {
cx.render(rsx!{
DashboardScreen {}
@@ -48,7 +48,7 @@ Rust provides us algebraic datatypes: enums that can contain values. Using the `
For instance, we could run a function that returns a Result:
```rust
fn App((cx, props): Component<()>) -> Element {
fn App((cx, props): Scope<()>) -> Element {
match get_name() {
Ok(name) => cx.render(rsx!( "Hello, {name}!" )),
Err(err) => cx.render(rsx!( "Sorry, I don't know your name, because an error occurred: {err}" )),
@@ -58,7 +58,7 @@ fn App((cx, props): Component<()>) -> Element {
We can even match against values:
```rust
fn App((cx, props): Component<()>) -> Element {
fn App((cx, props): Scope<()>) -> Element {
match get_name() {
"jack" => cx.render(rsx!( "Hey Jack, how's Diane?" )),
"diane" => cx.render(rsx!( "Hey Diana, how's Jack?" )),
@@ -72,7 +72,7 @@ Do note: the `rsx!` macro returns a `Closure`, an anonymous function that has a
To make patterns like these less verbose, the `rsx!` macro accepts an optional first argument on which it will call `render`. Our previous component can be shortened with this alternative syntax:
```rust
fn App((cx, props): Component<()>) -> Element {
fn App((cx, props): Scope<()>) -> Element {
match get_name() {
"jack" => rsx!(cx, "Hey Jack, how's Diane?" ),
"diane" => rsx!(cx, "Hey Diana, how's Jack?" ),
@@ -89,7 +89,7 @@ static App: Fc<()> = |(cx, props)| rsx!(cx, "hello world!");
Alternatively, for match statements, we can just return the builder itself and pass it into a final, single call to `cx.render`:
```rust
fn App((cx, props): Component<()>) -> Element {
fn App((cx, props): Scope<()>) -> Element {
let greeting = match get_name() {
"jack" => rsx!("Hey Jack, how's Diane?" ),
"diane" => rsx!("Hey Diana, how's Jack?" ),