From b58736c36520a0843ed479a8c8d8e2d3f99e6bf3 Mon Sep 17 00:00:00 2001 From: Songhn Date: Thu, 25 Nov 2021 00:57:24 +0800 Subject: [PATCH 01/20] [Beta] docs(cn): add writing-markup-with-jsx --- .../pages/learn/writing-markup-with-jsx.md | 138 +++++++++--------- 1 file changed, 69 insertions(+), 69 deletions(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index c663481615..4f514819dc 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -1,60 +1,60 @@ --- -title: Writing Markup with JSX +title: 使用 JSX 书写标记语言 --- - -JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it. + +JSX 是一个 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标记。虽然还有其它方式可以编写组件，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。 -* Why React mixes markup with rendering logic -* How JSX is different from HTML -* How to display information with JSX +* 为什么 React 将标记和渲染逻辑耦合在一起 +* JSX 与 HTML 有什么区别 +* 如何通过 JSX 展示信息 -## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/} +## JSX: 将标记引入 JavaScript -The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript: +网页是构建在 HTML、CSS 和 JavaScript 之上的。多年以来，web 开发者都是将网页内容存放在 HTML 中，样式放在 CSS 中，而逻辑则放在 JavaScript 中 —— 通常是在不同的文件中！页面的内容通过标记语言描述并存放在 HTML 文件中，而逻辑则单独存放在 JavaScript 文件中。 ![HTML and JavaScript living in separate files](/images/docs/illustrations/i_html_js.svg) -But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components!** +但是随着网页交互复杂度的提升，逻辑愈发决定了内容的展示。 JavaScript 开始主导 HTML 显示的内容！这就是为什么 **在 React 中渲染逻辑和标记存放在一个相同的地方 —— 组件！** ![JavaScript functions sprinkled with markup](/images/docs/illustrations/i_jsx.svg) -Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own. +将一个按钮的渲染逻辑和标记放在一起可以确保它们在每次编辑时都能保持互相同步。反之，与按钮无关的细节是互相隔离的，例如按钮的标记和侧边栏的标记。这使得修改其中一个组件变得更安全。 -Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup. +每个 React 组件都是一个 JavaScript 函数，它会返回一些标记，React 会将这些标记渲染到浏览器上。React 组件使用一种被称为 JSX 的语法扩展来描述这些标记。JSX 看起来和 HTML 很像，但它的语法更加严格并且可以动态展示信息。了解这些区别最好的方式就是将一些 HTML 标记转化为 JSX 标记。 -[JSX and React are two separate things](/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) you _can_ use independently of each other. +[JSX and React 是相互独立的](/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) 你 _可以_ 单独使用它们中的任意一个。 -## Converting HTML to JSX {/*converting-html-to-jsx*/} +## 将 HTML 转化为 JSX -Suppose that you have some (perfectly valid) HTML: +假设你现在有一些（完全有效的）HTML 标记： ```html -

Hedy Lamarr's Todos

+

海蒂·拉玛的代办事项

Hedy Lamarr ``` -And you want to put it into your component: +而现在想要把这些标记迁移到组件中： ```js export default function TodoList() { @@ -64,7 +64,7 @@ export default function TodoList() { } ``` -If you copy and paste it as is, it will not work: +如果直接复制到组件中，并不能正常工作： @@ -72,17 +72,17 @@ If you copy and paste it as is, it will not work: ```js export default function TodoList() { return ( - // This doesn't quite work! -

Hedy Lamarr's Todos

+ // 这不起作用！ +

海蒂·拉玛的代办事项

Hedy Lamarr ); } @@ -94,25 +94,25 @@ img { height: 90px } -This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below. +这是因为 JSX 语法更加严格并且相比 HTML 有更多的规则！上面的错误提示可以帮助你修复标记中的错误，当然也可以参考下面的指引。 -Most of the times, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck! +大部分情况下，React 在屏幕上显示的错误提示就能帮你找到问题所在，如果在编写过程中遇到问题就参考一下提示吧。 -## The Rules of JSX {/*the-rules-of-jsx*/} +## JSX 规则 -### 1. Return a single root element {/*1-return-a-single-root-element*/} +### 1. 只能返回一个根元素 -To return multiple elements from a component, **wrap them with a single parent tag**. +如果想要在一个组件中包含多个元素，**需要用一个父标签把它们包裹起来**. -For example, you can use a `
`: +例如，你可以使用一个 `
` 标签： ```js {1,11}
-

Hedy Lamarr's Todos

+

海蒂·拉玛的代办事项

Hedy Lamarr`: ``` -If you don't want to add an extra `
` to your markup, you can write `<>` and `` instead: +如果你不想在标记中增加一个额外的 `
`，可以用 `<>` 和 `` 元素来代替： ```js {1,11} <> -

Hedy Lamarr's Todos

+

海蒂·拉玛的代办事项

Hedy Lamarr` to your markup, you can write `<>` and ``` -This empty tag is called a *[React fragment](TODO)*. React fragments let you group things without leaving any trace in the browser HTML tree. +这个空标签被称作 *[React fragment](TODO)*. React fragments 允许你将子元素分组，而无需向 DOM 添加额外节点。 - + -JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a fragment. +JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 fragment 来包裹。 -### 2. Close all the tags {/*2-close-all-the-tags*/} +### 2. 标签必须闭合 -JSX requires tags to be explicitly closed: self-closing tags like `` must become ``, and wrapping tags like `
  • oranges` must be written as `
  • oranges
    • `. +JSX 要求标签必须正确闭合。像 `` 这样的自闭合标签必须书写成 ``，而像 `
  • oranges` 这样只有开始标签的元素必须带有闭合标签，需要改为 `
  • oranges
    • `。 -This is how Hedy Lamarr's image and list items look closed: +海蒂·拉玛的照片和代办事项的标记经修改后变为： ```js {2-6,8-10} <> @@ -163,18 +163,18 @@ This is how Hedy Lamarr's image and list items look closed: class="photo" />
      -
    • Invent new traffic lights
      • -
    • Rehearse a movie scene
      • -
    • Improve the spectrum technology
      • +
    • 发明一种新式交通信号灯
      • +
    • 排练一个电影场景
      • +
    • 改进频谱技术
    ``` -### 3. camelCase all most of the things! {/*3-camelcase-salls-most-of-the-things*/} +### 3. 使用驼峰式命名 所有 大部分属性！ -JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`. +JSX 最终被转化为 JavaScript，而 JSX 中的属性也会变为 JavaScript 对象中的键值对。在你自己的组件中，经常会有场景需要用变量的方式读取这些属性。但 JavaScript 对变量的命名有限制。例如，变量名称不能包含 `-` 符号或者像 `class` 这样的保留字。 -This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): +这就是为什么在 React 中，大部分 HTML 和 SVG 属性都用驼峰式表示。例如，需要用 `strokeWidth` 代替 `stroke-width`。由于 `class` 是一个保留字，所以在 React 中需要用 `className` 来代替。这也是 [DOM 属性中的命名](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): ```js {4} ``` -You can [find all these attributes in the React DOM Elements](TODO). If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console](https://developer.mozilla.org/docs/Tools/Browser_Console). +你可以 [在 React DOM 元素中找到所有对应的属性](TODO)。如果你在编写属性时发生了错误，不用担心 —— React 会在 [浏览器控制台](https://developer.mozilla.org/docs/Tools/Browser_Console) 中打印一条可能的更正信息。 -For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes. +由于历史原因，[`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) 和 [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) 属性是以带 `-` 符号的 HTML 格式书写的。 -### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/} +### 高级提示：使用 JSX 转化器 -Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own. +将现有的 HMTL 中的所有属性转化 JSX 的格式是很繁琐的。我们建议使用 [转化器](https://transform.tools/html-to-jsx) 将 HTML 和 SVG 标记转化为 JSX。这种转化器在实践中非常有用。但我们依然有必要去了解这种转化过程中发生了什么，这样你就可以编写自己的 JSX 了。 -Here is your final result: +这是最终的结果： @@ -204,16 +204,16 @@ Here is your final result: export default function TodoList() { return ( <> -

    Hedy Lamarr's Todos

    +

    海蒂·拉玛的代办事项

    Hedy Lamarr
      -
    • Invent new traffic lights
      • -
    • Rehearse a movie scene
      • -
    • Improve the spectrum technology
      • +
    • 发明一种新式交通信号灯
      • +
    • 排练一个电影场景
      • +
    • 改进频谱技术
    ); @@ -228,11 +228,11 @@ img { height: 90px } -Now you know why JSX exists and how to use it in components: +现在你知道了为什么我们需要 JSX 以及如何在组件中使用它： -* React components group rendering logic together with markup because they are related. -* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to. -* Error messages will often point you in the right direction to fixing your markup. +* 由于渲染逻辑和标记是紧密相关的，所以 React 将它们存放在一个组件中。 +* JSX 类似 HTML，不过有一些区别。如果需要的话可以使用 [转化器](https://transform.tools/html-to-jsx) 将不同标记互相转化。 +* 错误提示通常会指引你将标记修改为正确的格式。 @@ -240,9 +240,9 @@ Now you know why JSX exists and how to use it in components: -### Convert some HTML to JSX {/*convert-some-html-to-jsx*/} +### 将 HTML 转化为 JSX -This HTML was pasted into a component, but it's not valid JSX. Fix it: +下方的 HTML 是直接被复制到组件中的，所以并不是有效的 JSX，来尝试修复它吧： @@ -250,12 +250,12 @@ This HTML was pasted into a component, but it's not valid JSX. Fix it: export default function Bio() { return (
    -

    Welcome to my website!

    +

    欢迎来到我的站点！

    - You can find my thoughts here. + 你可以在这里了解我的想法。

    - And pictures of scientists! + 还有科学家们的照片！

    ); } @@ -278,7 +278,7 @@ export default function Bio() {     -Whether to do it by hand or using the converter is up to you! +你可以手动转化或者使用转化器。 @@ -289,12 +289,12 @@ export default function Bio() { return (
    -

    Welcome to my website!

    +

    欢迎来到我的站点！

    - You can find my thoughts here. + 你可以在这里了解我的想法。

    - And pictures of scientists! + 还有科学家们的照片！

    ); @@ -320,4 +320,4 @@ export default function Bio() {     -     \ No newline at end of file + From c8f84c94ad77c49ae991632df765c47510cdb15f Mon Sep 17 00:00:00 2001 From: Songhn Date: Mon, 6 Dec 2021 23:43:28 +0800 Subject: [PATCH 02/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: 511 --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 4f514819dc..fd338ca297 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -16,7 +16,7 @@ JSX 是一个 JavaScript 语法扩展，可以让你在 JavaScript 文件中书 -## JSX: 将标记引入 JavaScript +## JSX: 将标记引入 JavaScript {/*jsx-putting-markup-into-javascript*/} 网页是构建在 HTML、CSS 和 JavaScript 之上的。多年以来，web 开发者都是将网页内容存放在 HTML 中，样式放在 CSS 中，而逻辑则放在 JavaScript 中 —— 通常是在不同的文件中！页面的内容通过标记语言描述并存放在 HTML 文件中，而逻辑则单独存放在 JavaScript 文件中。 From 4cc0e10e6c8f75dabbc98e7963569356a434251a Mon Sep 17 00:00:00 2001 From: Songhn Date: Mon, 6 Dec 2021 23:43:40 +0800 Subject: [PATCH 03/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: 511 --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index fd338ca297..d1bdaaf303 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -104,7 +104,7 @@ img { height: 90px } ## JSX 规则 -### 1. 只能返回一个根元素 +### 1. 只能返回一个根元素 {/*1-return-a-single-root-element*/} 如果想要在一个组件中包含多个元素，**需要用一个父标签把它们包裹起来**. From 83f92079f0dc995ec3a2a948dfab700b677a069f Mon Sep 17 00:00:00 2001 From: Songhn Date: Mon, 6 Dec 2021 23:43:49 +0800 Subject: [PATCH 04/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: 511 --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index d1bdaaf303..564e774676 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -36,7 +36,7 @@ JSX 是一个 JavaScript 语法扩展，可以让你在 JavaScript 文件中书 -## 将 HTML 转化为 JSX +## 将 HTML 转化为 JSX {/*converting-html-to-jsx*/} 假设你现在有一些（完全有效的）HTML 标记： From 88a0f0ccab8bdecc412a05df46789411369166d9 Mon Sep 17 00:00:00 2001 From: Songhn Date: Mon, 6 Dec 2021 23:43:57 +0800 Subject: [PATCH 05/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: 511 --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 564e774676..2268086466 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -102,7 +102,7 @@ img { height: 90px } -## JSX 规则 +## JSX 规则 {/*the-rules-of-jsx*/} ### 1. 只能返回一个根元素 {/*1-return-a-single-root-element*/} From 06b685a511d4083b145d046ea74c07a0731e931d Mon Sep 17 00:00:00 2001 From: Songhn Date: Mon, 6 Dec 2021 23:44:04 +0800 Subject: [PATCH 06/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: 511 --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 2268086466..6eabebc07d 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -149,7 +149,7 @@ JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript     -### 2. 标签必须闭合 +### 2. 标签必须闭合 {/*2-close-all-the-tags*/} JSX 要求标签必须正确闭合。像 `` 这样的自闭合标签必须书写成 ``，而像 `
  • oranges` 这样只有开始标签的元素必须带有闭合标签，需要改为 `
  • oranges
    • `。 From 547938134b313412cce2f4e564b5215aa9d02a2c Mon Sep 17 00:00:00 2001 From: Songhn Date: Mon, 6 Dec 2021 23:44:19 +0800 Subject: [PATCH 07/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: 511 --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 6eabebc07d..d57b51bcd0 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -240,7 +240,7 @@ img { height: 90px } -### 将 HTML 转化为 JSX +### 将 HTML 转化为 JSX {/*convert-some-html-to-jsx*/} 下方的 HTML 是直接被复制到组件中的，所以并不是有效的 JSX，来尝试修复它吧： From 29050150637e550c4e16cef2ce1dc73e10899f15 Mon Sep 17 00:00:00 2001 From: Songhn Date: Mon, 6 Dec 2021 23:44:36 +0800 Subject: [PATCH 08/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: 511 --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index d57b51bcd0..ea14a1e12a 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -192,7 +192,7 @@ JSX 最终被转化为 JavaScript，而 JSX 中的属性也会变为 JavaScript -### 高级提示：使用 JSX 转化器 +### 高级提示：使用 JSX 转化器 {/*pro-tip-use-a-jsx-converter*/} 将现有的 HMTL 中的所有属性转化 JSX 的格式是很繁琐的。我们建议使用 [转化器](https://transform.tools/html-to-jsx) 将 HTML 和 SVG 标记转化为 JSX。这种转化器在实践中非常有用。但我们依然有必要去了解这种转化过程中发生了什么，这样你就可以编写自己的 JSX 了。 From 8337bc3605ef3e6c84903815bcf9807f19dc68d0 Mon Sep 17 00:00:00 2001 From: Songhn Date: Mon, 6 Dec 2021 23:48:49 +0800 Subject: [PATCH 09/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: 511 --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index ea14a1e12a..1e1650123b 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -170,7 +170,7 @@ JSX 要求标签必须正确闭合。像 `` 这样的自闭合标签必须 ``` -### 3. 使用驼峰式命名 所有 大部分属性！ +### 3. 使用驼峰式命名法给 所有 大部分属性命名！{/*3-camelcase-salls-most-of-the-things*/} JSX 最终被转化为 JavaScript，而 JSX 中的属性也会变为 JavaScript 对象中的键值对。在你自己的组件中，经常会有场景需要用变量的方式读取这些属性。但 JavaScript 对变量的命名有限制。例如，变量名称不能包含 `-` 符号或者像 `class` 这样的保留字。 From e44657be1d9b9a4ff298c08811440f0acd0c8ea2 Mon Sep 17 00:00:00 2001 From: Songhn Date: Mon, 6 Dec 2021 23:49:58 +0800 Subject: [PATCH 10/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: 511 --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 1e1650123b..9877218d6a 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -26,7 +26,7 @@ JSX 是一个 JavaScript 语法扩展，可以让你在 JavaScript 文件中书 ![JavaScript functions sprinkled with markup](/images/docs/illustrations/i_jsx.svg) -将一个按钮的渲染逻辑和标记放在一起可以确保它们在每次编辑时都能保持互相同步。反之，与按钮无关的细节是互相隔离的，例如按钮的标记和侧边栏的标记。这使得修改其中一个组件变得更安全。 +将一个按钮的渲染逻辑和标记放在一起可以确保它们在每次编辑时都能保持互相同步。反之，彼此无关的细节是互相隔离的，例如按钮的标记和侧边栏的标记。这样我们在修改其中任意一个组件时会更安全。 每个 React 组件都是一个 JavaScript 函数，它会返回一些标记，React 会将这些标记渲染到浏览器上。React 组件使用一种被称为 JSX 的语法扩展来描述这些标记。JSX 看起来和 HTML 很像，但它的语法更加严格并且可以动态展示信息。了解这些区别最好的方式就是将一些 HTML 标记转化为 JSX 标记。 From c3e23bec5dd0a926531d3f4134d54a6185359421 Mon Sep 17 00:00:00 2001 From: Songhn Date: Mon, 6 Dec 2021 23:50:55 +0800 Subject: [PATCH 11/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: 511 --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 9877218d6a..3dc0a8865c 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -141,7 +141,7 @@ img { height: 90px } ``` -这个空标签被称作 *[React fragment](TODO)*. React fragments 允许你将子元素分组，而无需向 DOM 添加额外节点。 +这个空标签被称作 *[React fragment](TODO)*. React fragments 允许你将子元素分组，而不会在 HTML 结构中添加额外节点。 From 5c8a04c3bd489c852f9770ea6653f12b887d2561 Mon Sep 17 00:00:00 2001 From: Songhn Date: Mon, 6 Dec 2021 23:51:18 +0800 Subject: [PATCH 12/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: 511 --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 3dc0a8865c..efba128851 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -174,7 +174,7 @@ JSX 要求标签必须正确闭合。像 `` 这样的自闭合标签必须 JSX 最终被转化为 JavaScript，而 JSX 中的属性也会变为 JavaScript 对象中的键值对。在你自己的组件中，经常会有场景需要用变量的方式读取这些属性。但 JavaScript 对变量的命名有限制。例如，变量名称不能包含 `-` 符号或者像 `class` 这样的保留字。 -这就是为什么在 React 中，大部分 HTML 和 SVG 属性都用驼峰式表示。例如，需要用 `strokeWidth` 代替 `stroke-width`。由于 `class` 是一个保留字，所以在 React 中需要用 `className` 来代替。这也是 [DOM 属性中的命名](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): +这就是为什么在 React 中，大部分 HTML 和 SVG 属性都用驼峰式命名法表示。例如，需要用 `strokeWidth` 代替 `stroke-width`。由于 `class` 是一个保留字，所以在 React 中需要用 `className` 来代替。这也是 [DOM 属性中的命名](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): ```js {4} Date: Mon, 6 Dec 2021 23:51:42 +0800 Subject: [PATCH 13/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: 511 --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index efba128851..3483124856 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -172,7 +172,7 @@ JSX 要求标签必须正确闭合。像 `` 这样的自闭合标签必须 ### 3. 使用驼峰式命名法给 所有 大部分属性命名！{/*3-camelcase-salls-most-of-the-things*/} -JSX 最终被转化为 JavaScript，而 JSX 中的属性也会变为 JavaScript 对象中的键值对。在你自己的组件中，经常会有场景需要用变量的方式读取这些属性。但 JavaScript 对变量的命名有限制。例如，变量名称不能包含 `-` 符号或者像 `class` 这样的保留字。 +JSX 最终会被转化为 JavaScript，而 JSX 中的属性也会变成 JavaScript 对象中的键值对。在你自己的组件中，经常会遇到需要用变量的方式读取这些属性的时候。但 JavaScript 对变量的命名有限制。例如，变量名称不能包含 `-` 符号或者像 `class` 这样的保留字。 这就是为什么在 React 中，大部分 HTML 和 SVG 属性都用驼峰式命名法表示。例如，需要用 `strokeWidth` 代替 `stroke-width`。由于 `class` 是一个保留字，所以在 React 中需要用 `className` 来代替。这也是 [DOM 属性中的命名](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): From 542053cd85353b2eff09a627f13af1dfea748220 Mon Sep 17 00:00:00 2001 From: Songhn Date: Tue, 7 Dec 2021 14:29:06 +0800 Subject: [PATCH 14/20] Update writing-markup-with-jsx.md --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 3483124856..de7de91685 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -231,7 +231,7 @@ img { height: 90px } 现在你知道了为什么我们需要 JSX 以及如何在组件中使用它： * 由于渲染逻辑和标记是紧密相关的，所以 React 将它们存放在一个组件中。 -* JSX 类似 HTML，不过有一些区别。如果需要的话可以使用 [转化器](https://transform.tools/html-to-jsx) 将不同标记互相转化。 +* JSX 类似 HTML，不过有一些区别。如果需要的话可以使用 [转化器](https://transform.tools/html-to-jsx) 将 HTML 转化为 JSX。 * 错误提示通常会指引你将标记修改为正确的格式。 From 66d22e68bf0ff28f93dc2d60bf47fa589df6e572 Mon Sep 17 00:00:00 2001 From: Songhn Date: Tue, 8 Feb 2022 15:32:02 +0800 Subject: [PATCH 15/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: KnowsCount --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index de7de91685..f722beaf85 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -22,7 +22,7 @@ JSX 是一个 JavaScript 语法扩展，可以让你在 JavaScript 文件中书 ![HTML and JavaScript living in separate files](/images/docs/illustrations/i_html_js.svg) -但是随着网页交互复杂度的提升，逻辑愈发决定了内容的展示。 JavaScript 开始主导 HTML 显示的内容！这就是为什么 **在 React 中渲染逻辑和标记存放在一个相同的地方 —— 组件！** +但是随着网页交互复杂度的提升，逻辑愈发决定了内容的展示。JavaScript 开始主导 HTML 显示的内容！这就是为什么 **在 React 中渲染逻辑和标记存放在一个相同的地方 —— 组件！** ![JavaScript functions sprinkled with markup](/images/docs/illustrations/i_jsx.svg) From a558b62eab53243aa294a6eea05ff55a975aa4c4 Mon Sep 17 00:00:00 2001 From: Songhn Date: Tue, 8 Feb 2022 15:32:13 +0800 Subject: [PATCH 16/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: KnowsCount --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index f722beaf85..728e37efca 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -278,7 +278,7 @@ export default function Bio() { -你可以手动转化或者使用转化器。 +你可以随意在手动转化或者使用转化器中选择！ From fbdd32cba15f32b07c1ed41c1ffd8e5f7131ebe2 Mon Sep 17 00:00:00 2001 From: Songhn Date: Tue, 8 Feb 2022 15:32:22 +0800 Subject: [PATCH 17/20] Update beta/src/pages/learn/writing-markup-with-jsx.md Co-authored-by: KnowsCount --- beta/src/pages/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 728e37efca..6f6f4e41b4 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -106,7 +106,7 @@ img { height: 90px } ### 1. 只能返回一个根元素 {/*1-return-a-single-root-element*/} -如果想要在一个组件中包含多个元素，**需要用一个父标签把它们包裹起来**. +如果想要在一个组件中包含多个元素，**需要用一个父标签把它们包裹起来**。 例如，你可以使用一个 `
    ` 标签： From 2d06840d33e23205d392fa8cd421540268d0f91d Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Fri, 27 May 2022 11:31:41 +0800 Subject: [PATCH 18/20] Update beta/src/pages/learn/writing-markup-with-jsx.md --- beta/src/pages/learn/writing-markup-with-jsx.md | 1 - 1 file changed, 1 deletion(-) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 3c9f29a996..52abb7810b 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -3,7 +3,6 @@ title: 使用 JSX 书写标记语言 --- - **JSX** 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标记。虽然还有其它方式可以编写组件，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。 From 9e73dd1c4a8804e5a0663dda739a76a8c9ddc7bc Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Fri, 27 May 2022 11:32:00 +0800 Subject: [PATCH 19/20] Update beta/src/pages/learn/writing-markup-with-jsx.md --- beta/src/pages/learn/writing-markup-with-jsx.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index 52abb7810b..f821899084 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -1,5 +1,10 @@ --- title: 使用 JSX 书写标记语言 +translators: + - songhn233 + - fqd511 + - KnowsCount + - QC-L --- From fb1790596cc06129d98a0e1b0c1d9151029b635f Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Fri, 27 May 2022 11:32:25 +0800 Subject: [PATCH 20/20] Apply suggestions from code review --- beta/src/pages/learn/writing-markup-with-jsx.md | 1 + 1 file changed, 1 insertion(+) diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md index f821899084..cca4bda487 100644 --- a/beta/src/pages/learn/writing-markup-with-jsx.md +++ b/beta/src/pages/learn/writing-markup-with-jsx.md @@ -8,6 +8,7 @@ translators: --- + **JSX** 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标记。虽然还有其它方式可以编写组件，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。