Skip to content

Commit e4be299

Browse files
committed
Find the minimal but complete representation of UI state
1 parent acf3f5c commit e4be299

File tree

2 files changed

+43
-56
lines changed

2 files changed

+43
-56
lines changed

docs/src/learn/thinking-in-react.md

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -70,15 +70,15 @@ You can either build "top down" by starting with building the components higher
7070

7171
=== "app.py"
7272

73-
```python
74-
{% include "../../examples/python/thinking_in_react/build_a_static_version_in_react.py" start="# start" end="# end" %}
75-
```
73+
```python
74+
{% include "../../examples/python/thinking_in_react/build_a_static_version_in_react.py" start="# start" end="# end" %}
75+
```
7676

7777
=== "styles.css"
7878

79-
```css
80-
{% include "../../examples/css/thinking_in_react/build_a_static_version_in_react.css" %}
81-
```
79+
```css
80+
{% include "../../examples/css/thinking_in_react/build_a_static_version_in_react.css" %}
81+
```
8282

8383
=== ":material-play: Run"
8484

@@ -92,7 +92,7 @@ After building your components, you'll have a library of reusable components tha
9292

9393
!!! warning "Pitfall"
9494

95-
At this point, you should not be using any state values. That’s for the next step!
95+
At this point, you should not be using any state values. That’s for the next step!
9696

9797
## Step 3: Find the minimal but complete representation of UI state
9898

@@ -124,18 +124,16 @@ Let's go through them one by one again:
124124

125125
This means only the search text and the value of the checkbox are state! Nicely done!
126126

127-
<DeepDive>
128-
129-
#### Props vs State
127+
!!! info "Deep Dive"
130128

131-
There are two types of "model" data in React: props and state. The two are very different:
129+
<font size="4">**Props vs State**</font>
132130

133-
- [**Props** are like arguments you pass](/learn/passing-props-to-a-component) to a function. They let a parent component pass data to a child component and customize its appearance. For example, a `Form` can pass a `color` prop to a `Button`.
134-
- [**State** is like a component’s memory.](/learn/state-a-components-memory) It lets a component keep track of some information and change it in response to interactions. For example, a `Button` might keep track of `isHovered` state.
131+
There are two types of "model" data in React: props and state. The two are very different:
135132

136-
Props and state are different, but they work together. A parent component will often keep some information in state (so that it can change it), and _pass it down_ to child components as their props. It's okay if the difference still feels fuzzy on the first read. It takes a bit of practice for it to really stick!
133+
- [**Props** are like arguments you pass](../learn/passing-props-to-a-component.md) to a function. They let a parent component pass data to a child component and customize its appearance. For example, a `html.form` can pass a `color` prop to a `html.button`.
134+
- [**State** is like a component’s memory.](../learn/state-a-components-memory.md) It lets a component keep track of some information and change it in response to interactions. For example, a `html.button` might keep track of `is_hovered` state.
137135

138-
</DeepDive>
136+
Props and state are different, but they work together. A parent component will often keep some information in state (so that it can change it), and _pass it down_ to child components as their props. It's okay if the difference still feels fuzzy on the first read. It takes a bit of practice for it to really stick!
139137

140138
## Step 4: Identify where your state should live
141139

docs/src/static/css/extra.css

Lines changed: 30 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -24,51 +24,26 @@
2424

2525
/* General admonition styling */
2626
/* TODO: Write this in a way that supports the light theme */
27-
[data-md-color-scheme="slate"]
28-
.md-typeset
29-
details:not(.warning, .failure, .danger, .bug)
30-
> .admonition-title,
31-
[data-md-color-scheme="slate"]
32-
.md-typeset
33-
details:not(.warning, .failure, .danger, .bug)
34-
> summary {
35-
background: var(--md-primary-fg-color) !important;
36-
}
37-
38-
[data-md-color-scheme="slate"] .md-typeset .admonition,
39-
[data-md-color-scheme="slate"] .md-typeset details {
27+
[data-md-color-scheme="slate"] .md-typeset .admonition {
4028
border-color: transparent !important;
4129
}
4230

43-
[data-md-color-scheme="slate"] .md-typeset details > .admonition-title:after,
44-
[data-md-color-scheme="slate"] .md-typeset details > summary:after {
45-
color: var(--md-admonition-fg-color) !important;
31+
.md-typeset :is(.admonition, details) {
32+
margin: 0.55em 0;
4633
}
4734

48-
.md-typeset .admonition.summary,
49-
.md-typeset details.summary {
35+
.md-typeset .admonition {
5036
font-size: 0.7rem;
5137
}
5238

53-
.md-typeset :is(.admonition, details) {
54-
margin: 0.55em 0;
55-
}
56-
5739
/* Colors for "summary" admonition */
58-
[data-md-color-scheme="slate"] .md-typeset .admonition.summary,
59-
[data-md-color-scheme="slate"] .md-typeset details.summary {
40+
[data-md-color-scheme="slate"] .md-typeset .admonition.summary {
6041
background: #353a45;
6142
padding: 0.8rem 1.4rem;
6243
border-radius: 0.8rem;
6344
}
6445

65-
[data-md-color-scheme="slate"] .md-typeset details.summary > .admonition-title,
66-
[data-md-color-scheme="slate"] .md-typeset details.summary > summary {
67-
background: #353a45 !important;
68-
}
69-
70-
[data-md-color-scheme="slate"] .md-typeset .summary .admonition-title,
71-
[data-md-color-scheme="slate"] .md-typeset .summary summary {
46+
[data-md-color-scheme="slate"] .md-typeset .summary .admonition-title {
7247
font-size: 1rem;
7348
background: transparent;
7449
padding-left: 0.6rem;
@@ -79,21 +54,18 @@
7954
display: none;
8055
}
8156

82-
[data-md-color-scheme="slate"] .md-typeset .admonition.summary,
83-
[data-md-color-scheme="slate"] .md-typeset .summary details {
57+
[data-md-color-scheme="slate"] .md-typeset .admonition.summary {
8458
border-color: #ffffff17 !important;
8559
}
8660

8761
/* Colors for "note" admonition */
88-
[data-md-color-scheme="slate"] .md-typeset .admonition.note,
89-
[data-md-color-scheme="slate"] .md-typeset details.note {
62+
[data-md-color-scheme="slate"] .md-typeset .admonition.note {
9063
background: rgb(43 110 98/ 0.2);
9164
padding: 0.8rem 1.4rem;
9265
border-radius: 0.8rem;
9366
}
9467

95-
[data-md-color-scheme="slate"] .md-typeset .note .admonition-title,
96-
[data-md-color-scheme="slate"] .md-typeset .note summary {
68+
[data-md-color-scheme="slate"] .md-typeset .note .admonition-title {
9769
font-size: 1rem;
9870
background: transparent;
9971
padding-bottom: 0;
@@ -112,15 +84,13 @@
11284
}
11385

11486
/* Colors for "warning" admonition */
115-
[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
116-
[data-md-color-scheme="slate"] .md-typeset details.warning {
87+
[data-md-color-scheme="slate"] .md-typeset .admonition.warning {
11788
background: rgb(182 87 0 / 0.2);
11889
padding: 0.8rem 1.4rem;
11990
border-radius: 0.8rem;
12091
}
12192

122-
[data-md-color-scheme="slate"] .md-typeset .warning .admonition-title,
123-
[data-md-color-scheme="slate"] .md-typeset .warning summary {
93+
[data-md-color-scheme="slate"] .md-typeset .warning .admonition-title {
12494
font-size: 1rem;
12595
background: transparent;
12696
padding-bottom: 0;
@@ -132,6 +102,25 @@
132102
background-color: rgb(219 125 39);
133103
}
134104

105+
/* Colors for "info" admonition */
106+
[data-md-color-scheme="slate"] .md-typeset .admonition.info {
107+
background: rgb(43 52 145 / 0.2);
108+
padding: 0.8rem 1.4rem;
109+
border-radius: 0.8rem;
110+
}
111+
112+
[data-md-color-scheme="slate"] .md-typeset .info .admonition-title {
113+
font-size: 1rem;
114+
background: transparent;
115+
padding-bottom: 0;
116+
color: rgb(136 145 236);
117+
}
118+
119+
[data-md-color-scheme="slate"] .md-typeset .info .admonition-title:before {
120+
font-size: 1.1rem;
121+
background-color: rgb(136 145 236);
122+
}
123+
135124
/* Move the sidebars to the edges of the page */
136125
.md-main__inner.md-grid {
137126
margin-left: 0;

0 commit comments

Comments
 (0)