Skip to content

Commit 012ffa7

Browse files
dignit28dignit28
committed
Improvements after review
1 parent f039820 commit 012ffa7

File tree

1 file changed

+31
-31
lines changed

1 file changed

+31
-31
lines changed

‎src/content/learn/thinking-in-react.md

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ JSON API возвращает данные, которые выглядят та
6161

6262
</FullWidth>
6363

64-
Обратите внимание, что внутри `ProductTable` (фиолетовый) заголовок таблицы ("Name" и "Price") сам по себе не является отдельным компонентом. Отделять его или нет -- вопрос личного предпочтения. В данном примере он является частью `ProductTable`, потому что находится внутри списка `ProductTable`. Тем не менее, если в будущем заголовок пополнится новыми функциями (например возможностью сортировать товар) вы можете извлечь его в самостоятельный компонент `ProductTableHeader`.
64+
Обратите внимание, что внутри `ProductTable` (фиолетовый) заголовок таблицы ("Name" и "Price") сам по себе не является отдельным компонентом. Отделять его или нет -- вопрос личного предпочтения. В данном примере он является частью `ProductTable`, потому что находится внутри списка `ProductTable`. Тем не менее, если в будущем заголовок пополнится новыми функциями (например, возможностью сортировать товар), вы можете извлечь его в самостоятельный компонент `ProductTableHeader`.
6565

6666
Теперь, когда вы определили компоненты на макете, расположите их согласно иерархии. Компоненты, которые являются частью других компонентов, в иерархии будут дочерними:
6767

@@ -73,11 +73,11 @@ JSON API возвращает данные, которые выглядят та
7373

7474
## Шаг 2: Создайте статическое приложение на React {/*step-2-build-a-static-version-in-react*/}
7575

76-
Теперь, когда все компоненты расположены в иерархическом порядке, пришло время воплотить в жизнь ваше приложение. Самый лёгкий способ -- создать версию, которая рендерит UI, основанный на вашей модели данных, но не предполагает никакой интерактивности... пока что! Обычно проще всего сначала создать статическое приложение и только потом добавить интерактивность. Написание статического приложения требует много печатания и совсем немного мышления. С другой стороны, создание интерактивного приложения подразумевает более глубокий мыслительный процесс и лишь долю рутинной печати.
76+
Теперь, когда все компоненты расположены в иерархическом порядке, пришло время воплотить в жизнь ваше приложение. Самый лёгкий способ -- создать версию, которая рендерит UI, основанный на вашей модели данных, но не предполагает никакой интерактивности... пока что! Обычно проще всего сначала создать статическое приложение и только потом добавить интерактивность. Написание статического приложения требует много печатать и совсем немного думать. С другой стороны, создание интерактивного приложения подразумевает более глубокий мыслительный процесс и лишь долю рутинной печати.
7777

7878
Чтобы написать статическое приложение, отображающее модель данных, нам нужно создать [компоненты,](/learn/your-first-component) которые используют другие компоненты и передают данные через [пропсы.](/learn/passing-props-to-a-component) С помощью пропсов данные передаются от родителя к потомку. (Если вы знакомы с понятием [состояния,](/learn/state-a-components-memory) то для статического приложения это как раз то, чего вам использовать не нужно. Состояние подразумевает собой данные, которые меняются со временем, интерактивность. Так как мы работаем над статическим приложением, нам этого не нужно.)
7979

80-
Написание кода можно начать как сверху вниз с компонентов, которые находятся выше по иерархии (такие как `FilterableProductTable`), так и снизу вверх с низкоуровневых компонентов (такие как `ProductRow`). Более простые приложения удобнее начать с компонентов, находящихся выше по иерархии. В более сложных приложениях удобнее в первую очередь создавать и тестировать подкомпоненты.
80+
Написание кода можно начать как сверху вниз с компонентов, которые находятся выше по иерархии (таких как `FilterableProductTable`), так и снизу вверх с низкоуровневых компонентов (таких как `ProductRow`). Более простые приложения удобнее начать с компонентов, находящихся выше по иерархии. В более сложных приложениях удобнее в первую очередь создавать и тестировать подкомпоненты.
8181

8282
<Sandpack>
8383

@@ -130,8 +130,8 @@ function ProductTable({ products }) {
130130
<table>
131131
<thead>
132132
<tr>
133-
<th>Name</th>
134-
<th>Price</th>
133+
<th>Наименование</th>
134+
<th>Цена</th>
135135
</tr>
136136
</thead>
137137
<tbody>{rows}</tbody>
@@ -146,7 +146,7 @@ function SearchBar() {
146146
<label>
147147
<input type="checkbox" />
148148
{' '}
149-
Only show products in stock
149+
Показывать только товар в наличии
150150
</label>
151151
</form>
152152
);
@@ -162,12 +162,12 @@ function FilterableProductTable({ products }) {
162162
}
163163

164164
const PRODUCTS = [
165-
{category: "Fruits", price: "$1", stocked: true, name: "Apple"},
166-
{category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
167-
{category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
168-
{category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
169-
{category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
170-
{category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
165+
{category: "Фрукты", price: "$1", stocked: true, name: "Яблоко"},
166+
{category: "Фрукты", price: "$1", stocked: true, name: "Питахайя"},
167+
{category: "Фрукты", price: "$2", stocked: false, name: "Маракуйя"},
168+
{category: "Овощи", price: "$2", stocked: true, name: "Шпинат"},
169+
{category: "Овощи", price: "$4", stocked: false, name: "Тыква"},
170+
{category: "Овощи", price: "$1", stocked: true, name: "Горох"}
171171
];
172172

173173
export default function App() {
@@ -377,8 +377,8 @@ function ProductTable({ products, filterText, inStockOnly }) {
377377
<table>
378378
<thead>
379379
<tr>
380-
<th>Name</th>
381-
<th>Price</th>
380+
<th>Наименование</th>
381+
<th>Цена</th>
382382
</tr>
383383
</thead>
384384
<tbody>{rows}</tbody>
@@ -398,19 +398,19 @@ function SearchBar({ filterText, inStockOnly }) {
398398
type="checkbox"
399399
checked={inStockOnly} />
400400
{' '}
401-
Only show products in stock
401+
Показывать только товар в наличии
402402
</label>
403403
</form>
404404
);
405405
}
406406

407407
const PRODUCTS = [
408-
{category: "Fruits", price: "$1", stocked: true, name: "Apple"},
409-
{category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
410-
{category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
411-
{category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
412-
{category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
413-
{category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
408+
{category: "Фрукты", price: "$1", stocked: true, name: "Яблоко"},
409+
{category: "Фрукты", price: "$1", stocked: true, name: "Питахайя"},
410+
{category: "Фрукты", price: "$2", stocked: false, name: "Маракуйя"},
411+
{category: "Овощи", price: "$2", stocked: true, name: "Шпинат"},
412+
{category: "Овощи", price: "$4", stocked: false, name: "Тыква"},
413+
{category: "Овощи", price: "$1", stocked: true, name: "Горох"}
414414
];
415415

416416
export default function App() {
@@ -576,8 +576,8 @@ function ProductTable({ products, filterText, inStockOnly }) {
576576
<table>
577577
<thead>
578578
<tr>
579-
<th>Name</th>
580-
<th>Price</th>
579+
<th>Наименование</th>
580+
<th>Цена</th>
581581
</tr>
582582
</thead>
583583
<tbody>{rows}</tbody>
@@ -603,19 +603,19 @@ function SearchBar({
603603
checked={inStockOnly}
604604
onChange={(e) => onInStockOnlyChange(e.target.checked)} />
605605
{' '}
606-
Only show products in stock
606+
Показывать только товар в наличии
607607
</label>
608608
</form>
609609
);
610610
}
611611

612612
const PRODUCTS = [
613-
{category: "Fruits", price: "$1", stocked: true, name: "Apple"},
614-
{category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
615-
{category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
616-
{category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
617-
{category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
618-
{category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
613+
{category: "Фрукты", price: "$1", stocked: true, name: "Яблоко"},
614+
{category: "Фрукты", price: "$1", stocked: true, name: "Питахайя"},
615+
{category: "Фрукты", price: "$2", stocked: false, name: "Маракуйя"},
616+
{category: "Овощи", price: "$2", stocked: true, name: "Шпинат"},
617+
{category: "Овощи", price: "$4", stocked: false, name: "Тыква"},
618+
{category: "Овощи", price: "$1", stocked: true, name: "Горох"}
619619
];
620620

621621
export default function App() {
@@ -646,4 +646,4 @@ td {
646646
647647
## Что дальше {/*where-to-go-from-here*/}
648648
649-
Это было очень краткое введение в подход к написанию компонентов и приложений на React. Теперь вы можете [начать проект на React](/learn/installation) прямо сейчас или [углубиться в синтаксис,](/learn/describing-the-ui) использованный в этом руководстве.
649+
Это было очень краткое введение в подход к написанию компонентов и приложений на React. Теперь вы можете [начать проект на React](/learn/installation) или [углубиться в синтаксис,](/learn/describing-the-ui) использованный в этом руководстве.

0 commit comments

Comments
 (0)