Add a better introduction to what Components are.

This commit is contained in:
Reinis Mazeiks committed 2022-02-10 15:50:11 +02:00
1 parent fc7d94b8d1
commit f5907a682e
4 files changed
+50 -33

No files matched your search

+3 -25
View File
@@ -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:
![Reddit Post](../images/reddit_post.png)
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:
![Post as Component](../images/reddit_post_components.png)
@@ -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.