Merge branch 'main' into translate-understanding-your-ui-as-a-tree

Author: bkatsevych

src/components/MDX/Sandpack/Preview.tsx

@@ -54,7 +54,7 @@ export function Preview({
 
   // When throwing a new Error in Sandpack - we want to disable the dev error dialog
   // to show the Error Boundary fallback
-  if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
+  if (rawError && rawError.message.includes('Example Error:')) {
     rawError = null;
   }
 

src/components/Seo.tsx

@@ -24,6 +24,7 @@ const deployedTranslations = [
   'es',
   'fr',
   'ja',
+  'tr',
   // We'll add more languages when they have enough content.
   // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
   // It must be the same between all translations.

src/content/learn/understanding-your-ui-as-a-tree.md

@@ -22,7 +22,7 @@ React-застосунок формується великою кількіст
 
 Дерева є моделлю зв'язків між елементами, і UI часто представлений за допомогою деревоподібних структур. Наприклад, браузери використовують деревоподібні структури для моделювання HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) та CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Мобільні платформи також використовують дерева для представлення своєї ієрархії "екранів".
 
-<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Діаграма із трьох секцій, розташованих горизонтально. У першій секції розташовані вертикально три прямокутники з написами 'Component A', 'Component B' та 'Component C'. Перехід до наступної секції здійснюється за допомогою стрілки з логотипом React над нею та підписом 'React'. Середня секція містить дерево компонентів: корінь, підписаний як 'A', і його двоє дітей, підписані як 'B' і 'C'. Перехід до наступної секції також здійснюється за допомогою стрілки з логотипом React над нею та підписом 'React'. Третя і остання секція — це ескіз браузера, що містить дерево з 8 вузлами, в якому виділено кольором лише піддерево (що вказує на піддерево з середнього розділу).">
+<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Діаграма із трьох секцій, розташованих горизонтально. У першій секції розташовані вертикально три прямокутники з написами 'Component A', 'Component B' та 'Component C'. Перехід до наступної секції здійснюється за допомогою стрілки з логотипом React над нею та підписом 'React'. Середня секція містить дерево компонентів: корінь, підписаний як 'A', і його двоє дітей, підписані як 'B' і 'C'. Перехід до наступної секції також здійснюється за допомогою стрілки з логотипом React над нею та підписом 'React DOM'. Третя і остання секція — це ескіз браузера, що містить дерево з 8 вузлами, в якому виділено кольором лише піддерево (що вказує на піддерево з середнього розділу).">
 
 React створює дерево UI із ваших компонентів. У цьому прикладі дерево UI потім використовується для рендерингу у DOM.
 </Diagram>

src/content/reference/react-dom/components/common.md

@@ -982,6 +982,8 @@ textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
 
 </Sandpack>
 
+The `{__html}` object should be created as close to where the HTML is generated as possible, like the above example does in the `renderMarkdownToHTML` function. This ensures that all raw HTML being used in your code is explicitly marked as such, and that only variables that you expect to contain HTML are passed to `dangerouslySetInnerHTML`. It is not recommended to create the object inline like `<div dangerouslySetInnerHTML={{__html: markup}} />`.
+
 To see why rendering arbitrary HTML is dangerous, replace the code above with this:
 
 ```js {1-4,7,8}