Add a better introduction to what Components are.
This commit is contained in:
1 parent
fc7d94b8d1
commit
f5907a682e
4 files changed
+50
-33
No files matched your search
@@ -12,32 +12,10 @@ In short, a component is a special function that takes input properties and outp
|
||||
|
||||
### Real-world example
|
||||
|
||||
Take a look at a post on Reddit:
|
||||
Let's use a Reddit post as an example:
|
||||
|
||||

|
||||
|
||||
We can build this post as a component, consisting of multiple subcomponents. It has several inputs:
|
||||
|
||||
- The score
|
||||
- The number of comments
|
||||
- How long ago it was posted
|
||||
- The url short address
|
||||
- The title
|
||||
- The username of the original poster
|
||||
|
||||
If we wanted to sketch out these requirements in Rust, we would start with a struct:
|
||||
|
||||
```rust
|
||||
struct PostData {
|
||||
score: i32,
|
||||
comment_count: u32,
|
||||
post_time: Instant,
|
||||
url: String,
|
||||
title: String,
|
||||
original_poster_name: String
|
||||
}
|
||||
```
|
||||
|
||||
If we look at the layout of the component, we notice quite a few buttons and pieces of functionality:
|
||||
|
||||
- Upvote/Downvote
|
||||
@@ -52,7 +30,7 @@ If we look at the layout of the component, we notice quite a few buttons and pie
|
||||
- View article
|
||||
- Visit user
|
||||
|
||||
If we included all this functionality in one `rsx!` call it would be huge! Instead, let's break the post down into some core pieces:
|
||||
If we included all this functionality in one `rsx!` call it would be huge! Instead, let's break the post down into Components:
|
||||
|
||||

|
||||
|
||||
@@ -61,4 +39,4 @@ If we included all this functionality in one `rsx!` call it would be huge! Inste
|
||||
- **MetaCard**: Original Poster, Time Submitted
|
||||
- **ActionCard**: View comments, Share, Save, Hide, Give award, Report, Crosspost
|
||||
|
||||
In this chapter, we'll learn how to define our own components.
|
||||
In this chapter, we'll learn how to define these components.
|
||||
Reference in new issue
Block a user