Browse Source

docs: Improve "Thinking in React" for color-blind people (#3883)

main
André Elmoznino Laufer 4 years ago
committed by GitHub
parent
commit
cabe649090
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      content/docs/thinking-in-react.md
  2. BIN
      content/images/blog/thinking-in-react-components.png

4
content/docs/thinking-in-react.md

@ -39,9 +39,9 @@ But how do you know what should be its own component? Use the same techniques fo
Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That's because UI and data models tend to adhere to the same *information architecture*. Separate your UI into components, where each component matches one piece of your data model. Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That's because UI and data models tend to adhere to the same *information architecture*. Separate your UI into components, where each component matches one piece of your data model.
![Component diagram](../images/blog/thinking-in-react-components.png) ![Diagram showing nesting of components](../images/blog/thinking-in-react-components.png)
You'll see here that we have five components in our app. We've italicized the data each component represents. You'll see here that we have five components in our app. We've italicized the data each component represents. The numbers in the image correspond to the numbers below.
1. **`FilterableProductTable` (orange):** contains the entirety of the example 1. **`FilterableProductTable` (orange):** contains the entirety of the example
2. **`SearchBar` (blue):** receives all *user input* 2. **`SearchBar` (blue):** receives all *user input*

BIN
content/images/blog/thinking-in-react-components.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Loading…
Cancel
Save