docs: create a new "advanced" book
This commit is contained in:
1 parent
54d050cf89
commit
97a2c62804
69 files changed
+24
-9
No files matched your search
File renamed without changes.
@@ -33,7 +33,7 @@ Examples:
|
||||
- [ECommerce]()
|
||||
- [Photo Editor]()
|
||||
|
||||
[](https://github.com/dioxusLabs/todomvc/)
|
||||
[](https://github.com/dioxusLabs/todomvc/)
|
||||
|
||||
### SSR Support
|
||||
---
|
||||
@@ -29,7 +29,8 @@
|
||||
- [Defining Components](tutorial/components.md)
|
||||
- [Styling](tutorial/styling.md)
|
||||
- [Publishing](tutorial/publishing.md)
|
||||
- [Topics in Depth](depth/topics.md)
|
||||
- [Next Steps and Advanced Topics](final/index.md)
|
||||
<!-- - [Topics in Depth](depth/topics.md)
|
||||
- [RSX](depth/rsx.md)
|
||||
- [Components](depth/components.md)
|
||||
- [Props](depth/props.md)
|
||||
@@ -73,7 +74,7 @@
|
||||
- [State Management]()
|
||||
- [Suspense]()
|
||||
- [task]()
|
||||
- [Testing]()
|
||||
- [Testing]() -->
|
||||
|
||||
-----------
|
||||
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -135,7 +135,7 @@ rsx!( li { key: "a" } )
|
||||
Keys tell Dioxus which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps Dioxus infer what exactly has happened, and make the correct updates to the screen
|
||||
|
||||
|
||||
nb: the language from this section is strongly borrowed from [React's guide on keys](https://reactjs.org/docs/lists-and-keys.html).
|
||||
NB: the language from this section is strongly borrowed from [React's guide on keys](https://reactjs.org/docs/lists-and-keys.html).
|
||||
### Where to get your key
|
||||
|
||||
Different sources of data provide different sources of keys:
|
||||
@@ -155,7 +155,7 @@ Imagine that files on your desktop didn’t have names. Instead, you’d refer t
|
||||
File names in a folder and Element keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the position changes due to reordering, the key lets Dioxus identify the item throughout its lifetime.
|
||||
|
||||
### Gotcha
|
||||
You might be tempted to use an item’s index in the array as its key. In fact, that’s what React will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
|
||||
You might be tempted to use an item’s index in the array as its key. In fact, that’s what Dioxus will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
|
||||
|
||||
Similarly, do not generate keys on the fly, `gen_random`. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.
|
||||
|
||||
@@ -164,4 +164,11 @@ Note that your components won’t receive key as a prop. It’s only used as a h
|
||||
Post { key: "{key}", id: "{id}" }
|
||||
```
|
||||
|
||||
## Moving on
|
||||
|
||||
In this section, we learned:
|
||||
- How to render lists of data
|
||||
- How to use iterator tools to filter and transform data
|
||||
- How to use keys to render lists efficiently
|
||||
|
||||
Moving forward, we'll finally cover user input and interactivity.
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -0,0 +1,10 @@
|
||||
# Next Steps and Advanced Topics
|
||||
|
||||
|
||||
Congrats! You've made it through the `learning Dioxus` book. Throughout this tutorial, you've learned a ton:
|
||||
|
||||
- How to build User Interfaces with Elements
|
||||
- How to compose Element groups together as Components
|
||||
- How to handle user input with event listeners
|
||||
- How to manage global and local state
|
||||
- How to work with async using tasks, coroutines, and suspense
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -34,7 +34,7 @@ You can update the dioxus-cli at any time with:
|
||||
$ cargo install --force dioxus-cli
|
||||
```
|
||||
|
||||
If your version of the CLI is out of date, it'll remind you to update whenever a new version is uploaded to Rust's package manager [crates.io](https://crates.io). We use a dedicated 1st-party CLI to save you from having to run potentially untrusted code every time you add a crate to your project - as is standard in the NPM ecosystem. You can vet the source of the Dioxus-CLI yourself at its [GitHub repo](https://github.com/jkelleyrtp/dioxus/tree/master/packages/cli).
|
||||
We provide this 1st-party tool to save you from having to run potentially untrusted code every time you add a crate to your project - as is standard in the NPM ecosystem.
|
||||
|
||||
### Suggested extensions
|
||||
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Whitespace-only changes.
Whitespace-only changes.
Whitespace-only changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -1 +0,0 @@
|
||||
# For Developers
|
||||
@@ -1 +0,0 @@
|
||||
# Alternative Backends
|
||||
@@ -1 +0,0 @@
|
||||
# Preprocessors
|
||||
Reference in new issue
Block a user