From 9ce4afead624114d5f831c70ea31c14feb5965ce Mon Sep 17 00:00:00 2001 From: Daniel Lo Nigro Date: Tue, 19 Dec 2023 17:23:51 -0800 Subject: [PATCH 1/4] Improve documentation for __html (#6499) --- src/content/reference/react-dom/components/common.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 11719112e..610742735 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -982,6 +982,8 @@ textarea { display: block; margin-top: 5px; margin-bottom: 10px; } +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 `
`. + To see why rendering arbitrary HTML is dangerous, replace the code above with this: ```js {1-4,7,8} From 3bf64e5ffdc1f7793d237a24f051e06986197913 Mon Sep 17 00:00:00 2001 From: Alina Listunova Date: Thu, 21 Dec 2023 02:57:57 +0200 Subject: [PATCH 2/4] Fix diagram alt text in Your UI as a Tree page (#6507) --- src/content/learn/understanding-your-ui-as-a-tree.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index f4528b346..2abf7affc 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -22,7 +22,7 @@ React, and many other UI libraries, model UI as a tree. Thinking of your app as Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy. - + React creates a UI tree from your components. In this example, the UI tree is then used to render to the DOM. From 3009d764ed362ae749c5835cbc38783dd29bfd57 Mon Sep 17 00:00:00 2001 From: Luna Date: Wed, 20 Dec 2023 20:58:16 -0400 Subject: [PATCH 3/4] Fix error throw and for useTransition demo (#6510) --- src/components/MDX/Sandpack/Preview.tsx | 2 +- src/content/reference/react/useTransition.md | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx index 059645550..9669e5f4f 100644 --- a/src/components/MDX/Sandpack/Preview.tsx +++ b/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; } diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 37e89c0c9..49df279fb 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1520,15 +1520,15 @@ import { ErrorBoundary } from "react-error-boundary"; export function AddCommentContainer() { return ( ⚠️Something went wrong

}> - + ); } function addComment(comment) { // For demonstration purposes to show Error Boundary - if(comment == null){ - throw Error('Example error') + if (comment == null) { + throw new Error("Example Error: An error thrown to trigger error boundary"); } } @@ -1544,9 +1544,10 @@ function AddCommentButton() { // so error gets thrown addComment(); }); - }}> - Add comment - + }} + > + Add comment + ); } ``` From bbb08a5a04b0221137e5d60472fc979747af2954 Mon Sep 17 00:00:00 2001 From: Ali Oguzhan Yildiz Date: Thu, 21 Dec 2023 04:02:42 +0300 Subject: [PATCH 4/4] Add Turkish to deployed languages (#6449) --- src/components/Seo.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx index 5af169e13..dfc4f6104 100644 --- a/src/components/Seo.tsx +++ b/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.