From e15ff7656d69aac299e7b69ca99e4014b5ee701d Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 10:56:36 +0300
Subject: [PATCH 01/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 279 ++++++++++-----------
 1 file changed, 135 insertions(+), 144 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index cbae68cec..6ed5fab89 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -1,24 +1,23 @@
 ---
-title: Conditional Rendering
+title: Условный рендеринг
 ---
 
 <Intro>
-
+Твоим компонентам нужно будет часто отображать различные вещи в зависимости от различных условий. В React ты можешь реденрить JSX в зависимости от его условий, используя JavaScript операторы. Такие, как `if`, `&&` и `? :`
 Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
 
 </Intro>
 
-<YouWillLearn>
+<YouWillLearn>  
 
-* How to return different JSX depending on a condition
-* How to conditionally include or exclude a piece of JSX
-* Common conditional syntax shortcuts you’ll encounter in React codebases
+* Как вернуть разный JSX, в зависимости от его условия
+* Как условно включить или исключить фрагмент JSX 
+* Общий условный синтаксис, который ты встретишь в кодовой базе React.
 
 </YouWillLearn>
 
-## Conditionally returning JSX {/*conditionally-returning-jsx*/}
-
-Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not:
+## Условно возвращаемый JSX {/*conditionally-returning-jsx*/}
+Допустим, у тебя есть `PackingList` компонент, который рендерит несколько `Item`ов, которые могут быть обозначены, как упакованные или неуправкованные:
 
 <Sandpack>
 
@@ -30,19 +29,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Список вещей Салли Райд</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="Космический скафандр" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="Шлем с золотым листом" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Фотография Тэма" 
         />
       </ul>
     </section>
@@ -51,10 +50,10 @@ export default function PackingList() {
 ```
 
 </Sandpack>
+                  
+Заметь, что некоторые `Item` компоненты имеют свой `isPacked` проп, который `true` вместо `false`. Ты хочешь добавить галочку (✔) к упакованным вещам, если if `isPacked={true}`.
 
-Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`.
-
-You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so:
+Ты можешь писать это как [`if`/`else` условие](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...) таким образом:
 
 ```js
 if (isPacked) {
@@ -62,8 +61,7 @@ if (isPacked) {
 }
 return <li className="item">{name}</li>;
 ```
-
-If the `isPacked` prop is `true`, this code **returns a different JSX tree.** With this change, some of the items get a checkmark at the end:
+Если `isPacked` проп - это `true`, то этот код **вернёт другое JSX дерево.** Вместе с этим изменением, то некоторые вещи получат галочку в конце:
 
 <Sandpack>
 
@@ -78,19 +76,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Список вещей Салли Райд</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="Космический скафандр" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="Шлем с золотым листом" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Фотография Тэма" 
         />
       </ul>
     </section>
@@ -100,13 +98,13 @@ export default function PackingList() {
 
 </Sandpack>
 
-Try editing what gets returned in either case, and see how the result changes!
+Попробуйте отредактировать то, что возвращается в обоих случаях, и посмотрите, как изменится результат!
 
-Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript.
+Обратите внимание, как вы создаете разветвленную логику с помощью операторов JavaScript `if` и `return`. В React поток управления (как и условия) обрабатывается JavaScript.
 
-### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/}
+### Условно возвращаем ничего, с помощью `null` {/*conditionally-returning-nothing-with-null*/}
 
-In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`:
+В некоторых ситуациях вы вообще не захотите ничего рендерить. Например, вы не хотите показывать упакованные предметы. Компонент должен что-то возвращать. В этом случае вы можете вернуть `null`:
 
 ```js
 if (isPacked) {
@@ -114,8 +112,7 @@ if (isPacked) {
 }
 return <li className="item">{name}</li>;
 ```
-
-If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render.
+Если `isPacked` true, то компонент не вернет ничего, `null`. В противном случае он вернет JSX для рендеринга.
 
 <Sandpack>
 
@@ -130,19 +127,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Список вещей Салли Райд</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="Космический скафандр" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="Шлем с золотым листом" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Фотография Тэма" 
         />
       </ul>
     </section>
@@ -151,24 +148,23 @@ export default function PackingList() {
 ```
 
 </Sandpack>
+На практике возврат `null` из компонента не является обычным делом, поскольку это может удивить разработчика, пытающегося его зарендерить. Чаще всего вы условно включаете или исключаете компонент JSX из родительского компонента. Вот как это сделать!
 
-In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that!
-
-## Conditionally including JSX {/*conditionally-including-jsx*/}
+## Условное включение JSX {/*conditionally-including-jsx*/}
 
-In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output:
+В предыдущем примере вы контролировали, какое JSX дерево будет возвращено компонентом (если вообще будет!). Возможно, вы уже заметили некоторое дублирование в выводе рендера:
 
 ```js
 <li className="item">{name} ✔</li>
 ```
 
-is very similar to
+очень похоже на
 
 ```js
 <li className="item">{name}</li>
 ```
 
-Both of the conditional branches return `<li className="item">...</li>`:
+Обе условные ветви возвращают `<li className="item">...</li>`:
 
 ```js
 if (isPacked) {
@@ -176,14 +172,12 @@ if (isPacked) {
 }
 return <li className="item">{name}</li>;
 ```
+Хоть и такое дублирование не вредно, но оно может усложнить поддержание вашего кода. Что если вы захотите изменить `className`? Вам придется делать это в двух местах вашего кода! В такой ситуации вы можете условно включить небольшой JSX, чтобы сделать ваш код более [DRY.](https://ru.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself).
 
-While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
+### Условный (тернанрый) оператор (`? :`) {/*conditional-ternary-operator--*/}
 
-### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/}
-
-JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator".
-
-Instead of this:
+В JavaScript есть компактный синтаксис для записи условного выражения - [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) или "тернарный оператор".
+Вместо этого:
 
 ```js
 if (isPacked) {
@@ -192,7 +186,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-You can write this:
+Вы можете написать это:
 
 ```js
 return (
@@ -202,18 +196,16 @@ return (
 );
 ```
 
-You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*.
+Вы можете читать это как *"if `isPacked` это true, тогда (`?`) рендерим `name + ' ✔'`, в противном случае (`:`) рендерю `name`"*.
 
 <DeepDive>
 
-#### Are these two examples fully equivalent? {/*are-these-two-examples-fully-equivalent*/}
-
-If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `<li>`. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works.
+####Являются ли эти два примера полностью эквивалентными? {/*are-these-two-examples-fully-equivalent*/}
 
+Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера мало чем отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `<li>`. Но элементы JSX не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными узлами DOM. Это легкие описания, как чертежи. Так что эти два примера, на самом деле, *совершенно эквивалентны*. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает.
 </DeepDive>
 
-Now let's say you want to wrap the completed item's text into another HTML tag, like `<del>` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX in each of the cases:
-
+Теперь предположим, что вы хотите обернуть текст завершенного элемента в другой HTML тег, например <del>, чтобы вычеркнуть его. Вы можете добавить еще больше новых линий и круглых скобок, чтобы было проще вложить больше JSX в каждом из случаев:
 <Sandpack>
 
 ```js
@@ -234,19 +226,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Список вещей Салли Райд</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="Космический скафандр" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="Шлем с золотым листом" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Фотография Тэма" 
         />
       </ul>
     </section>
@@ -256,11 +248,10 @@ export default function PackingList() {
 
 </Sandpack>
 
-This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions.
-
-### Logical AND operator (`&&`) {/*logical-and-operator-*/}
+Этот стиль хорошо работает для простых условий, но используйте его в меру. Если ваши компоненты становятся беспорядочными из-за слишком большого количества вложенной условной разметки, подумайте об извлечении дочерних компонентов, чтобы навести порядок. В React разметка является частью кода, поэтому вы можете использовать такие инструменты, как переменные и функции, чтобы привести в порядок сложные выражения.
+### Логичксий И оператор (`&&`) {/*logical-and-operator-*/}
 
-Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`:
+Еще одно часто встречающееся сокращение [JavaScript логический И (`&&`) operator.](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) Внутри React компонентов, часто случается так, что тебе нужно зарендерить JSX, когда условие true, **или не рендерить ничего.** С `&&`, вы можете исходя из условия зарендерить галочку, if `isPacked` это `true`:
 
 ```js
 return (
@@ -270,9 +261,9 @@ return (
 );
 ```
 
-You can read this as *"if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing"*.
+Вы можете читать это как *"if `isPacked`, тогда (`&&`) рендерим галочку, в противном случае, мы не рендерим ничего"*.
 
-Here it is in action:
+Вот это в действии:
 
 <Sandpack>
 
@@ -288,19 +279,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Список вещей Салли Райд</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="Космический скафандр" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="Шлем с золотым листом" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Фотография Тэма" 
         />
       </ul>
     </section>
@@ -310,30 +301,30 @@ export default function PackingList() {
 
 </Sandpack>
 
-A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place.
+A [JavaScript && выражение](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение его правой стороны (в нашем случае - это галочка) на левой стороне (наше условие) это `true`. Но если наше условие - `false`, тогда всё выражение становится `false`. React думает о `false` как о "дыре" внутри JSX дерева, прямо как о `null` или `undefined`, и React не рендерит ничего на этом месте.
 
 
 <Pitfall>
 
-**Don't put numbers on the left side of `&&`.**
+**Не ставь числа по левую сторону `&&`.**
 
-To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing.
+Чтобы проверить условие, JavaScript автоматически преобразует левую часть в булевое значение (true/false). Однако если левая часть равна `0`, то все выражение получает это значение (`0`), и React с радостью зарендерит `0`, а не ничего.
 
-For example, a common mistake is to write code like `messageCount && <p>New messages</p>`. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself!
+Например, распространенной ошибкой является написание кода типа `messageCount && <p>New messages</p>`. Легко предположить, что он ничего не рендерит, когда `messageCount` равно `0`, но на самом деле он зарендерит `0`!
 
-To fix it, make the left side a boolean: `messageCount > 0 && <p>New messages</p>`.
+Чтобы исправить это, сделайте левую часть булевым значением (true/false): `messageCount > 0 && <p>New messages</p>`.
 
 </Pitfall>
 
-### Conditionally assigning JSX to a variable {/*conditionally-assigning-jsx-to-a-variable*/}
+### Условное присвоение JSX к переменной {/*conditionally-assigning-jsx-to-a-variable*/}
 
-When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name:
+Когда сокращения встревают на пути к написанию понятного кода, то попробуйте использовать `if` оператор и переменную. Вы можете изменить переменные, написанные с помощью [`let`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let), поэтому начните с предоставления содержимого по умолчанию, которое вы хотите отобразить, name:
 
 ```js
 let itemContent = name;
 ```
 
-Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`:
+Используй `if` оператор чтобы переназначить JSX выражение `itemContent` если `isPacked` это `true`:
 
 ```js
 if (isPacked) {
@@ -341,7 +332,7 @@ if (isPacked) {
 }
 ```
 
-[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX:
+[Фигурные скобки открывают "окно в мир JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Вставьте переменную с фигурными скобками в возвращаемое дерево JSX, вложив ранее вычисленное выражение внутрь JSX:
 
 ```js
 <li className="item">
@@ -349,7 +340,7 @@ if (isPacked) {
 </li>
 ```
 
-This style is the most verbose, but it's also the most flexible. Here it is in action:
+Этот стиль самый многословный, но и самый гибкий. Вот он в действии:
 
 <Sandpack>
 
@@ -369,19 +360,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Список вещей Салли Райд</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="Космический скафандр" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="Шлем с золотым листом" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Фотография Тэма" 
         />
       </ul>
     </section>
@@ -391,7 +382,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-Like before, this works not only for text, but for arbitrary JSX too:
+Как и раньше, это работает не только для текста, но и для произвольного JSX:
 
 <Sandpack>
 
@@ -415,19 +406,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Список вещей Салли Райд</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="Космический скафандр" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="Шлем с золотым листом" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Фотография Тэма" 
         />
       </ul>
     </section>
@@ -437,16 +428,16 @@ export default function PackingList() {
 
 </Sandpack>
 
-If you're not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code -- and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work.
+Если вы не знакомы с JavaScript, то такое разнообразие стилей может показаться поначалу ошеломляющим. Однако их изучение поможет вам читать и писать любой код JavaScript - и не только компоненты React! Выберите для начала тот, который вам больше нравится, а затем снова обратитесь к этому справочнику, если вы забудете, как работают другие.
 
 <Recap>
 
-* In React, you control branching logic with JavaScript.
-* You can return a JSX expression conditionally with an `if` statement.
-* You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.
-* In JSX, `{cond ? <A /> : <B />}` means *"if `cond`, render `<A />`, otherwise `<B />`"*.
-* In JSX, `{cond && <A />}` means *"if `cond`, render `<A />`, otherwise nothing"*.
-* The shortcuts are common, but you don't have to use them if you prefer plain `if`.
+* В React вы управляете логикой ветвления с помощью JavaScript.
+* Вы можете возвращать выражение JSX условно с помощью оператора `if`.
+* Вы можете условно сохранить логику JSX в переменную, а затем включить её в другие JSX с помощью фигурных скобок.
+* В JSX, `{cond ? <A /> : <B />}` означает *"if `cond`, рендери `<A />`, в противном случае `<B />`"*.
+* В JSX, `{cond && <A />}` означает *"if `cond`, рендери `<A />`, иначе ничего"*.
+* Эти сокращения являются общепринятыми, но вы не обязаны их использовать, если предпочитаете простые выражения. `if`.
 
 </Recap>
 
@@ -454,9 +445,9 @@ If you're not familiar with JavaScript, this variety of styles might seem overwh
 
 <Challenges>
 
-#### Show an icon for incomplete items with `? :` {/*show-an-icon-for-incomplete-items-with--*/}
+#### Покажи иконку для неупакованных вещей `? :` {/*show-an-icon-for-incomplete-items-with--*/}
 
-Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn’t `true`.
+Используй тернарный оператор (`cond ? a : b`) чтобы зарендерить ❌ if `isPacked` не равен `true`.
 
 <Sandpack>
 
@@ -472,19 +463,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Список вещей Салли Райд</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="Космический скафандр" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="Шлем с золотым листом" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Фотография Тэма" 
         />
       </ul>
     </section>
@@ -510,19 +501,19 @@ function Item({ name, isPacked }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Список вещей Салли Райд</h1>
       <ul>
         <Item 
           isPacked={true} 
-          name="Space suit" 
+          name="Космический скафандр" 
         />
         <Item 
           isPacked={true} 
-          name="Helmet with a golden leaf" 
+          name="Шлем с золотым листом" 
         />
         <Item 
           isPacked={false} 
-          name="Photo of Tam" 
+          name="Фотография Тэма" 
         />
       </ul>
     </section>
@@ -534,15 +525,15 @@ export default function PackingList() {
 
 </Solution>
 
-#### Show the item importance with `&&` {/*show-the-item-importance-with-*/}
+#### Покажи важность вещи с помощью `&&` {/*show-the-item-importance-with-*/}
 
-In this example, each `Item` receives a numerical `importance` prop. Use the `&&` operator to render "_(Importance: X)_" in italics, but only for items that have non-zero importance. Your item list should end up looking like this:
+В этом примере каждый `Item` получает числовой `importance` проп. Используй `&&` чтобы зарендерить "_(Важность: X)_" в italics стиле, но только для вещей важность которых больше 0. Твой конечный резульат должен выглядить вот так вот:
 
-* Space suit _(Importance: 9)_
-* Helmet with a golden leaf
-* Photo of Tam _(Importance: 6)_
+* Космический скафандр _(Важность: 9)_
+* Шлем с золотым листом
+* Фотография Тэма _(Важность: 6)_
 
-Don't forget to add a space between the two labels!
+Не забудьте добавить пробел между двумя метками!
 
 <Sandpack>
 
@@ -558,19 +549,19 @@ function Item({ name, importance }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Список вещей Салли Райд</h1>
       <ul>
         <Item 
           importance={9} 
-          name="Space suit" 
+          name="Космический скафандр" 
         />
         <Item 
           importance={0} 
-          name="Helmet with a golden leaf" 
+          name="Шлем с золотым листом" 
         />
         <Item 
           importance={6} 
-          name="Photo of Tam" 
+          name="Фотография Тэма" 
         />
       </ul>
     </section>
@@ -582,7 +573,7 @@ export default function PackingList() {
 
 <Solution>
 
-This should do the trick:
+Это должно сработать:
 
 <Sandpack>
 
@@ -593,7 +584,7 @@ function Item({ name, importance }) {
       {name}
       {importance > 0 && ' '}
       {importance > 0 &&
-        <i>(Importance: {importance})</i>
+        <i>(Важность: {importance})</i>
       }
     </li>
   );
@@ -602,19 +593,19 @@ function Item({ name, importance }) {
 export default function PackingList() {
   return (
     <section>
-      <h1>Sally Ride's Packing List</h1>
+      <h1>Список вещей Салли Райд</h1>
       <ul>
         <Item 
           importance={9} 
-          name="Space suit" 
+          name="Космический скафандр" 
         />
         <Item 
           importance={0} 
-          name="Helmet with a golden leaf" 
+          name="Шлем с золотым листом" 
         />
         <Item 
           importance={6} 
-          name="Photo of Tam" 
+          name="Фотография Тэма" 
         />
       </ul>
     </section>
@@ -624,15 +615,15 @@ export default function PackingList() {
 
 </Sandpack>
 
-Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result!
+Помни, что ты должен писать `importance > 0 && ...` а не `importance && ...` поэтому если `importance` это `0`, то `0` не зарендерится как результат!
 
-In this solution, two separate conditions are used to insert a space between then name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> <i>...</i></>` or add a space immediately inside the `<i>`:  `importance > 0 && <i> ...</i>`.
+В этом решении, два раздельных условия были использованы, чтобы вставить пробел между именем и меткой важности. В качестве альтернативы можно использовать фрагмент с ведущим пробелом: `importance > 0 && <> <i>...</i></>` или добавить пробел сразу внутри тега `<i>`:  `importance > 0 && <i> ...</i>`.
 
 </Solution>
 
-#### Refactor a series of `? :` to `if` and variables {/*refactor-a-series-of---to-if-and-variables*/}
+#### Отрефактори тернарный оператор `? :` на `if` и переменными {/*refactor-a-series-of---to-if-and-variables*/}
 
-This `Drink` component uses a series of `? :` conditions to show different information depending on whether the `name` prop is `"tea"` or `"coffee"`. The problem is that the information about each drink is spread across multiple conditions. Refactor this code to use a single `if` statement instead of three `? :` conditions.
+Этот `Drink` компонент использует серию `? :` условий, чтобы показать разную информацию, которая зависит от `name` пропа, который `"tea"` или `"coffee"`. Проблема в том, что информация о каждом напитке распределена по нескольким условиям. Отрефактори этот код таким образом, чтобы использовать одно `if` условие вместо трёх `? :` условий.
 
 <Sandpack>
 
@@ -642,12 +633,12 @@ function Drink({ name }) {
     <section>
       <h1>{name}</h1>
       <dl>
-        <dt>Part of plant</dt>
+        <dt>Часть растения</dt>
         <dd>{name === 'tea' ? 'leaf' : 'bean'}</dd>
-        <dt>Caffeine content</dt>
-        <dd>{name === 'tea' ? '15–70 mg/cup' : '80–185 mg/cup'}</dd>
-        <dt>Age</dt>
-        <dd>{name === 'tea' ? '4,000+ years' : '1,000+ years'}</dd>
+        <dt>Содержание кофеина</dt>
+        <dd>{name === 'tea' ? '15–70 мг/чашка' : '80–185 мг/чашка'}</dd>
+        <dt>Возраст</dt>
+        <dd>{name === 'tea' ? '4,000+ лет' : '1,000+ лет'}</dd>
       </dl>
     </section>
   );
@@ -665,11 +656,11 @@ export default function DrinkList() {
 
 </Sandpack>
 
-Once you've refactored the code to use `if`, do you have further ideas on how to simplify it?
+ После рефакторинга кода с использованием `if` у вас есть идеи, как его упростить?
 
 <Solution>
 
-There are multiple ways you could go about this, but here is one starting point:
+ Есть несколько способов, но вот один из них, с которого можно начать:
 
 <Sandpack>
 
@@ -678,22 +669,22 @@ function Drink({ name }) {
   let part, caffeine, age;
   if (name === 'tea') {
     part = 'leaf';
-    caffeine = '15–70 mg/cup';
-    age = '4,000+ years';
+    caffeine = '15–70 мг/чашка';
+    age = '4,000+ лет';
   } else if (name === 'coffee') {
     part = 'bean';
-    caffeine = '80–185 mg/cup';
-    age = '1,000+ years';
+    caffeine = '80–185 мг/чашка';
+    age = '1,000+ лет';
   }
   return (
     <section>
       <h1>{name}</h1>
       <dl>
-        <dt>Part of plant</dt>
+        <dt>Часть растения</dt>
         <dd>{part}</dd>
-        <dt>Caffeine content</dt>
+        <dt>Содержание кофеина</dt>
         <dd>{caffeine}</dd>
-        <dt>Age</dt>
+        <dt>Возраст</dt>
         <dd>{age}</dd>
       </dl>
     </section>
@@ -712,9 +703,9 @@ export default function DrinkList() {
 
 </Sandpack>
 
-Here the information about each drink is grouped together instead of being spread across multiple conditions. This makes it easier to add more drinks in the future.
+Здесь информация о каждом напитке сгруппирована вместе, а не распределена по нескольким условиям. Это облегчает добавление новых напитков в будущем.
 
-Another solution would be to remove the condition altogether by moving the information into objects:
+Другим решением может быть полное удаление условий путем перемещения информации в объекты:
 
 <Sandpack>
 
@@ -722,13 +713,13 @@ Another solution would be to remove the condition altogether by moving the infor
 const drinks = {
   tea: {
     part: 'leaf',
-    caffeine: '15–70 mg/cup',
-    age: '4,000+ years'
+    caffeine: '15–70 мг/чашка',
+    age: '4,000+ лет'
   },
   coffee: {
     part: 'bean',
-    caffeine: '80–185 mg/cup',
-    age: '1,000+ years'
+    caffeine: '80–185 мг/чашка',
+    age: '1,000+ лет'
   }
 };
 
@@ -738,11 +729,11 @@ function Drink({ name }) {
     <section>
       <h1>{name}</h1>
       <dl>
-        <dt>Part of plant</dt>
+        <dt>Часть растения</dt>
         <dd>{info.part}</dd>
-        <dt>Caffeine content</dt>
+        <dt>Содержание кофеина</dt>
         <dd>{info.caffeine}</dd>
-        <dt>Age</dt>
+        <dt>Возраст</dt>
         <dd>{info.age}</dd>
       </dl>
     </section>

From bac5658737afe5db3fa0a3122bf866db7689042e Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 10:59:43 +0300
Subject: [PATCH 02/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 6ed5fab89..7b3ece201 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -4,7 +4,6 @@ title: Условный рендеринг
 
 <Intro>
 Твоим компонентам нужно будет часто отображать различные вещи в зависимости от различных условий. В React ты можешь реденрить JSX в зависимости от его условий, используя JavaScript операторы. Такие, как `if`, `&&` и `? :`
-Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
 
 </Intro>
 

From 60b4bb895e52263a8a08c225655dcf3f3dbaaf06 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 11:00:53 +0300
Subject: [PATCH 03/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 7b3ece201..8683e0b11 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -300,7 +300,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-A [JavaScript && выражение](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение его правой стороны (в нашем случае - это галочка) на левой стороне (наше условие) это `true`. Но если наше условие - `false`, тогда всё выражение становится `false`. React думает о `false` как о "дыре" внутри JSX дерева, прямо как о `null` или `undefined`, и React не рендерит ничего на этом месте.
+[JavaScript && выражение](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение его правой стороны (в нашем случае - это галочка) на левой стороне (наше условие) это `true`. Но если наше условие - `false`, тогда всё выражение становится `false`. React думает о `false` как о "дыре" внутри JSX дерева, прямо как о `null` или `undefined`, и React не рендерит ничего на этом месте.
 
 
 <Pitfall>

From f626d640457e5c3e557999d6e0dbf2cb22c55263 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 11:18:53 +0300
Subject: [PATCH 04/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 8683e0b11..f53146e38 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -3,6 +3,7 @@ title: Условный рендеринг
 ---
 
 <Intro>
+
 Твоим компонентам нужно будет часто отображать различные вещи в зависимости от различных условий. В React ты можешь реденрить JSX в зависимости от его условий, используя JavaScript операторы. Такие, как `if`, `&&` и `? :`
 
 </Intro>
@@ -16,6 +17,7 @@ title: Условный рендеринг
 </YouWillLearn>
 
 ## Условно возвращаемый JSX {/*conditionally-returning-jsx*/}
+
 Допустим, у тебя есть `PackingList` компонент, который рендерит несколько `Item`ов, которые могут быть обозначены, как упакованные или неуправкованные:
 
 <Sandpack>
@@ -60,6 +62,7 @@ if (isPacked) {
 }
 return <li className="item">{name}</li>;
 ```
+
 Если `isPacked` проп - это `true`, то этот код **вернёт другое JSX дерево.** Вместе с этим изменением, то некоторые вещи получат галочку в конце:
 
 <Sandpack>
@@ -111,6 +114,7 @@ if (isPacked) {
 }
 return <li className="item">{name}</li>;
 ```
+
 Если `isPacked` true, то компонент не вернет ничего, `null`. В противном случае он вернет JSX для рендеринга.
 
 <Sandpack>
@@ -147,6 +151,7 @@ export default function PackingList() {
 ```
 
 </Sandpack>
+
 На практике возврат `null` из компонента не является обычным делом, поскольку это может удивить разработчика, пытающегося его зарендерить. Чаще всего вы условно включаете или исключаете компонент JSX из родительского компонента. Вот как это сделать!
 
 ## Условное включение JSX {/*conditionally-including-jsx*/}
@@ -171,11 +176,13 @@ if (isPacked) {
 }
 return <li className="item">{name}</li>;
 ```
+
 Хоть и такое дублирование не вредно, но оно может усложнить поддержание вашего кода. Что если вы захотите изменить `className`? Вам придется делать это в двух местах вашего кода! В такой ситуации вы можете условно включить небольшой JSX, чтобы сделать ваш код более [DRY.](https://ru.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself).
 
 ### Условный (тернанрый) оператор (`? :`) {/*conditional-ternary-operator--*/}
 
-В JavaScript есть компактный синтаксис для записи условного выражения - [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) или "тернарный оператор".
+В JavaScript есть компактный синтаксис для написания условного выражения - [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) или "тернарный оператор".
+
 Вместо этого:
 
 ```js
@@ -202,9 +209,11 @@ return (
 ####Являются ли эти два примера полностью эквивалентными? {/*are-these-two-examples-fully-equivalent*/}
 
 Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера мало чем отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `<li>`. Но элементы JSX не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными узлами DOM. Это легкие описания, как чертежи. Так что эти два примера, на самом деле, *совершенно эквивалентны*. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает.
+
 </DeepDive>
 
 Теперь предположим, что вы хотите обернуть текст завершенного элемента в другой HTML тег, например <del>, чтобы вычеркнуть его. Вы можете добавить еще больше новых линий и круглых скобок, чтобы было проще вложить больше JSX в каждом из случаев:
+
 <Sandpack>
 
 ```js
@@ -248,6 +257,7 @@ export default function PackingList() {
 </Sandpack>
 
 Этот стиль хорошо работает для простых условий, но используйте его в меру. Если ваши компоненты становятся беспорядочными из-за слишком большого количества вложенной условной разметки, подумайте об извлечении дочерних компонентов, чтобы навести порядок. В React разметка является частью кода, поэтому вы можете использовать такие инструменты, как переменные и функции, чтобы привести в порядок сложные выражения.
+
 ### Логичксий И оператор (`&&`) {/*logical-and-operator-*/}
 
 Еще одно часто встречающееся сокращение [JavaScript логический И (`&&`) operator.](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) Внутри React компонентов, часто случается так, что тебе нужно зарендерить JSX, когда условие true, **или не рендерить ничего.** С `&&`, вы можете исходя из условия зарендерить галочку, if `isPacked` это `true`:

From 730d0ed9cb332715d334ba1b110ff39052f06a74 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 11:21:19 +0300
Subject: [PATCH 05/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 324 ++++++---------------
 1 file changed, 94 insertions(+), 230 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index f53146e38..77d4cadcf 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -8,15 +8,15 @@ title: Условный рендеринг
 
 </Intro>
 
-<YouWillLearn>  
+<YouWillLearn>
 
-* Как вернуть разный JSX, в зависимости от его условия
-* Как условно включить или исключить фрагмент JSX 
-* Общий условный синтаксис, который ты встретишь в кодовой базе React.
+- Как вернуть разный JSX, в зависимости от его условия
+- Как условно включить или исключить фрагмент JSX
+- Общий условный синтаксис, который ты встретишь в кодовой базе React.
 
 </YouWillLearn>
 
-## Условно возвращаемый JSX {/*conditionally-returning-jsx*/}
+## Условно возвращаемый JSX {/_conditionally-returning-jsx_/}
 
 Допустим, у тебя есть `PackingList` компонент, который рендерит несколько `Item`ов, которые могут быть обозначены, как упакованные или неуправкованные:
 
@@ -32,18 +32,9 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Космический скафандр" 
-        />
-        <Item 
-          isPacked={true} 
-          name="Шлем с золотым листом" 
-        />
-        <Item 
-          isPacked={false} 
-          name="Фотография Тэма" 
-        />
+        <Item isPacked={true} name="Космический скафандр" />
+        <Item isPacked={true} name="Шлем с золотым листом" />
+        <Item isPacked={false} name="Фотография Тэма" />
       </ul>
     </section>
   );
@@ -80,18 +71,9 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Космический скафандр" 
-        />
-        <Item 
-          isPacked={true} 
-          name="Шлем с золотым листом" 
-        />
-        <Item 
-          isPacked={false} 
-          name="Фотография Тэма" 
-        />
+        <Item isPacked={true} name="Космический скафандр" />
+        <Item isPacked={true} name="Шлем с золотым листом" />
+        <Item isPacked={false} name="Фотография Тэма" />
       </ul>
     </section>
   );
@@ -104,7 +86,7 @@ export default function PackingList() {
 
 Обратите внимание, как вы создаете разветвленную логику с помощью операторов JavaScript `if` и `return`. В React поток управления (как и условия) обрабатывается JavaScript.
 
-### Условно возвращаем ничего, с помощью `null` {/*conditionally-returning-nothing-with-null*/}
+### Условно возвращаем ничего, с помощью `null` {/_conditionally-returning-nothing-with-null_/}
 
 В некоторых ситуациях вы вообще не захотите ничего рендерить. Например, вы не хотите показывать упакованные предметы. Компонент должен что-то возвращать. В этом случае вы можете вернуть `null`:
 
@@ -132,18 +114,9 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Космический скафандр" 
-        />
-        <Item 
-          isPacked={true} 
-          name="Шлем с золотым листом" 
-        />
-        <Item 
-          isPacked={false} 
-          name="Фотография Тэма" 
-        />
+        <Item isPacked={true} name="Космический скафандр" />
+        <Item isPacked={true} name="Шлем с золотым листом" />
+        <Item isPacked={false} name="Фотография Тэма" />
       </ul>
     </section>
   );
@@ -154,7 +127,7 @@ export default function PackingList() {
 
 На практике возврат `null` из компонента не является обычным делом, поскольку это может удивить разработчика, пытающегося его зарендерить. Чаще всего вы условно включаете или исключаете компонент JSX из родительского компонента. Вот как это сделать!
 
-## Условное включение JSX {/*conditionally-including-jsx*/}
+## Условное включение JSX {/_conditionally-including-jsx_/}
 
 В предыдущем примере вы контролировали, какое JSX дерево будет возвращено компонентом (если вообще будет!). Возможно, вы уже заметили некоторое дублирование в выводе рендера:
 
@@ -179,7 +152,7 @@ return <li className="item">{name}</li>;
 
 Хоть и такое дублирование не вредно, но оно может усложнить поддержание вашего кода. Что если вы захотите изменить `className`? Вам придется делать это в двух местах вашего кода! В такой ситуации вы можете условно включить небольшой JSX, чтобы сделать ваш код более [DRY.](https://ru.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself).
 
-### Условный (тернанрый) оператор (`? :`) {/*conditional-ternary-operator--*/}
+### Условный (тернанрый) оператор (`? :`) {/_conditional-ternary-operator--_/}
 
 В JavaScript есть компактный синтаксис для написания условного выражения - [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) или "тернарный оператор".
 
@@ -195,20 +168,16 @@ return <li className="item">{name}</li>;
 Вы можете написать это:
 
 ```js
-return (
-  <li className="item">
-    {isPacked ? name + ' ✔' : name}
-  </li>
-);
+return <li className="item">{isPacked ? name + " ✔" : name}</li>;
 ```
 
-Вы можете читать это как *"if `isPacked` это true, тогда (`?`) рендерим `name + ' ✔'`, в противном случае (`:`) рендерю `name`"*.
+Вы можете читать это как _"if `isPacked` это true, тогда (`?`) рендерим `name + ' ✔'`, в противном случае (`:`) рендерю `name`"_.
 
 <DeepDive>
 
-####Являются ли эти два примера полностью эквивалентными? {/*are-these-two-examples-fully-equivalent*/}
+####Являются ли эти два примера полностью эквивалентными? {/_are-these-two-examples-fully-equivalent_/}
 
-Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера мало чем отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `<li>`. Но элементы JSX не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными узлами DOM. Это легкие описания, как чертежи. Так что эти два примера, на самом деле, *совершенно эквивалентны*. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает.
+Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера мало чем отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `<li>`. Но элементы JSX не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными узлами DOM. Это легкие описания, как чертежи. Так что эти два примера, на самом деле, _совершенно эквивалентны_. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает.
 
 </DeepDive>
 
@@ -218,17 +187,7 @@ return (
 
 ```js
 function Item({ name, isPacked }) {
-  return (
-    <li className="item">
-      {isPacked ? (
-        <del>
-          {name + ' ✔'}
-        </del>
-      ) : (
-        name
-      )}
-    </li>
-  );
+  return <li className="item">{isPacked ? <del>{name + " ✔"}</del> : name}</li>;
 }
 
 export default function PackingList() {
@@ -236,18 +195,9 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Космический скафандр" 
-        />
-        <Item 
-          isPacked={true} 
-          name="Шлем с золотым листом" 
-        />
-        <Item 
-          isPacked={false} 
-          name="Фотография Тэма" 
-        />
+        <Item isPacked={true} name="Космический скафандр" />
+        <Item isPacked={true} name="Шлем с золотым листом" />
+        <Item isPacked={false} name="Фотография Тэма" />
       </ul>
     </section>
   );
@@ -258,19 +208,19 @@ export default function PackingList() {
 
 Этот стиль хорошо работает для простых условий, но используйте его в меру. Если ваши компоненты становятся беспорядочными из-за слишком большого количества вложенной условной разметки, подумайте об извлечении дочерних компонентов, чтобы навести порядок. В React разметка является частью кода, поэтому вы можете использовать такие инструменты, как переменные и функции, чтобы привести в порядок сложные выражения.
 
-### Логичксий И оператор (`&&`) {/*logical-and-operator-*/}
+### Логичксий И оператор (`&&`) {/_logical-and-operator-_/}
 
-Еще одно часто встречающееся сокращение [JavaScript логический И (`&&`) operator.](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) Внутри React компонентов, часто случается так, что тебе нужно зарендерить JSX, когда условие true, **или не рендерить ничего.** С `&&`, вы можете исходя из условия зарендерить галочку, if `isPacked` это `true`:
+Еще одно часто встречающееся сокращение [JavaScript логический И (`&&`) оператор.](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) Внутри React компонентов, часто случается так, что тебе нужно зарендерить JSX, когда условие true, **или не рендерить ничего.** С `&&`, вы можете исходя из условия зарендерить галочку, if `isPacked` это `true`:
 
 ```js
 return (
   <li className="item">
-    {name} {isPacked && '✔'}
+    {name} {isPacked && "✔"}
   </li>
 );
 ```
 
-Вы можете читать это как *"if `isPacked`, тогда (`&&`) рендерим галочку, в противном случае, мы не рендерим ничего"*.
+Вы можете читать это как _"if `isPacked`, тогда (`&&`) рендерим галочку, в противном случае, мы не рендерим ничего"_.
 
 Вот это в действии:
 
@@ -280,7 +230,7 @@ return (
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked && '✔'}
+      {name} {isPacked && "✔"}
     </li>
   );
 }
@@ -290,18 +240,9 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Космический скафандр" 
-        />
-        <Item 
-          isPacked={true} 
-          name="Шлем с золотым листом" 
-        />
-        <Item 
-          isPacked={false} 
-          name="Фотография Тэма" 
-        />
+        <Item isPacked={true} name="Космический скафандр" />
+        <Item isPacked={true} name="Шлем с золотым листом" />
+        <Item isPacked={false} name="Фотография Тэма" />
       </ul>
     </section>
   );
@@ -312,7 +253,6 @@ export default function PackingList() {
 
 [JavaScript && выражение](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение его правой стороны (в нашем случае - это галочка) на левой стороне (наше условие) это `true`. Но если наше условие - `false`, тогда всё выражение становится `false`. React думает о `false` как о "дыре" внутри JSX дерева, прямо как о `null` или `undefined`, и React не рендерит ничего на этом месте.
 
-
 <Pitfall>
 
 **Не ставь числа по левую сторону `&&`.**
@@ -325,7 +265,7 @@ export default function PackingList() {
 
 </Pitfall>
 
-### Условное присвоение JSX к переменной {/*conditionally-assigning-jsx-to-a-variable*/}
+### Условное присвоение JSX к переменной {/_conditionally-assigning-jsx-to-a-variable_/}
 
 Когда сокращения встревают на пути к написанию понятного кода, то попробуйте использовать `if` оператор и переменную. Вы можете изменить переменные, написанные с помощью [`let`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let), поэтому начните с предоставления содержимого по умолчанию, которое вы хотите отобразить, name:
 
@@ -344,9 +284,7 @@ if (isPacked) {
 [Фигурные скобки открывают "окно в мир JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Вставьте переменную с фигурными скобками в возвращаемое дерево JSX, вложив ранее вычисленное выражение внутрь JSX:
 
 ```js
-<li className="item">
-  {itemContent}
-</li>
+<li className="item">{itemContent}</li>
 ```
 
 Этот стиль самый многословный, но и самый гибкий. Вот он в действии:
@@ -359,11 +297,7 @@ function Item({ name, isPacked }) {
   if (isPacked) {
     itemContent = name + " ✔";
   }
-  return (
-    <li className="item">
-      {itemContent}
-    </li>
-  );
+  return <li className="item">{itemContent}</li>;
 }
 
 export default function PackingList() {
@@ -371,18 +305,9 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Космический скафандр" 
-        />
-        <Item 
-          isPacked={true} 
-          name="Шлем с золотым листом" 
-        />
-        <Item 
-          isPacked={false} 
-          name="Фотография Тэма" 
-        />
+        <Item isPacked={true} name="Космический скафандр" />
+        <Item isPacked={true} name="Шлем с золотым листом" />
+        <Item isPacked={false} name="Фотография Тэма" />
       </ul>
     </section>
   );
@@ -399,17 +324,9 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
   let itemContent = name;
   if (isPacked) {
-    itemContent = (
-      <del>
-        {name + " ✔"}
-      </del>
-    );
+    itemContent = <del>{name + " ✔"}</del>;
   }
-  return (
-    <li className="item">
-      {itemContent}
-    </li>
-  );
+  return <li className="item">{itemContent}</li>;
 }
 
 export default function PackingList() {
@@ -417,18 +334,9 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Космический скафандр" 
-        />
-        <Item 
-          isPacked={true} 
-          name="Шлем с золотым листом" 
-        />
-        <Item 
-          isPacked={false} 
-          name="Фотография Тэма" 
-        />
+        <Item isPacked={true} name="Космический скафандр" />
+        <Item isPacked={true} name="Шлем с золотым листом" />
+        <Item isPacked={false} name="Фотография Тэма" />
       </ul>
     </section>
   );
@@ -441,20 +349,18 @@ export default function PackingList() {
 
 <Recap>
 
-* В React вы управляете логикой ветвления с помощью JavaScript.
-* Вы можете возвращать выражение JSX условно с помощью оператора `if`.
-* Вы можете условно сохранить логику JSX в переменную, а затем включить её в другие JSX с помощью фигурных скобок.
-* В JSX, `{cond ? <A /> : <B />}` означает *"if `cond`, рендери `<A />`, в противном случае `<B />`"*.
-* В JSX, `{cond && <A />}` означает *"if `cond`, рендери `<A />`, иначе ничего"*.
-* Эти сокращения являются общепринятыми, но вы не обязаны их использовать, если предпочитаете простые выражения. `if`.
+- В React вы управляете логикой ветвления с помощью JavaScript.
+- Вы можете возвращать выражение JSX условно с помощью оператора `if`.
+- Вы можете условно сохранить логику JSX в переменную, а затем включить её в другие JSX с помощью фигурных скобок.
+- В JSX, `{cond ? <A /> : <B />}` означает _"if `cond`, рендери `<A />`, в противном случае `<B />`"_.
+- В JSX, `{cond && <A />}` означает _"if `cond`, рендери `<A />`, иначе ничего"_.
+- Эти сокращения являются общепринятыми, но вы не обязаны их использовать, если предпочитаете простые выражения. `if`.
 
 </Recap>
 
-
-
 <Challenges>
 
-#### Покажи иконку для неупакованных вещей `? :` {/*show-an-icon-for-incomplete-items-with--*/}
+#### Покажи иконку для неупакованных вещей `? :` {/_show-an-icon-for-incomplete-items-with--_/}
 
 Используй тернарный оператор (`cond ? a : b`) чтобы зарендерить ❌ if `isPacked` не равен `true`.
 
@@ -464,7 +370,7 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked && '✔'}
+      {name} {isPacked && "✔"}
     </li>
   );
 }
@@ -474,18 +380,9 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Космический скафандр" 
-        />
-        <Item 
-          isPacked={true} 
-          name="Шлем с золотым листом" 
-        />
-        <Item 
-          isPacked={false} 
-          name="Фотография Тэма" 
-        />
+        <Item isPacked={true} name="Космический скафандр" />
+        <Item isPacked={true} name="Шлем с золотым листом" />
+        <Item isPacked={false} name="Фотография Тэма" />
       </ul>
     </section>
   );
@@ -502,7 +399,7 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked ? '✔' : '❌'}
+      {name} {isPacked ? "✔" : "❌"}
     </li>
   );
 }
@@ -512,18 +409,9 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item 
-          isPacked={true} 
-          name="Космический скафандр" 
-        />
-        <Item 
-          isPacked={true} 
-          name="Шлем с золотым листом" 
-        />
-        <Item 
-          isPacked={false} 
-          name="Фотография Тэма" 
-        />
+        <Item isPacked={true} name="Космический скафандр" />
+        <Item isPacked={true} name="Шлем с золотым листом" />
+        <Item isPacked={false} name="Фотография Тэма" />
       </ul>
     </section>
   );
@@ -534,13 +422,13 @@ export default function PackingList() {
 
 </Solution>
 
-#### Покажи важность вещи с помощью `&&` {/*show-the-item-importance-with-*/}
+#### Покажи важность вещи с помощью `&&` {/_show-the-item-importance-with-_/}
 
 В этом примере каждый `Item` получает числовой `importance` проп. Используй `&&` чтобы зарендерить "_(Важность: X)_" в italics стиле, но только для вещей важность которых больше 0. Твой конечный резульат должен выглядить вот так вот:
 
-* Космический скафандр _(Важность: 9)_
-* Шлем с золотым листом
-* Фотография Тэма _(Важность: 6)_
+- Космический скафандр _(Важность: 9)_
+- Шлем с золотым листом
+- Фотография Тэма _(Важность: 6)_
 
 Не забудьте добавить пробел между двумя метками!
 
@@ -548,11 +436,7 @@ export default function PackingList() {
 
 ```js
 function Item({ name, importance }) {
-  return (
-    <li className="item">
-      {name}
-    </li>
-  );
+  return <li className="item">{name}</li>;
 }
 
 export default function PackingList() {
@@ -560,18 +444,9 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item 
-          importance={9} 
-          name="Космический скафандр" 
-        />
-        <Item 
-          importance={0} 
-          name="Шлем с золотым листом" 
-        />
-        <Item 
-          importance={6} 
-          name="Фотография Тэма" 
-        />
+        <Item importance={9} name="Космический скафандр" />
+        <Item importance={0} name="Шлем с золотым листом" />
+        <Item importance={6} name="Фотография Тэма" />
       </ul>
     </section>
   );
@@ -591,10 +466,8 @@ function Item({ name, importance }) {
   return (
     <li className="item">
       {name}
-      {importance > 0 && ' '}
-      {importance > 0 &&
-        <i>(Важность: {importance})</i>
-      }
+      {importance > 0 && " "}
+      {importance > 0 && <i>(Важность: {importance})</i>}
     </li>
   );
 }
@@ -604,18 +477,9 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item 
-          importance={9} 
-          name="Космический скафандр" 
-        />
-        <Item 
-          importance={0} 
-          name="Шлем с золотым листом" 
-        />
-        <Item 
-          importance={6} 
-          name="Фотография Тэма" 
-        />
+        <Item importance={9} name="Космический скафандр" />
+        <Item importance={0} name="Шлем с золотым листом" />
+        <Item importance={6} name="Фотография Тэма" />
       </ul>
     </section>
   );
@@ -626,11 +490,11 @@ export default function PackingList() {
 
 Помни, что ты должен писать `importance > 0 && ...` а не `importance && ...` поэтому если `importance` это `0`, то `0` не зарендерится как результат!
 
-В этом решении, два раздельных условия были использованы, чтобы вставить пробел между именем и меткой важности. В качестве альтернативы можно использовать фрагмент с ведущим пробелом: `importance > 0 && <> <i>...</i></>` или добавить пробел сразу внутри тега `<i>`:  `importance > 0 && <i> ...</i>`.
+В этом решении, два раздельных условия были использованы, чтобы вставить пробел между именем и меткой важности. В качестве альтернативы можно использовать фрагмент с ведущим пробелом: `importance > 0 && <> <i>...</i></>` или добавить пробел сразу внутри тега `<i>`: `importance > 0 && <i> ...</i>`.
 
 </Solution>
 
-#### Отрефактори тернарный оператор `? :` на `if` и переменными {/*refactor-a-series-of---to-if-and-variables*/}
+#### Отрефактори тернарный оператор `? :` на `if` и переменными {/_refactor-a-series-of---to-if-and-variables_/}
 
 Этот `Drink` компонент использует серию `? :` условий, чтобы показать разную информацию, которая зависит от `name` пропа, который `"tea"` или `"coffee"`. Проблема в том, что информация о каждом напитке распределена по нескольким условиям. Отрефактори этот код таким образом, чтобы использовать одно `if` условие вместо трёх `? :` условий.
 
@@ -643,11 +507,11 @@ function Drink({ name }) {
       <h1>{name}</h1>
       <dl>
         <dt>Часть растения</dt>
-        <dd>{name === 'tea' ? 'leaf' : 'bean'}</dd>
+        <dd>{name === "tea" ? "leaf" : "bean"}</dd>
         <dt>Содержание кофеина</dt>
-        <dd>{name === 'tea' ? '15–70 мг/чашка' : '80–185 мг/чашка'}</dd>
+        <dd>{name === "tea" ? "15–70 мг/чашка" : "80–185 мг/чашка"}</dd>
         <dt>Возраст</dt>
-        <dd>{name === 'tea' ? '4,000+ лет' : '1,000+ лет'}</dd>
+        <dd>{name === "tea" ? "4,000+ лет" : "1,000+ лет"}</dd>
       </dl>
     </section>
   );
@@ -665,25 +529,25 @@ export default function DrinkList() {
 
 </Sandpack>
 
- После рефакторинга кода с использованием `if` у вас есть идеи, как его упростить?
+После рефакторинга кода с использованием `if` у вас есть идеи, как его упростить?
 
 <Solution>
 
- Есть несколько способов, но вот один из них, с которого можно начать:
+Есть несколько способов, но вот один из них, с которого можно начать:
 
 <Sandpack>
 
 ```js
 function Drink({ name }) {
   let part, caffeine, age;
-  if (name === 'tea') {
-    part = 'leaf';
-    caffeine = '15–70 мг/чашка';
-    age = '4,000+ лет';
-  } else if (name === 'coffee') {
-    part = 'bean';
-    caffeine = '80–185 мг/чашка';
-    age = '1,000+ лет';
+  if (name === "tea") {
+    part = "leaf";
+    caffeine = "15–70 мг/чашка";
+    age = "4,000+ лет";
+  } else if (name === "coffee") {
+    part = "bean";
+    caffeine = "80–185 мг/чашка";
+    age = "1,000+ лет";
   }
   return (
     <section>
@@ -721,15 +585,15 @@ export default function DrinkList() {
 ```js
 const drinks = {
   tea: {
-    part: 'leaf',
-    caffeine: '15–70 мг/чашка',
-    age: '4,000+ лет'
+    part: "leaf",
+    caffeine: "15–70 мг/чашка",
+    age: "4,000+ лет",
   },
   coffee: {
-    part: 'bean',
-    caffeine: '80–185 мг/чашка',
-    age: '1,000+ лет'
-  }
+    part: "bean",
+    caffeine: "80–185 мг/чашка",
+    age: "1,000+ лет",
+  },
 };
 
 function Drink({ name }) {

From 0bfb179b1e1ddecabe57dd54e4db126070fa0cbd Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 11:22:32 +0300
Subject: [PATCH 06/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 77d4cadcf..c6af2777f 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -251,7 +251,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-[JavaScript && выражение](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение его правой стороны (в нашем случае - это галочка) на левой стороне (наше условие) это `true`. Но если наше условие - `false`, тогда всё выражение становится `false`. React думает о `false` как о "дыре" внутри JSX дерева, прямо как о `null` или `undefined`, и React не рендерит ничего на этом месте.
+[JavaScript && выражение](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение его правой стороны (в нашем случае это галочка) на левой стороне (наше условие) это `true`. Но если наше условие - `false`, тогда всё выражение становится `false`. React думает о `false` как о "дыре" внутри JSX дерева, прямо как о `null` или `undefined`, и React не рендерит ничего на этом месте.
 
 <Pitfall>
 

From 4ced4b0c09853f5a05f3fa3ce1bc884dbce3ead1 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 11:32:37 +0300
Subject: [PATCH 07/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 151 ++++++++++++++++-----
 1 file changed, 120 insertions(+), 31 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index c6af2777f..132dc8100 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -26,7 +26,6 @@ title: Условный рендеринг
 function Item({ name, isPacked }) {
   return <li className="item">{name}</li>;
 }
-
 export default function PackingList() {
   return (
     <section>
@@ -71,9 +70,18 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item isPacked={true} name="Космический скафандр" />
-        <Item isPacked={true} name="Шлем с золотым листом" />
-        <Item isPacked={false} name="Фотография Тэма" />
+        <Item 
+          isPacked={true} 
+          name="Космический скафандр" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Шлем с золотым листом" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Фотография Тэма" 
+        />
       </ul>
     </section>
   );
@@ -114,9 +122,18 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item isPacked={true} name="Космический скафандр" />
-        <Item isPacked={true} name="Шлем с золотым листом" />
-        <Item isPacked={false} name="Фотография Тэма" />
+        <Item 
+          isPacked={true} 
+          name="Космический скафандр" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Шлем с золотым листом" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Фотография Тэма" 
+        />
       </ul>
     </section>
   );
@@ -195,9 +212,18 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item isPacked={true} name="Космический скафандр" />
-        <Item isPacked={true} name="Шлем с золотым листом" />
-        <Item isPacked={false} name="Фотография Тэма" />
+        <Item 
+          isPacked={true} 
+          name="Космический скафандр" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Шлем с золотым листом" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Фотография Тэма" 
+        />
       </ul>
     </section>
   );
@@ -240,9 +266,18 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item isPacked={true} name="Космический скафандр" />
-        <Item isPacked={true} name="Шлем с золотым листом" />
-        <Item isPacked={false} name="Фотография Тэма" />
+        <Item 
+          isPacked={true} 
+          name="Космический скафандр" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Шлем с золотым листом" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Фотография Тэма" 
+        />
       </ul>
     </section>
   );
@@ -305,9 +340,18 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item isPacked={true} name="Космический скафандр" />
-        <Item isPacked={true} name="Шлем с золотым листом" />
-        <Item isPacked={false} name="Фотография Тэма" />
+        <Item 
+          isPacked={true} 
+          name="Космический скафандр" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Шлем с золотым листом" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Фотография Тэма" 
+        />
       </ul>
     </section>
   );
@@ -334,9 +378,18 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item isPacked={true} name="Космический скафандр" />
-        <Item isPacked={true} name="Шлем с золотым листом" />
-        <Item isPacked={false} name="Фотография Тэма" />
+        <Item 
+          isPacked={true} 
+          name="Космический скафандр" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Шлем с золотым листом" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Фотография Тэма" 
+        />
       </ul>
     </section>
   );
@@ -380,9 +433,18 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item isPacked={true} name="Космический скафандр" />
-        <Item isPacked={true} name="Шлем с золотым листом" />
-        <Item isPacked={false} name="Фотография Тэма" />
+        <Item 
+          isPacked={true} 
+          name="Космический скафандр" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Шлем с золотым листом" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Фотография Тэма" 
+        />
       </ul>
     </section>
   );
@@ -409,9 +471,18 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item isPacked={true} name="Космический скафандр" />
-        <Item isPacked={true} name="Шлем с золотым листом" />
-        <Item isPacked={false} name="Фотография Тэма" />
+        <Item 
+          isPacked={true} 
+          name="Космический скафандр" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Шлем с золотым листом" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Фотография Тэма" 
+        />
       </ul>
     </section>
   );
@@ -444,9 +515,18 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item importance={9} name="Космический скафандр" />
-        <Item importance={0} name="Шлем с золотым листом" />
-        <Item importance={6} name="Фотография Тэма" />
+        <Item 
+          isPacked={true} 
+          name="Космический скафандр" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Шлем с золотым листом" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Фотография Тэма" 
+        />
       </ul>
     </section>
   );
@@ -477,9 +557,18 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item importance={9} name="Космический скафандр" />
-        <Item importance={0} name="Шлем с золотым листом" />
-        <Item importance={6} name="Фотография Тэма" />
+        <Item 
+          isPacked={true} 
+          name="Космический скафандр" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Шлем с золотым листом" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Фотография Тэма" 
+        />
       </ul>
     </section>
   );

From fc37a0519921fbe0e2fe1205e5322585adb2b27f Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 11:36:18 +0300
Subject: [PATCH 08/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 132dc8100..b285db96e 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -31,9 +31,18 @@ export default function PackingList() {
     <section>
       <h1>Список вещей Салли Райд</h1>
       <ul>
-        <Item isPacked={true} name="Космический скафандр" />
-        <Item isPacked={true} name="Шлем с золотым листом" />
-        <Item isPacked={false} name="Фотография Тэма" />
+        <Item 
+          isPacked={true} 
+          name="Космический скафандр" 
+        />
+        <Item 
+          isPacked={true} 
+          name="Шлем с золотым листом" 
+        />
+        <Item 
+          isPacked={false} 
+          name="Фотография Тэма" 
+        />
       </ul>
     </section>
   );

From 7d55cc2386c53998f56bdcaa85809a3b075e9dca Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 11:42:42 +0300
Subject: [PATCH 09/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index b285db96e..c5b427e49 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -567,15 +567,15 @@ export default function PackingList() {
       <h1>Список вещей Салли Райд</h1>
       <ul>
         <Item 
-          isPacked={true} 
+          importance={9} 
           name="Космический скафандр" 
         />
         <Item 
-          isPacked={true} 
+          importance={0} 
           name="Шлем с золотым листом" 
         />
         <Item 
-          isPacked={false} 
+          importance={6} 
           name="Фотография Тэма" 
         />
       </ul>

From 2b4f2fa10530e3881dfb6c29cb284ab81da542cd Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 11:49:31 +0300
Subject: [PATCH 10/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 44 ++++++++++++++++++----
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index c5b427e49..75e6cc42f 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -51,6 +51,7 @@ export default function PackingList() {
 
 </Sandpack>
                   
+
 Заметь, что некоторые `Item` компоненты имеют свой `isPacked` проп, который `true` вместо `false`. Ты хочешь добавить галочку (✔) к упакованным вещам, если if `isPacked={true}`.
 
 Ты можешь писать это как [`if`/`else` условие](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...) таким образом:
@@ -194,7 +195,11 @@ return <li className="item">{name}</li>;
 Вы можете написать это:
 
 ```js
-return <li className="item">{isPacked ? name + " ✔" : name}</li>;
+return (
+  <li className="item">
+    {isPacked ? name + ' ✔' : name}
+  </li>
+);
 ```
 
 Вы можете читать это как _"if `isPacked` это true, тогда (`?`) рендерим `name + ' ✔'`, в противном случае (`:`) рендерю `name`"_.
@@ -213,7 +218,17 @@ return <li className="item">{isPacked ? name + " ✔" : name}</li>;
 
 ```js
 function Item({ name, isPacked }) {
-  return <li className="item">{isPacked ? <del>{name + " ✔"}</del> : name}</li>;
+  return (
+    <li className="item">
+      {isPacked ? (
+        <del>
+          {name + ' ✔'}
+        </del>
+      ) : (
+        name
+      )}
+    </li>
+  );
 }
 
 export default function PackingList() {
@@ -327,9 +342,10 @@ if (isPacked) {
 
 [Фигурные скобки открывают "окно в мир JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Вставьте переменную с фигурными скобками в возвращаемое дерево JSX, вложив ранее вычисленное выражение внутрь JSX:
 
-```js
-<li className="item">{itemContent}</li>
-```
+
+<li className="item">
+  {itemContent}
+</li>
 
 Этот стиль самый многословный, но и самый гибкий. Вот он в действии:
 
@@ -341,7 +357,11 @@ function Item({ name, isPacked }) {
   if (isPacked) {
     itemContent = name + " ✔";
   }
-  return <li className="item">{itemContent}</li>;
+  return (
+    <li className="item">
+      {itemContent}
+    </li>
+  );
 }
 
 export default function PackingList() {
@@ -377,9 +397,17 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
   let itemContent = name;
   if (isPacked) {
-    itemContent = <del>{name + " ✔"}</del>;
+     itemContent = (
+      <del>
+        {name + " ✔"}
+      </del>
+    );
   }
-  return <li className="item">{itemContent}</li>;
+   return (
+    <li className="item">
+      {itemContent}
+    </li>
+  );
 }
 
 export default function PackingList() {

From 6df1c9b7c2201d1eede1b82ac331934ed2c45aac Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 11:52:11 +0300
Subject: [PATCH 11/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 75e6cc42f..40894a19e 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -311,8 +311,10 @@ export default function PackingList() {
 </Sandpack>
 
 [JavaScript && выражение](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение его правой стороны (в нашем случае это галочка) на левой стороне (наше условие) это `true`. Но если наше условие - `false`, тогда всё выражение становится `false`. React думает о `false` как о "дыре" внутри JSX дерева, прямо как о `null` или `undefined`, и React не рендерит ничего на этом месте.
+  
 
-<Pitfall>
+
+  <Pitfall>
 
 **Не ставь числа по левую сторону `&&`.**
 
@@ -342,10 +344,11 @@ if (isPacked) {
 
 [Фигурные скобки открывают "окно в мир JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Вставьте переменную с фигурными скобками в возвращаемое дерево JSX, вложив ранее вычисленное выражение внутрь JSX:
 
-
+```js
 <li className="item">
   {itemContent}
 </li>
+```
 
 Этот стиль самый многословный, но и самый гибкий. Вот он в действии:
 

From de0aac4f8246aa4628ff84d1d2705e12e72908f3 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 11:55:57 +0300
Subject: [PATCH 12/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 40894a19e..5782b7022 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -311,10 +311,9 @@ export default function PackingList() {
 </Sandpack>
 
 [JavaScript && выражение](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение его правой стороны (в нашем случае это галочка) на левой стороне (наше условие) это `true`. Но если наше условие - `false`, тогда всё выражение становится `false`. React думает о `false` как о "дыре" внутри JSX дерева, прямо как о `null` или `undefined`, и React не рендерит ничего на этом месте.
-  
 
 
-  <Pitfall>
+<Pitfall>
 
 **Не ставь числа по левую сторону `&&`.**
 
@@ -547,7 +546,11 @@ export default function PackingList() {
 
 ```js
 function Item({ name, importance }) {
-  return <li className="item">{name}</li>;
+  return (
+    <li className="item">
+      {name}
+    </li>
+  );
 }
 
 export default function PackingList() {

From 7791ddf2739d311297351ead9758f3113b6d203e Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 11:58:45 +0300
Subject: [PATCH 13/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 5782b7022..266c286fe 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -589,8 +589,10 @@ function Item({ name, importance }) {
   return (
     <li className="item">
       {name}
-      {importance > 0 && " "}
-      {importance > 0 && <i>(Важность: {importance})</i>}
+      {importance > 0 && ' '}
+       {importance > 0 &&
+        <i>(Importance: {importance})</i>
+      }
     </li>
   );
 }

From 895cb03f201e681bf79117d5a38e6c86fba69980 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 12:00:16 +0300
Subject: [PATCH 14/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 266c286fe..f49d28a29 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -450,6 +450,8 @@ export default function PackingList() {
 
 </Recap>
 
+  
+
 <Challenges>
 
 #### Покажи иконку для неупакованных вещей `? :` {/_show-an-icon-for-incomplete-items-with--_/}
@@ -590,7 +592,7 @@ function Item({ name, importance }) {
     <li className="item">
       {name}
       {importance > 0 && ' '}
-       {importance > 0 &&
+      {importance > 0 &&
         <i>(Importance: {importance})</i>
       }
     </li>

From 5d7e74b25074cd224eefdfee82d6d49fec81999c Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 12:01:51 +0300
Subject: [PATCH 15/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index f49d28a29..00f56893e 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -450,7 +450,7 @@ export default function PackingList() {
 
 </Recap>
 
-  
+
 
 <Challenges>
 

From cf7d8b80db5c2f639ad5ded3e7c978d4f29be6fc Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 12:11:21 +0300
Subject: [PATCH 16/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 00f56893e..64f53ac3a 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -310,7 +310,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-[JavaScript && выражение](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение его правой стороны (в нашем случае это галочка) на левой стороне (наше условие) это `true`. Но если наше условие - `false`, тогда всё выражение становится `false`. React думает о `false` как о "дыре" внутри JSX дерева, прямо как о `null` или `undefined`, и React не рендерит ничего на этом месте.
+[JavaScript && выражение](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение его правой стороны (в нашем случае это галочка) на левой стороне (наше условие) это `true`. Но если наше условие — `false`, тогда всё выражение становится `false`. React думает о `false` как о "дыре" внутри JSX дерева, прямо как о `null` или `undefined`, и React не рендерит ничего на этом месте.
 
 
 <Pitfall>

From 66f3addcb755745ce3bdc8c3baeb78f49763fc33 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 12:13:36 +0300
Subject: [PATCH 17/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 64f53ac3a..5f5418b20 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -437,7 +437,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-Если вы не знакомы с JavaScript, то такое разнообразие стилей может показаться поначалу ошеломляющим. Однако их изучение поможет вам читать и писать любой код JavaScript - и не только компоненты React! Выберите для начала тот, который вам больше нравится, а затем снова обратитесь к этому справочнику, если вы забудете, как работают другие.
+Если вы не знакомы с JavaScript, то такое разнообразие стилей может показаться поначалу ошеломляющим. Однако их изучение поможет вам читать и писать любой код JavaScript — и не только компоненты React! Выберите для начала тот, который вам больше нравится, а затем снова обратитесь к этому справочнику, если вы забудете, как работают другие.
 
 <Recap>
 

From 00b30764f7287a5c6c4473e6badc09dad2d04719 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 12:26:07 +0300
Subject: [PATCH 18/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 5f5418b20..1618fb7fd 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -4,7 +4,7 @@ title: Условный рендеринг
 
 <Intro>
 
-Твоим компонентам нужно будет часто отображать различные вещи в зависимости от различных условий. В React ты можешь реденрить JSX в зависимости от его условий, используя JavaScript операторы. Такие, как `if`, `&&` и `? :`
+Вашим компонентам нужно будет часто отображать различные вещи в зависимости от различных условий. В React вы можете реденрить JSX в зависимости от его условий, используя JavaScript операторы. Такие, как `if`, `&&` и `? :`
 
 </Intro>
 
@@ -12,13 +12,13 @@ title: Условный рендеринг
 
 - Как вернуть разный JSX, в зависимости от его условия
 - Как условно включить или исключить фрагмент JSX
-- Общий условный синтаксис, который ты встретишь в кодовой базе React.
+- Общий условный синтаксис, которые вы встретите в кодовой базе React.
 
 </YouWillLearn>
 
 ## Условно возвращаемый JSX {/_conditionally-returning-jsx_/}
 
-Допустим, у тебя есть `PackingList` компонент, который рендерит несколько `Item`ов, которые могут быть обозначены, как упакованные или неуправкованные:
+Допустим, у вас есть `PackingList` компонент, который рендерит несколько `Item`ов, которые могут быть обозначены, как упакованные или неуправкованные:
 
 <Sandpack>
 
@@ -52,9 +52,9 @@ export default function PackingList() {
 </Sandpack>
                   
 
-Заметь, что некоторые `Item` компоненты имеют свой `isPacked` проп, который `true` вместо `false`. Ты хочешь добавить галочку (✔) к упакованным вещам, если if `isPacked={true}`.
+Заметь, что некоторые `Item` компоненты имеют свой `isPacked` проп, который `true` вместо `false`. Вы хотите добавить галочку (✔) к упакованным вещам, если if `isPacked={true}`.
 
-Ты можешь писать это как [`if`/`else` условие](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...) таким образом:
+Вы можете писать это как [`if`/`else` условие](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...) таким образом:
 
 ```js
 if (isPacked) {
@@ -536,7 +536,7 @@ export default function PackingList() {
 
 #### Покажи важность вещи с помощью `&&` {/_show-the-item-importance-with-_/}
 
-В этом примере каждый `Item` получает числовой `importance` проп. Используй `&&` чтобы зарендерить "_(Важность: X)_" в italics стиле, но только для вещей важность которых больше 0. Твой конечный резульат должен выглядить вот так вот:
+В этом примере каждый `Item` получает числовой `importance` проп. Используй `&&` чтобы зарендерить "_(Важность: X)_" в italics стиле, но только для вещей важность которых больше 0. Ваш конечный резульат должен выглядеть вот так вот:
 
 - Космический скафандр _(Важность: 9)_
 - Шлем с золотым листом

From 49fcfe19014e4adc6826446f186129a6db3daf0c Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 12:53:56 +0300
Subject: [PATCH 19/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 1618fb7fd..4e2da7b65 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -63,7 +63,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-Если `isPacked` проп - это `true`, то этот код **вернёт другое JSX дерево.** Вместе с этим изменением, то некоторые вещи получат галочку в конце:
+Если `isPacked` проп - это `true`, то этот код **вернёт другое JSX дерево.** Вместе с этим изменением, некоторые вещи получат галочку в конце:
 
 <Sandpack>
 

From 64884e908378e3b27d0f744b9826385d717284db Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 12:57:24 +0300
Subject: [PATCH 20/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 4e2da7b65..6116d9e74 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -4,7 +4,7 @@ title: Условный рендеринг
 
 <Intro>
 
-Вашим компонентам нужно будет часто отображать различные вещи в зависимости от различных условий. В React вы можете реденрить JSX в зависимости от его условий, используя JavaScript операторы. Такие, как `if`, `&&` и `? :`
+Вашим компонентам нужно часто отображать различные вещи в зависимости от различных условий. В React вы можете реденрить JSX в зависимости от его условий, используя JavaScript операторы. Такие, как `if`, `&&` и `? :`
 
 </Intro>
 

From d7aa356876e6e3a318406df62964a07dfbaaf3ff Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 13:00:05 +0300
Subject: [PATCH 21/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 6116d9e74..12aecd279 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -63,7 +63,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-Если `isPacked` проп - это `true`, то этот код **вернёт другое JSX дерево.** Вместе с этим изменением, некоторые вещи получат галочку в конце:
+Если `isPacked` проп — это `true`, то этот код **вернёт другое JSX дерево.** Вместе с этим изменением, некоторые вещи получат галочку в конце:
 
 <Sandpack>
 
@@ -181,7 +181,7 @@ return <li className="item">{name}</li>;
 
 ### Условный (тернанрый) оператор (`? :`) {/_conditional-ternary-operator--_/}
 
-В JavaScript есть компактный синтаксис для написания условного выражения - [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) или "тернарный оператор".
+В JavaScript есть компактный синтаксис для написания условного выражения — [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) или "тернарный оператор".
 
 Вместо этого:
 

From 8674f2af39d5f6f51005a921329a2d0b85f88978 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 13:05:47 +0300
Subject: [PATCH 22/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 30 +++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 12aecd279..6697a3c7f 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -16,7 +16,7 @@ title: Условный рендеринг
 
 </YouWillLearn>
 
-## Условно возвращаемый JSX {/_conditionally-returning-jsx_/}
+## Условно возвращаемый JSX {/*conditionally-returning-jsx*/}
 
 Допустим, у вас есть `PackingList` компонент, который рендерит несколько `Item`ов, которые могут быть обозначены, как упакованные или неуправкованные:
 
@@ -104,7 +104,7 @@ export default function PackingList() {
 
 Обратите внимание, как вы создаете разветвленную логику с помощью операторов JavaScript `if` и `return`. В React поток управления (как и условия) обрабатывается JavaScript.
 
-### Условно возвращаем ничего, с помощью `null` {/_conditionally-returning-nothing-with-null_/}
+### Условно возвращаем ничего, с помощью `null` {/*conditionally-returning-nothing-with-null*/}
 
 В некоторых ситуациях вы вообще не захотите ничего рендерить. Например, вы не хотите показывать упакованные предметы. Компонент должен что-то возвращать. В этом случае вы можете вернуть `null`:
 
@@ -154,7 +154,7 @@ export default function PackingList() {
 
 На практике возврат `null` из компонента не является обычным делом, поскольку это может удивить разработчика, пытающегося его зарендерить. Чаще всего вы условно включаете или исключаете компонент JSX из родительского компонента. Вот как это сделать!
 
-## Условное включение JSX {/_conditionally-including-jsx_/}
+## Условное включение JSX {/*conditionally-including-jsx*/}
 
 В предыдущем примере вы контролировали, какое JSX дерево будет возвращено компонентом (если вообще будет!). Возможно, вы уже заметили некоторое дублирование в выводе рендера:
 
@@ -179,7 +179,7 @@ return <li className="item">{name}</li>;
 
 Хоть и такое дублирование не вредно, но оно может усложнить поддержание вашего кода. Что если вы захотите изменить `className`? Вам придется делать это в двух местах вашего кода! В такой ситуации вы можете условно включить небольшой JSX, чтобы сделать ваш код более [DRY.](https://ru.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself).
 
-### Условный (тернанрый) оператор (`? :`) {/_conditional-ternary-operator--_/}
+### Условный (тернанрый) оператор (`? :`) {/*conditional-ternary-operator--*/}
 
 В JavaScript есть компактный синтаксис для написания условного выражения — [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) или "тернарный оператор".
 
@@ -202,13 +202,13 @@ return (
 );
 ```
 
-Вы можете читать это как _"if `isPacked` это true, тогда (`?`) рендерим `name + ' ✔'`, в противном случае (`:`) рендерю `name`"_.
+Вы можете читать это как *"if `isPacked` это true, тогда (`?`) рендерим `name + ' ✔'`, в противном случае (`:`) рендерю `name`"*.
 
 <DeepDive>
 
-####Являются ли эти два примера полностью эквивалентными? {/_are-these-two-examples-fully-equivalent_/}
+####Являются ли эти два примера полностью эквивалентными? {/*are-these-two-examples-fully-equivalent*/}
 
-Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера мало чем отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `<li>`. Но элементы JSX не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными узлами DOM. Это легкие описания, как чертежи. Так что эти два примера, на самом деле, _совершенно эквивалентны_. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает.
+Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера мало чем отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `<li>`. Но элементы JSX не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными узлами DOM. Это легкие описания, как чертежи. Так что эти два примера, на самом деле, *совершенно эквивалентны*. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает.
 
 </DeepDive>
 
@@ -258,7 +258,7 @@ export default function PackingList() {
 
 Этот стиль хорошо работает для простых условий, но используйте его в меру. Если ваши компоненты становятся беспорядочными из-за слишком большого количества вложенной условной разметки, подумайте об извлечении дочерних компонентов, чтобы навести порядок. В React разметка является частью кода, поэтому вы можете использовать такие инструменты, как переменные и функции, чтобы привести в порядок сложные выражения.
 
-### Логичксий И оператор (`&&`) {/_logical-and-operator-_/}
+### Логичксий И оператор (`&&`) {/*logical-and-operator-*/}
 
 Еще одно часто встречающееся сокращение [JavaScript логический И (`&&`) оператор.](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) Внутри React компонентов, часто случается так, что тебе нужно зарендерить JSX, когда условие true, **или не рендерить ничего.** С `&&`, вы можете исходя из условия зарендерить галочку, if `isPacked` это `true`:
 
@@ -270,7 +270,7 @@ return (
 );
 ```
 
-Вы можете читать это как _"if `isPacked`, тогда (`&&`) рендерим галочку, в противном случае, мы не рендерим ничего"_.
+Вы можете читать это как *"if `isPacked`, тогда (`&&`) рендерим галочку, в противном случае, мы не рендерим ничего"*.
 
 Вот это в действии:
 
@@ -325,7 +325,7 @@ export default function PackingList() {
 
 </Pitfall>
 
-### Условное присвоение JSX к переменной {/_conditionally-assigning-jsx-to-a-variable_/}
+### Условное присвоение JSX к переменной {/*conditionally-assigning-jsx-to-a-variable*/}
 
 Когда сокращения встревают на пути к написанию понятного кода, то попробуйте использовать `if` оператор и переменную. Вы можете изменить переменные, написанные с помощью [`let`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let), поэтому начните с предоставления содержимого по умолчанию, которое вы хотите отобразить, name:
 
@@ -444,8 +444,8 @@ export default function PackingList() {
 - В React вы управляете логикой ветвления с помощью JavaScript.
 - Вы можете возвращать выражение JSX условно с помощью оператора `if`.
 - Вы можете условно сохранить логику JSX в переменную, а затем включить её в другие JSX с помощью фигурных скобок.
-- В JSX, `{cond ? <A /> : <B />}` означает _"if `cond`, рендери `<A />`, в противном случае `<B />`"_.
-- В JSX, `{cond && <A />}` означает _"if `cond`, рендери `<A />`, иначе ничего"_.
+- В JSX, `{cond ? <A /> : <B />}` означает *"if `cond`, рендери `<A />`, в противном случае `<B />`"*.
+- В JSX, `{cond && <A />}` означает *"if `cond`, рендери `<A />`, иначе ничего"*.
 - Эти сокращения являются общепринятыми, но вы не обязаны их использовать, если предпочитаете простые выражения. `if`.
 
 </Recap>
@@ -454,7 +454,7 @@ export default function PackingList() {
 
 <Challenges>
 
-#### Покажи иконку для неупакованных вещей `? :` {/_show-an-icon-for-incomplete-items-with--_/}
+#### Покажи иконку для неупакованных вещей `? :` {/*show-an-icon-for-incomplete-items-with--*/}
 
 Используй тернарный оператор (`cond ? a : b`) чтобы зарендерить ❌ if `isPacked` не равен `true`.
 
@@ -534,7 +534,7 @@ export default function PackingList() {
 
 </Solution>
 
-#### Покажи важность вещи с помощью `&&` {/_show-the-item-importance-with-_/}
+#### Покажи важность вещи с помощью `&&` {/*show-the-item-importance-with-*/}
 
 В этом примере каждый `Item` получает числовой `importance` проп. Используй `&&` чтобы зарендерить "_(Важность: X)_" в italics стиле, но только для вещей важность которых больше 0. Ваш конечный резульат должен выглядеть вот так вот:
 
@@ -630,7 +630,7 @@ export default function PackingList() {
 
 </Solution>
 
-#### Отрефактори тернарный оператор `? :` на `if` и переменными {/_refactor-a-series-of---to-if-and-variables_/}
+#### Отрефактори тернарный оператор `? :` на `if` и переменными {/*refactor-a-series-of---to-if-and-variables*/}
 
 Этот `Drink` компонент использует серию `? :` условий, чтобы показать разную информацию, которая зависит от `name` пропа, который `"tea"` или `"coffee"`. Проблема в том, что информация о каждом напитке распределена по нескольким условиям. Отрефактори этот код таким образом, чтобы использовать одно `if` условие вместо трёх `? :` условий.
 

From 522032947825f8dad1541acdd454c7fa6ef41d45 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 13:55:20 +0300
Subject: [PATCH 23/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 6697a3c7f..6cd656320 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -212,7 +212,7 @@ return (
 
 </DeepDive>
 
-Теперь предположим, что вы хотите обернуть текст завершенного элемента в другой HTML тег, например <del>, чтобы вычеркнуть его. Вы можете добавить еще больше новых линий и круглых скобок, чтобы было проще вложить больше JSX в каждом из случаев:
+Теперь предположим, что вы хотите обернуть текст завершенного элемента в другой HTML тег, например `<del>`, чтобы вычеркнуть его. Вы можете добавить еще больше новых линий и круглых скобок, чтобы было проще вложить больше JSX в каждом из случаев:
 
 <Sandpack>
 

From abccea351c18f3964fc8469d47278e9a91f298c5 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 14:09:59 +0300
Subject: [PATCH 24/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 6cd656320..507087307 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -206,7 +206,7 @@ return (
 
 <DeepDive>
 
-####Являются ли эти два примера полностью эквивалентными? {/*are-these-two-examples-fully-equivalent*/}
+#### Являются ли эти два примера полностью эквивалентными? {/*are-these-two-examples-fully-equivalent*/}
 
 Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера мало чем отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `<li>`. Но элементы JSX не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными узлами DOM. Это легкие описания, как чертежи. Так что эти два примера, на самом деле, *совершенно эквивалентны*. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает.
 

From 6d0fa5223f86f1cf0e795f0b37a922f33f7ff590 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 14:33:10 +0300
Subject: [PATCH 25/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 507087307..f871b570b 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -12,13 +12,13 @@ title: Условный рендеринг
 
 - Как вернуть разный JSX, в зависимости от его условия
 - Как условно включить или исключить фрагмент JSX
-- Общий условный синтаксис, которые вы встретите в кодовой базе React.
+- Общий условный синтаксис, который вы встретите в кодовой базе React.
 
 </YouWillLearn>
 
 ## Условно возвращаемый JSX {/*conditionally-returning-jsx*/}
 
-Допустим, у вас есть `PackingList` компонент, который рендерит несколько `Item`ов, которые могут быть обозначены, как упакованные или неуправкованные:
+Допустим, у вас есть `PackingList` компонент, который рендерит несколько `Item`, которые могут быть обозначены, как упакованные или неуправкованные:
 
 <Sandpack>
 
@@ -333,7 +333,7 @@ export default function PackingList() {
 let itemContent = name;
 ```
 
-Используй `if` оператор чтобы переназначить JSX выражение `itemContent` если `isPacked` это `true`:
+Используйте `if` оператор чтобы переназначить JSX выражение `itemContent` если `isPacked` это `true`:
 
 ```js
 if (isPacked) {
@@ -454,7 +454,7 @@ export default function PackingList() {
 
 <Challenges>
 
-#### Покажи иконку для неупакованных вещей `? :` {/*show-an-icon-for-incomplete-items-with--*/}
+#### Покажи иконку для неупакованных вещей с `? :` {/*show-an-icon-for-incomplete-items-with--*/}
 
 Используй тернарный оператор (`cond ? a : b`) чтобы зарендерить ❌ if `isPacked` не равен `true`.
 
@@ -593,7 +593,7 @@ function Item({ name, importance }) {
       {name}
       {importance > 0 && ' '}
       {importance > 0 &&
-        <i>(Importance: {importance})</i>
+        <i>(Важность: {importance})</i>
       }
     </li>
   );
@@ -630,9 +630,9 @@ export default function PackingList() {
 
 </Solution>
 
-#### Отрефактори тернарный оператор `? :` на `if` и переменными {/*refactor-a-series-of---to-if-and-variables*/}
+#### Отрефактори тернарный оператор `? :` на `if` с переменной {/*refactor-a-series-of---to-if-and-variables*/}
 
-Этот `Drink` компонент использует серию `? :` условий, чтобы показать разную информацию, которая зависит от `name` пропа, который `"tea"` или `"coffee"`. Проблема в том, что информация о каждом напитке распределена по нескольким условиям. Отрефактори этот код таким образом, чтобы использовать одно `if` условие вместо трёх `? :` условий.
+Этот `Drink` компонент использует серию `? :` условий, чтобы показать разную информацию, которая зависит от `name` пропа, который `"tea"` или `"coffee"`. Проблема в том, что информация о каждом напитке распределена по нескольким условиям. Отрефактори этот код так, чтобы использовать одно `if` условие вместо трёх `? :` условий.
 
 <Sandpack>
 

From a8c91f7874c06cab1453080c58761c9d16c74cda Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 25 Apr 2023 16:46:36 +0300
Subject: [PATCH 26/49] Update conditional-rendering.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

лишняя буква
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index f871b570b..628c7b70f 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -18,7 +18,7 @@ title: Условный рендеринг
 
 ## Условно возвращаемый JSX {/*conditionally-returning-jsx*/}
 
-Допустим, у вас есть `PackingList` компонент, который рендерит несколько `Item`, которые могут быть обозначены, как упакованные или неуправкованные:
+Допустим, у вас есть `PackingList` компонент, который рендерит несколько `Item`, которые могут быть обозначены, как упакованные или неупавкованные:
 
 <Sandpack>
 

From 82dbbe194a5af437661e4bc392c637ebab6b4a39 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Wed, 26 Apr 2023 02:42:15 +0300
Subject: [PATCH 27/49] Update conditional-rendering.md

typo fix
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 628c7b70f..d8904dd77 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -4,7 +4,7 @@ title: Условный рендеринг
 
 <Intro>
 
-Вашим компонентам нужно часто отображать различные вещи в зависимости от различных условий. В React вы можете реденрить JSX в зависимости от его условий, используя JavaScript операторы. Такие, как `if`, `&&` и `? :`
+Вашим компонентам нужно часто отображать различные вещи в зависимости от различных условий. В React вы можете рендерить JSX в зависимости от его условий, используя JavaScript операторы. Такие, как `if`, `&&` и `? :`
 
 </Intro>
 

From 55f3f935e8b127addf04c443f00a1460bb74f875 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Thu, 27 Apr 2023 01:09:15 +0300
Subject: [PATCH 28/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Fedya Petrakov <jakephin2015@gmail.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index d8904dd77..831ea7269 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -18,7 +18,7 @@ title: Условный рендеринг
 
 ## Условно возвращаемый JSX {/*conditionally-returning-jsx*/}
 
-Допустим, у вас есть `PackingList` компонент, который рендерит несколько `Item`, которые могут быть обозначены, как упакованные или неупавкованные:
+Допустим, у вас есть компонент `PackingList`, который рендерит несколько компонентов `Item`, они могут быть обозначены, как упакованные или нет:
 
 <Sandpack>
 

From 3d3762accb04f7907ba92b18919d08a14c3e9b55 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Thu, 27 Apr 2023 01:10:02 +0300
Subject: [PATCH 29/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Fedya Petrakov <jakephin2015@gmail.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 831ea7269..d8016e75e 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -52,7 +52,7 @@ export default function PackingList() {
 </Sandpack>
                   
 
-Заметь, что некоторые `Item` компоненты имеют свой `isPacked` проп, который `true` вместо `false`. Вы хотите добавить галочку (✔) к упакованным вещам, если if `isPacked={true}`.
+Обратите внимание, что некоторые компоненты `Item` имеют свойство `isPacked`, со значением `true` вместо `false`. Допустим, вы хотите добавить (✔) к упакованным вещам, если if `isPacked={true}`.
 
 Вы можете писать это как [`if`/`else` условие](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...) таким образом:
 

From 99a883202b4dc922bc5a7365e1ace05b5c507d01 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Thu, 27 Apr 2023 01:10:12 +0300
Subject: [PATCH 30/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Fedya Petrakov <jakephin2015@gmail.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index d8016e75e..c1ad8d179 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -54,7 +54,7 @@ export default function PackingList() {
 
 Обратите внимание, что некоторые компоненты `Item` имеют свойство `isPacked`, со значением `true` вместо `false`. Допустим, вы хотите добавить (✔) к упакованным вещам, если if `isPacked={true}`.
 
-Вы можете писать это как [`if`/`else` условие](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...) таким образом:
+Можно реализовать это с помощью [управляющей конструкции `if`/`else`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...) таким образом:
 
 ```js
 if (isPacked) {

From 3fa550b387153d92f336dab52d8a92e88e105c63 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Thu, 27 Apr 2023 01:10:57 +0300
Subject: [PATCH 31/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Fedya Petrakov <jakephin2015@gmail.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index c1ad8d179..75c662d80 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -12,7 +12,7 @@ title: Условный рендеринг
 
 - Как вернуть разный JSX, в зависимости от его условия
 - Как условно включить или исключить фрагмент JSX
-- Общий условный синтаксис, который вы встретите в кодовой базе React.
+- Часто встречающиеся конструкции, которые вы найдете в проектах на React.
 
 </YouWillLearn>
 

From 525404a0a5060b07799904054647dfc0c940d35c Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Thu, 27 Apr 2023 01:16:12 +0300
Subject: [PATCH 32/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 75c662d80..bec0d3c2b 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -11,7 +11,7 @@ title: Условный рендеринг
 <YouWillLearn>
 
 - Как вернуть разный JSX, в зависимости от его условия
-- Как условно включить или исключить фрагмент JSX
+- Как по условию добавить или убрать часть JSX
 - Часто встречающиеся конструкции, которые вы найдете в проектах на React.
 
 </YouWillLearn>

From 261fdd9fcfa4bacadd9f0b910ed4a90b642c26a5 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Thu, 27 Apr 2023 01:52:01 +0300
Subject: [PATCH 33/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index bec0d3c2b..ee5ecf9ff 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -624,15 +624,15 @@ export default function PackingList() {
 
 </Sandpack>
 
-Помни, что ты должен писать `importance > 0 && ...` а не `importance && ...` поэтому если `importance` это `0`, то `0` не зарендерится как результат!
+Помните, что вы должны писать `importance > 0 && ...` а не `importance && ...` и если `importance` это `0`, то `0` не зарендерится как результат!
 
 В этом решении, два раздельных условия были использованы, чтобы вставить пробел между именем и меткой важности. В качестве альтернативы можно использовать фрагмент с ведущим пробелом: `importance > 0 && <> <i>...</i></>` или добавить пробел сразу внутри тега `<i>`: `importance > 0 && <i> ...</i>`.
 
 </Solution>
 
-#### Отрефактори тернарный оператор `? :` на `if` с переменной {/*refactor-a-series-of---to-if-and-variables*/}
+#### Перепешите тернарный оператор `? :` на `if` с переменной {/*refactor-a-series-of---to-if-and-variables*/}
 
-Этот `Drink` компонент использует серию `? :` условий, чтобы показать разную информацию, которая зависит от `name` пропа, который `"tea"` или `"coffee"`. Проблема в том, что информация о каждом напитке распределена по нескольким условиям. Отрефактори этот код так, чтобы использовать одно `if` условие вместо трёх `? :` условий.
+Этот `Drink` компонент использует серию `? :` условий, чтобы показать разную информацию, которая зависит от `name` пропа, который `"tea"` или `"coffee"`. Проблема в том, что информация о каждом напитке распределена по нескольким условиям. Перепешите этот код так, чтобы использовать одно `if` условие вместо трёх `? :` условий.
 
 <Sandpack>
 

From 0217babeac544e3da17b6fad803037fb49d24304 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Thu, 27 Apr 2023 12:42:09 +0300
Subject: [PATCH 34/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index ee5ecf9ff..97f0594e3 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -10,8 +10,8 @@ title: Условный рендеринг
 
 <YouWillLearn>
 
-- Как вернуть разный JSX, в зависимости от его условия
-- Как по условию добавить или убрать часть JSX
+- Как вернуть разный JSX, в зависимости от ситуации.
+- Как по условию добавить или убрать часть JSX.
 - Часто встречающиеся конструкции, которые вы найдете в проектах на React.
 
 </YouWillLearn>

From 47fff652f559a9fd66adfc40479f0dc734446c47 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Mon, 22 May 2023 23:22:27 +0300
Subject: [PATCH 35/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Nick Tishkevich <Nikolai.Tishkevich@artezio.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 97f0594e3..658cd7ef5 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -10,7 +10,7 @@ title: Условный рендеринг
 
 <YouWillLearn>
 
-- Как вернуть разный JSX, в зависимости от ситуации.
+- Как вернуть разный JSX, в зависимости от условия.
 - Как по условию добавить или убрать часть JSX.
 - Часто встречающиеся конструкции, которые вы найдете в проектах на React.
 

From 7fc6784e1497d853eaffb95549d6deb7e02186b4 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Mon, 22 May 2023 23:23:46 +0300
Subject: [PATCH 36/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Nick Tishkevich <Nikolai.Tishkevich@artezio.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 658cd7ef5..b5c5c2857 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -11,7 +11,7 @@ title: Условный рендеринг
 <YouWillLearn>
 
 - Как вернуть разный JSX, в зависимости от условия.
-- Как по условию добавить или убрать часть JSX.
+- Как в зависимости от условий добавить или убрать часть JSX.
 - Часто встречающиеся конструкции, которые вы найдете в проектах на React.
 
 </YouWillLearn>

From 7ea68e11a4f5fec36c810b050528b06e5e327df5 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Mon, 22 May 2023 23:36:18 +0300
Subject: [PATCH 37/49] Apply suggestions from code review

Co-authored-by: Nick Tishkevich <Nikolai.Tishkevich@artezio.com>
---
 src/content/learn/conditional-rendering.md | 74 +++++++++++-----------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index b5c5c2857..dd4d3fb19 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -12,13 +12,13 @@ title: Условный рендеринг
 
 - Как вернуть разный JSX, в зависимости от условия.
 - Как в зависимости от условий добавить или убрать часть JSX.
-- Часто встречающиеся конструкции, которые вы найдете в проектах на React.
+- Часто встречающиеся сокращения синтаксиса условных выражений, с которыми вы столкнётесь в проектах на React.
 
 </YouWillLearn>
 
 ## Условно возвращаемый JSX {/*conditionally-returning-jsx*/}
 
-Допустим, у вас есть компонент `PackingList`, который рендерит несколько компонентов `Item`, они могут быть обозначены, как упакованные или нет:
+Допустим, у вас есть компонент `PackingList`, который рендерит несколько компонентов `Item`, который могут быть отмечены как упакованные или нет:
 
 <Sandpack>
 
@@ -52,7 +52,7 @@ export default function PackingList() {
 </Sandpack>
                   
 
-Обратите внимание, что некоторые компоненты `Item` имеют свойство `isPacked`, со значением `true` вместо `false`. Допустим, вы хотите добавить (✔) к упакованным вещам, если if `isPacked={true}`.
+Обратите внимание, что у некоторых компонентов `Item` установлено свойство `isPacked` в значение `true`, вместо значения `false`. Если `isPacked={true}`, вы хотите добавить галочку(✔) к упакованным вещам.
 
 Можно реализовать это с помощью [управляющей конструкции `if`/`else`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...) таким образом:
 
@@ -63,7 +63,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-Если `isPacked` проп — это `true`, то этот код **вернёт другое JSX дерево.** Вместе с этим изменением, некоторые вещи получат галочку в конце:
+Если `isPacked` проп равен `true`, то этот код **вернёт другое JSX дерево.** Вместе с этим изменением, некоторые вещи получат галочку в конце:
 
 <Sandpack>
 
@@ -102,7 +102,7 @@ export default function PackingList() {
 
 Попробуйте отредактировать то, что возвращается в обоих случаях, и посмотрите, как изменится результат!
 
-Обратите внимание, как вы создаете разветвленную логику с помощью операторов JavaScript `if` и `return`. В React поток управления (как и условия) обрабатывается JavaScript.
+Обратите внимание, как вы создаёте разветвлённую логику с помощью операторов JavaScript `if` и `return`. В React управление потоком выполнения (например, условия) обрабатывает JavaScript.
 
 ### Условно возвращаем ничего, с помощью `null` {/*conditionally-returning-nothing-with-null*/}
 
@@ -115,7 +115,7 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-Если `isPacked` true, то компонент не вернет ничего, `null`. В противном случае он вернет JSX для рендеринга.
+Если `isPacked` равен true, то компонент не вернёт ничего, `null`. В противном случае, он вернёт JSX для рендеринга.
 
 <Sandpack>
 
@@ -152,7 +152,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-На практике возврат `null` из компонента не является обычным делом, поскольку это может удивить разработчика, пытающегося его зарендерить. Чаще всего вы условно включаете или исключаете компонент JSX из родительского компонента. Вот как это сделать!
+На практике возврат `null` из компонента не является обычным делом, поскольку это может удивить разработчика, пытающегося его рендерить. Чаще всего вы будете условно включать или исключать компонент в JSX родительского компонента. Вот как это сделать!
 
 ## Условное включение JSX {/*conditionally-including-jsx*/}
 
@@ -168,7 +168,7 @@ export default function PackingList() {
 <li className="item">{name}</li>
 ```
 
-Обе условные ветви возвращают `<li className="item">...</li>`:
+Обе ветки условия возвращают `<li className="item">...</li>`:
 
 ```js
 if (isPacked) {
@@ -177,11 +177,11 @@ if (isPacked) {
 return <li className="item">{name}</li>;
 ```
 
-Хоть и такое дублирование не вредно, но оно может усложнить поддержание вашего кода. Что если вы захотите изменить `className`? Вам придется делать это в двух местах вашего кода! В такой ситуации вы можете условно включить небольшой JSX, чтобы сделать ваш код более [DRY.](https://ru.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself).
+Хоть и такое дублирование не вредно, но оно может усложнить поддержку вашего кода. Что если вы захотите изменить `className`? Вам придётся делать это в двух местах вашего кода! В такой ситуации вы можете условно включить небольшой JSX, чтобы сделать ваш код более [DRY.](https://ru.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself).
 
 ### Условный (тернанрый) оператор (`? :`) {/*conditional-ternary-operator--*/}
 
-В JavaScript есть компактный синтаксис для написания условного выражения — [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) или "тернарный оператор".
+В JavaScript есть компактный синтаксис для записи условного выражения — [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) или "тернарный оператор".
 
 Вместо этого:
 
@@ -202,13 +202,13 @@ return (
 );
 ```
 
-Вы можете читать это как *"if `isPacked` это true, тогда (`?`) рендерим `name + ' ✔'`, в противном случае (`:`) рендерю `name`"*.
+Вы можете читать это как *"if `isPacked` равно true, тогда (`?`) рендерим `name + ' ✔'`, в противном случае (`:`) рендерим `name`"*.
 
 <DeepDive>
 
 #### Являются ли эти два примера полностью эквивалентными? {/*are-these-two-examples-fully-equivalent*/}
 
-Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера мало чем отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `<li>`. Но элементы JSX не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными узлами DOM. Это легкие описания, как чертежи. Так что эти два примера, на самом деле, *совершенно эквивалентны*. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает.
+Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера немного отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `<li>`. Но JSX-элементы не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными DOM-узлами . Это лёгкие описания, как чертежи. На самом деле эти два примера *совершенно эквивалентны*. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает.
 
 </DeepDive>
 
@@ -256,9 +256,9 @@ export default function PackingList() {
 
 </Sandpack>
 
-Этот стиль хорошо работает для простых условий, но используйте его в меру. Если ваши компоненты становятся беспорядочными из-за слишком большого количества вложенной условной разметки, подумайте об извлечении дочерних компонентов, чтобы навести порядок. В React разметка является частью кода, поэтому вы можете использовать такие инструменты, как переменные и функции, чтобы привести в порядок сложные выражения.
+Этот стиль хорошо работает для простых условий, но используйте его в меру. Если ваши компоненты становятся запутанными из-за слишком большого количества вложенной условной разметки, подумайте об выделении дочерних компонентов, чтобы навести порядок. В React разметка является частью кода, поэтому вы можете использовать такие инструменты, как переменные и функции, чтобы привести в порядок сложные выражения.
 
-### Логичксий И оператор (`&&`) {/*logical-and-operator-*/}
+### Логический оператор И(`&&`) {/*logical-and-operator-*/}
 
 Еще одно часто встречающееся сокращение [JavaScript логический И (`&&`) оператор.](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) Внутри React компонентов, часто случается так, что тебе нужно зарендерить JSX, когда условие true, **или не рендерить ничего.** С `&&`, вы можете исходя из условия зарендерить галочку, if `isPacked` это `true`:
 
@@ -270,7 +270,7 @@ return (
 );
 ```
 
-Вы можете читать это как *"if `isPacked`, тогда (`&&`) рендерим галочку, в противном случае, мы не рендерим ничего"*.
+Вы можете читать это как *"если `isPacked`, тогда (`&&`) рендерим галочку, в противном случае -- ничего не рендерим"*.
 
 Вот это в действии:
 
@@ -310,30 +310,30 @@ export default function PackingList() {
 
 </Sandpack>
 
-[JavaScript && выражение](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение его правой стороны (в нашем случае это галочка) на левой стороне (наше условие) это `true`. Но если наше условие — `false`, тогда всё выражение становится `false`. React думает о `false` как о "дыре" внутри JSX дерева, прямо как о `null` или `undefined`, и React не рендерит ничего на этом месте.
+[JavaScript выражение &&](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) возвращает значение правой части (в нашем случае это галочка), если левая часть (наше условие) является `true`. Но если наше условие — `false`, тогда всё выражение становится `false`. React рассматривает `false` как "пустое место" в дереве JSX, прямо как `null` или `undefined`, и ничего не рендерит на этом месте.
 
 
 <Pitfall>
 
 **Не ставь числа по левую сторону `&&`.**
 
-Чтобы проверить условие, JavaScript автоматически преобразует левую часть в булевое значение (true/false). Однако если левая часть равна `0`, то все выражение получает это значение (`0`), и React с радостью зарендерит `0`, а не ничего.
+Для проверки условия JavaScript автоматически преобразует левую часть в булевое значение. Однако, если левая часть равна `0`, то всё выражение получает это значение (`0`), и React будет с радостью рендерить `0` вместо ничего.
 
-Например, распространенной ошибкой является написание кода типа `messageCount && <p>New messages</p>`. Легко предположить, что он ничего не рендерит, когда `messageCount` равно `0`, но на самом деле он зарендерит `0`!
+Например, распространённой ошибкой является написание кода вида `messageCount && <p>Новые сообщения</p>`. Легко предположить, что ничего не отрендерено, когда `messageCount` равно `0`, но на самом деле будет рендериться `0`!
 
-Чтобы исправить это, сделайте левую часть булевым значением (true/false): `messageCount > 0 && <p>New messages</p>`.
+Чтобы исправить это, сделайте левую часть булевым значением: `messageCount > 0 && <p>Новые сообщения</p>`.
 
 </Pitfall>
 
 ### Условное присвоение JSX к переменной {/*conditionally-assigning-jsx-to-a-variable*/}
 
-Когда сокращения встревают на пути к написанию понятного кода, то попробуйте использовать `if` оператор и переменную. Вы можете изменить переменные, написанные с помощью [`let`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let), поэтому начните с предоставления содержимого по умолчанию, которое вы хотите отобразить, name:
+Когда сокращения мешают написанию понятного кода, то попробуйте использовать `if` оператор и переменную. Вы можете переназначать переменные, объявленные с помощью [`let`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let), поэтому начните с предоставления содержимого по умолчанию, которое вы хотите отобразить, например, name:
 
 ```js
 let itemContent = name;
 ```
 
-Используйте `if` оператор чтобы переназначить JSX выражение `itemContent` если `isPacked` это `true`:
+Используйте `if` оператор, чтобы переназначить JSX-выражение `itemContent`, если `isPacked` равно `true`:
 
 ```js
 if (isPacked) {
@@ -437,16 +437,16 @@ export default function PackingList() {
 
 </Sandpack>
 
-Если вы не знакомы с JavaScript, то такое разнообразие стилей может показаться поначалу ошеломляющим. Однако их изучение поможет вам читать и писать любой код JavaScript — и не только компоненты React! Выберите для начала тот, который вам больше нравится, а затем снова обратитесь к этому справочнику, если вы забудете, как работают другие.
+Если вы не знакомы с JavaScript, то такое разнообразие стилей может показаться поначалу ошеломляющим. Однако их изучение поможет вам читать и писать любой JavaScript код, а не только React-компоненты! Выберите тот, который вам больше нравится, и при необходимости обратитесь к этому справочнику, если вы забудете, как работают другие.
 
 <Recap>
 
 - В React вы управляете логикой ветвления с помощью JavaScript.
-- Вы можете возвращать выражение JSX условно с помощью оператора `if`.
-- Вы можете условно сохранить логику JSX в переменную, а затем включить её в другие JSX с помощью фигурных скобок.
-- В JSX, `{cond ? <A /> : <B />}` означает *"if `cond`, рендери `<A />`, в противном случае `<B />`"*.
-- В JSX, `{cond && <A />}` означает *"if `cond`, рендери `<A />`, иначе ничего"*.
-- Эти сокращения являются общепринятыми, но вы не обязаны их использовать, если предпочитаете простые выражения. `if`.
+- Вы можете условно возвращать JSX-выражение с помощью оператора `if`.
+- Вы можете условно сохранить JSX в переменную и затем включить её в другой JSX с помощью фигурных скобок.
+- В JSX выражение `{cond ? <A /> : <B />}` означает *"если `cond`, то отрендерить `<A />`, иначе `<B />`"*.
+- В JSX выражение `{cond && <A />}` означает *"если `cond`, то отрендерить`<A />`, иначе ничего"*.
+- Эти сокращения являются общепринятыми, но эти сокращения необязательно использовать, если вы предпочитаете простой `if`.
 
 </Recap>
 
@@ -454,9 +454,9 @@ export default function PackingList() {
 
 <Challenges>
 
-#### Покажи иконку для неупакованных вещей с `? :` {/*show-an-icon-for-incomplete-items-with--*/}
+#### Показать иконку для неупакованных вещей с `? :` {/*show-an-icon-for-incomplete-items-with--*/}
 
-Используй тернарный оператор (`cond ? a : b`) чтобы зарендерить ❌ if `isPacked` не равен `true`.
+Используйте тернарный оператор (`cond ? a : b`), чтобы отрендерить❌, если `isPacked` не равен `true`.
 
 <Sandpack>
 
@@ -534,7 +534,7 @@ export default function PackingList() {
 
 </Solution>
 
-#### Покажи важность вещи с помощью `&&` {/*show-the-item-importance-with-*/}
+#### Показать важность вещи с помощью `&&` {/*show-the-item-importance-with-*/}
 
 В этом примере каждый `Item` получает числовой `importance` проп. Используй `&&` чтобы зарендерить "_(Важность: X)_" в italics стиле, но только для вещей важность которых больше 0. Ваш конечный резульат должен выглядеть вот так вот:
 
@@ -624,15 +624,15 @@ export default function PackingList() {
 
 </Sandpack>
 
-Помните, что вы должны писать `importance > 0 && ...` а не `importance && ...` и если `importance` это `0`, то `0` не зарендерится как результат!
+Помните, что вы должны писать `importance > 0 && ...` вместо `importance && ...`, чтобы при `importance` равном `0` число `0` не рендерилось в результате!
 
-В этом решении, два раздельных условия были использованы, чтобы вставить пробел между именем и меткой важности. В качестве альтернативы можно использовать фрагмент с ведущим пробелом: `importance > 0 && <> <i>...</i></>` или добавить пробел сразу внутри тега `<i>`: `importance > 0 && <i> ...</i>`.
+В этом решении используются два отдельных условия для вставки пробела между именем и меткой важности. Кроме того, можно использовать фрагмент с ведущим пробелом: `importance > 0 && <> <i>...</i></>` или добавить пробел сразу внутри тега `<i>`: `importance > 0 && <i> ...</i>`.
 
 </Solution>
 
-#### Перепешите тернарный оператор `? :` на `if` с переменной {/*refactor-a-series-of---to-if-and-variables*/}
+#### Перепишите тернарный оператор `? :` на `if` и переменные {/*refactor-a-series-of---to-if-and-variables*/}
 
-Этот `Drink` компонент использует серию `? :` условий, чтобы показать разную информацию, которая зависит от `name` пропа, который `"tea"` или `"coffee"`. Проблема в том, что информация о каждом напитке распределена по нескольким условиям. Перепешите этот код так, чтобы использовать одно `if` условие вместо трёх `? :` условий.
+Компонент `Drink` использует серию условий `? :` для отображения разной информацию в зависимости от пропа `name` (может быть `"tea"` или `"coffee"`). Проблема заключается в том, что информация о каждом напитке разбросана по нескольким условиям. Перепишите этот код так, используя один `if` вместо трёх условий `? :`.
 
 <Sandpack>
 
@@ -665,7 +665,7 @@ export default function DrinkList() {
 
 </Sandpack>
 
-После рефакторинга кода с использованием `if` у вас есть идеи, как его упростить?
+После рефакторинга кода с использованием `if`, у вас есть ещё идеи о том, как упростить его?
 
 <Solution>
 
@@ -712,9 +712,9 @@ export default function DrinkList() {
 
 </Sandpack>
 
-Здесь информация о каждом напитке сгруппирована вместе, а не распределена по нескольким условиям. Это облегчает добавление новых напитков в будущем.
+Здесь информация о каждом напитке сгруппирована вместе, а не разбросана по нескольким условиям. Это облегчает добавление новых напитков в будущем.
 
-Другим решением может быть полное удаление условий путем перемещения информации в объекты:
+Другим решением будет удалить условия, переместив информацию в объекты:
 
 <Sandpack>
 

From 5418784c9a3f9d81b6e5c7f094464e0e667c2658 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Mon, 22 May 2023 23:49:00 +0300
Subject: [PATCH 38/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 44 +++++++++++-----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index dd4d3fb19..721f8ef5d 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -265,7 +265,7 @@ export default function PackingList() {
 ```js
 return (
   <li className="item">
-    {name} {isPacked && "✔"}
+    {name} {isPacked && '✔'}
   </li>
 );
 ```
@@ -280,7 +280,7 @@ return (
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked && "✔"}
+      {name} {isPacked && '✔'}
     </li>
   );
 }
@@ -337,7 +337,7 @@ let itemContent = name;
 
 ```js
 if (isPacked) {
-  itemContent = name + " ✔";
+  itemContent = name + ' ✔';
 }
 ```
 
@@ -357,7 +357,7 @@ if (isPacked) {
 function Item({ name, isPacked }) {
   let itemContent = name;
   if (isPacked) {
-    itemContent = name + " ✔";
+    itemContent = name + ' ✔';
   }
   return (
     <li className="item">
@@ -464,7 +464,7 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked && "✔"}
+      {name} {isPacked && '✔'}
     </li>
   );
 }
@@ -502,7 +502,7 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
   return (
     <li className="item">
-      {name} {isPacked ? "✔" : "❌"}
+      {name} {isPacked ? '✔' : '❌'}
     </li>
   );
 }
@@ -643,11 +643,11 @@ function Drink({ name }) {
       <h1>{name}</h1>
       <dl>
         <dt>Часть растения</dt>
-        <dd>{name === "tea" ? "leaf" : "bean"}</dd>
+        <dd>{name === 'tea' ? 'leaf' : 'bean'}</dd>
         <dt>Содержание кофеина</dt>
-        <dd>{name === "tea" ? "15–70 мг/чашка" : "80–185 мг/чашка"}</dd>
+        <dd>{name === 'tea' ? '15–70 мг/чашка' : '80–185 мг/чашка'}</dd>
         <dt>Возраст</dt>
-        <dd>{name === "tea" ? "4,000+ лет" : "1,000+ лет"}</dd>
+        <dd>{name === 'tea' ? '4,000+ лет' : '1,000+ лет'}</dd>
       </dl>
     </section>
   );
@@ -676,14 +676,14 @@ export default function DrinkList() {
 ```js
 function Drink({ name }) {
   let part, caffeine, age;
-  if (name === "tea") {
-    part = "leaf";
-    caffeine = "15–70 мг/чашка";
-    age = "4,000+ лет";
-  } else if (name === "coffee") {
-    part = "bean";
-    caffeine = "80–185 мг/чашка";
-    age = "1,000+ лет";
+  if (name === 'tea') {
+    part = 'leaf';
+    caffeine = '15–70 мг/чашка';
+    age = '4,000+ лет';
+  } else if (name === 'coffee') {
+    part = 'bean';
+    caffeine = '80–185 мг/чашка';
+    age = '1,000+ лет';
   }
   return (
     <section>
@@ -721,14 +721,14 @@ export default function DrinkList() {
 ```js
 const drinks = {
   tea: {
-    part: "leaf",
-    caffeine: "15–70 мг/чашка",
+    part: 'leaf',
+    caffeine: '15–70 мг/чашка',
     age: "4,000+ лет",
   },
   coffee: {
-    part: "bean",
-    caffeine: "80–185 мг/чашка",
-    age: "1,000+ лет",
+    part: 'bean',
+    caffeine: '80–185 мг/чашка',
+    age: '1,000+ лет',
   },
 };
 

From b6a4b366fd2e67d12911cebf9f8dca3585b3ef91 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Mon, 22 May 2023 23:49:45 +0300
Subject: [PATCH 39/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Nick Tishkevich <Nikolai.Tishkevich@artezio.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 721f8ef5d..ecae73e38 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -206,7 +206,7 @@ return (
 
 <DeepDive>
 
-#### Являются ли эти два примера полностью эквивалентными? {/*are-these-two-examples-fully-equivalent*/}
+#### Эти два примера полностью эквивалентны? {/*are-these-two-examples-fully-equivalent*/}
 
 Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера немного отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `<li>`. Но JSX-элементы не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными DOM-узлами . Это лёгкие описания, как чертежи. На самом деле эти два примера *совершенно эквивалентны*. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает.
 

From 75e6c33b0612317f924ebab6e6eddf3b9879202e Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 23 May 2023 00:00:13 +0300
Subject: [PATCH 40/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Nick Tishkevich <Nikolai.Tishkevich@artezio.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index ecae73e38..c9a8c7314 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -260,7 +260,7 @@ export default function PackingList() {
 
 ### Логический оператор И(`&&`) {/*logical-and-operator-*/}
 
-Еще одно часто встречающееся сокращение [JavaScript логический И (`&&`) оператор.](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) Внутри React компонентов, часто случается так, что тебе нужно зарендерить JSX, когда условие true, **или не рендерить ничего.** С `&&`, вы можете исходя из условия зарендерить галочку, if `isPacked` это `true`:
+Еще одно часто встречающееся сокращение [JavaScript логический оператор И (`&&`).](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Logical_AND) Внутри React-компонентов он часто используется, когда вам нужно отрендерить JSX, когда условие true, **или не рендерить ничего.** С помощью `&&` вы можете условно рендерить галочку, если `isPacked` равно `true`:
 
 ```js
 return (

From f17b43477492006d92618117c8e37f091fca592c Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 23 May 2023 00:00:43 +0300
Subject: [PATCH 41/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Nick Tishkevich <Nikolai.Tishkevich@artezio.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index c9a8c7314..34ab01058 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -212,7 +212,7 @@ return (
 
 </DeepDive>
 
-Теперь предположим, что вы хотите обернуть текст завершенного элемента в другой HTML тег, например `<del>`, чтобы вычеркнуть его. Вы можете добавить еще больше новых линий и круглых скобок, чтобы было проще вложить больше JSX в каждом из случаев:
+Теперь предположим, что вы хотите обернуть текст завершённого элемента в другой HTML-тег, например `<del>`, чтобы вычеркнуть его. Вы можете добавить ещё больше переносов строк и круглых скобок, чтобы было проще вкладывать JSX в каждом из случаев:
 
 <Sandpack>
 

From a575a4f6df95ce20348a76c6dba078dbca295c6b Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 23 May 2023 00:02:06 +0300
Subject: [PATCH 42/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 34ab01058..ed1ba0902 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -399,13 +399,13 @@ export default function PackingList() {
 function Item({ name, isPacked }) {
   let itemContent = name;
   if (isPacked) {
-     itemContent = (
+    itemContent = (
       <del>
         {name + " ✔"}
       </del>
     );
   }
-   return (
+  return (
     <li className="item">
       {itemContent}
     </li>

From 6aff9705d737b0bc3fa1fbdaac3ccf7d04c37c90 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 23 May 2023 00:03:32 +0300
Subject: [PATCH 43/49] Update conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index ed1ba0902..5d125dbeb 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -723,7 +723,7 @@ const drinks = {
   tea: {
     part: 'leaf',
     caffeine: '15–70 мг/чашка',
-    age: "4,000+ лет",
+    age: '4,000+ лет',
   },
   coffee: {
     part: 'bean',

From 83dc552df373a047433c0f4a0555ff3a8fe7ace1 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 23 May 2023 00:04:35 +0300
Subject: [PATCH 44/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Nick Tishkevich <Nikolai.Tishkevich@artezio.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 5d125dbeb..7c41865de 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -536,7 +536,7 @@ export default function PackingList() {
 
 #### Показать важность вещи с помощью `&&` {/*show-the-item-importance-with-*/}
 
-В этом примере каждый `Item` получает числовой `importance` проп. Используй `&&` чтобы зарендерить "_(Важность: X)_" в italics стиле, но только для вещей важность которых больше 0. Ваш конечный резульат должен выглядеть вот так вот:
+В этом примере каждый `Item` получает числовой проп `importance`. Используйте `&&`, чтобы рендерить "_(Важность: X)_" курсивом только для вещей с ненулевой важностью. Ваш список вещей должен выглядеть следующем образом:
 
 - Космический скафандр _(Важность: 9)_
 - Шлем с золотым листом

From fdd81c3aa8da450c840cbbc6f0bf74b3fbf2cdd1 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 23 May 2023 00:06:12 +0300
Subject: [PATCH 45/49] Update src/content/learn/conditional-rendering.md

---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 7c41865de..a1176ac14 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -16,7 +16,7 @@ title: Условный рендеринг
 
 </YouWillLearn>
 
-## Условно возвращаемый JSX {/*conditionally-returning-jsx*/}
+## Условный возврат JSX {/*conditionally-returning-jsx*/}
 
 Допустим, у вас есть компонент `PackingList`, который рендерит несколько компонентов `Item`, который могут быть отмечены как упакованные или нет:
 

From 414416ecb1bbf977ad39227d52734e7a643fb344 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 23 May 2023 11:43:37 +0300
Subject: [PATCH 46/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Nick Tishkevich <Nikolai.Tishkevich@artezio.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index a1176ac14..5f3c0f254 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -52,7 +52,7 @@ export default function PackingList() {
 </Sandpack>
                   
 
-Обратите внимание, что у некоторых компонентов `Item` установлено свойство `isPacked` в значение `true`, вместо значения `false`. Если `isPacked={true}`, вы хотите добавить галочку(✔) к упакованным вещам.
+Обратите внимание, что у некоторых компонентов `Item` проп `isPacked` имеет значение `true`, вместо значения `false`. Если `isPacked={true}`, вы хотите добавить галочку(✔) к упакованным вещам.
 
 Можно реализовать это с помощью [управляющей конструкции `if`/`else`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...) таким образом:
 

From b5a8bb3aef116e9feccdcfa67b9b4720993f34d5 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 23 May 2023 11:43:45 +0300
Subject: [PATCH 47/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Nick Tishkevich <Nikolai.Tishkevich@artezio.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 5f3c0f254..a055ffd84 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -202,7 +202,7 @@ return (
 );
 ```
 
-Вы можете читать это как *"if `isPacked` равно true, тогда (`?`) рендерим `name + ' ✔'`, в противном случае (`:`) рендерим `name`"*.
+Вы можете читать это как *"если `isPacked` равно true, тогда (`?`) рендерим `name + ' ✔'`, в противном случае (`:`) рендерим `name`"*.
 
 <DeepDive>
 

From 7e276b440569654883d8ec80e8d667b232fea4ba Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 23 May 2023 11:43:59 +0300
Subject: [PATCH 48/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Nick Tishkevich <Nikolai.Tishkevich@artezio.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index a055ffd84..7042ef3fc 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -341,7 +341,7 @@ if (isPacked) {
 }
 ```
 
-[Фигурные скобки открывают "окно в мир JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Вставьте переменную с фигурными скобками в возвращаемое дерево JSX, вложив ранее вычисленное выражение внутрь JSX:
+[Фигурные скобки открывают "окно в мир JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Вставьте переменную с помощью фигурных скобок в возвращаемое дерево JSX, вложив ранее вычисленное выражение внутрь JSX:
 
 ```js
 <li className="item">

From 86b645f5d899579ebb1b978e483da84ce08e1671 Mon Sep 17 00:00:00 2001
From: qq <79323963+rainyEra@users.noreply.github.com>
Date: Tue, 23 May 2023 11:44:10 +0300
Subject: [PATCH 49/49] Update src/content/learn/conditional-rendering.md

Co-authored-by: Nick Tishkevich <Nikolai.Tishkevich@artezio.com>
---
 src/content/learn/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 7042ef3fc..8a5368809 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -208,7 +208,7 @@ return (
 
 #### Эти два примера полностью эквивалентны? {/*are-these-two-examples-fully-equivalent*/}
 
-Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера немного отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `<li>`. Но JSX-элементы не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными DOM-узлами . Это лёгкие описания, как чертежи. На самом деле эти два примера *совершенно эквивалентны*. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает.
+Если вы знакомы с объектно-ориентированным программированием, вы можете предположить, что два приведенных выше примера немного отличаются друг от друга, поскольку один из них может создавать два разных "экземпляра" `<li>`. Но JSX-элементы не являются "экземплярами", потому что они не хранят никакого внутреннего состояния и не являются реальными DOM-узлами. Это лёгкие описания, как чертежи. На самом деле эти два примера *совершенно эквивалентны*. В [Сохранение и сброс состояния](/learn/preserving-and-resetting-state) подробно рассказывается о том, как это работает.
 
 </DeepDive>