Merge pull request #364 from kai2128/docs/js-in-jsx

Author: neighborhood999

beta/src/content/learn/javascript-in-jsx-with-curly-braces.md

@@ -1,25 +1,25 @@
 ---
-title: JavaScript in JSX with Curly Braces
+title: 在 JSX 中使用 JavaScript 的語法
 ---
 
 <Intro>
 
-JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.
+JSX 讓你在 JavaScript 文件中撰寫類似 HTML 標籤的程式碼，使渲染邏輯和內容保持在同樣的地方。有時你會想在標籤中新增一些 JavaScript 邏輯或引用一個動態屬性。在這種情況下，你可以在 JSX 中使用大括號來撰寫 JavaScript。
 
 </Intro>
 
 <YouWillLearn>
 
-* How to pass strings with quotes
-* How to reference a JavaScript variable inside JSX with curly braces
-* How to call a JavaScript function inside JSX with curly braces
-* How to use a JavaScript object inside JSX with curly braces
+* 如何使用引號傳遞 string
+* 如何使用大括號在 JSX 中引用 JavaScript 變數
+* 如何使用大括號在 JSX 中呼叫 JavaScript 函式
+* 如何使用大括號在 JSX 中使用 JavaScript object
 
 </YouWillLearn>
 
-## Passing strings with quotes {/*passing-strings-with-quotes*/}
+## 使用引號傳遞 string {/*passing-strings-with-quotes*/}
 
-When you want to pass a string attribute to JSX, you put it in single or double quotes:
+當你想向 JSX 傳遞一個 string attribute 時，你要把它放在單引號或雙引號中：
 
 <Sandpack>
 
@@ -41,9 +41,9 @@ export default function Avatar() {
 
 </Sandpack>
 
-Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings.
+在這裡，`"https://i.imgur.com/7vQD0fPs.jpg"` 和 `"Gregorio Y. Zara"` 被作為 string 傳遞。
 
-But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**:
+但是如果你想動態地指定 `src` 或 `alt` 內容呢？**你可以替換`"`和`"`為`{`和`}`，來使用 JavaScript 中的值：**
 
 <Sandpack>
 
@@ -67,11 +67,11 @@ export default function Avatar() {
 
 </Sandpack>
 
-Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup!
+注意 `className="avatar"` 和 `src={avatar}` 之間的區別，前者指定了一個 `"avatar"` 的 CSS classname，使圖片變成圓形，而後者讀取了 JavaScript 變量 `avatar` 變數的值。這是因為大括號可以讓你在標籤中使用 JavaScript！
 
-## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/}
+## 使用大括號: 進入 JavaScript 世界的窗口 {/*using-curly-braces-a-window-into-the-javascript-world*/}
 
-JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `<h1>`:
+JSX 是編寫 JavaScript 的一種特殊方式。這意味著可以在它裡面透過大括號 `{ }` 使用 JavaScript。下面的範例首先宣告了一位科學家的名字 `name` ，然後用大括號將其嵌入 `<h1>` 內：
 
 <Sandpack>
 
@@ -86,9 +86,9 @@ export default function TodoList() {
 
 </Sandpack>
 
-Try changing `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the To Do List title changes?
+試著把 `name` 的值從 `Gregorio Y. Zara` 改為 `Hedy Lamarr`。看到待辦事項列表的標題如何變化了嗎？
 
-Any JavaScript expression will work between curly braces, including function calls like `formatDate()`:
+任何的 JavaScript 表達式都可以在大括號之間使用，包括呼叫像是 `formatDate()` 的函式：
 
 <Sandpack>
 
@@ -111,18 +111,18 @@ export default function TodoList() {
 
 </Sandpack>
 
-### Where to use curly braces {/*where-to-use-curly-braces*/}
+### 哪裡使用大括號 {/*where-to-use-curly-braces*/}
 
-You can only use curly braces in two ways inside JSX:
+你只能在 JSX 中以兩種方式使用大括號。
 
-1. **As text** directly inside a JSX tag: `<h1>{name}'s To Do List</h1>` works, but `<{tag}>Gregorio Y. Zara's To Do List</{tag}>`  will not.
-2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `"{avatar}"`.
+1. **作為文字** 直接在 JSX 標籤內使用。 `<h1>{name}'s To Do List</h1>` 可以使用，但 `<{tag}>Gregorio Y. Zara's To Do List</{tag}>` 就不行。
+2. **作為 attributes** 緊隨 `=` 符號之後：`src={avatar}` 將讀取 `avatar` 變數，但 `src="{avatar}"` 將傳遞 string `"{avatar}"`。
 
-## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
+## 使用 "雙引號"：JSX 中的 CSS 和其他 object {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 
-In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
+除了 string、number 和其他 JavaScript 表達式外，你甚至可以在 JSX 中傳遞 object。Object 也必須用大括號表示，如 `{ name: "Hedy Lamarr", inventions: 5 }` 。因此，要在 JSX 中傳遞一個 JS object，你必須用另一對大括號包裹該 object：`person={{ name: "Hedy Lamarr", inventions: 5 }}`。
 
-You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute:
+你可能會在 JSX 中看到這種 inline CSS 樣式。 React 並不要求你使用 inline 樣式（CSS class 在大多數情況下運作的很好）。但是當你需要一個 inline 樣式時，你要向 `style` attribute 傳遞一個 object：
 
 <Sandpack>
 
@@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 </Sandpack>
 
-Try changing the values of `backgroundColor` and `color`.
+嘗試改變 `backgroundColor` 和 `color` 的值。
 
-You can really see the JavaScript object inside the curly braces when you write it like this:
+當你這樣寫時，你清楚地看到大括號內的 JavaScript object。
 
 ```js {2-5}
 <ul style={
@@ -161,17 +161,17 @@ You can really see the JavaScript object inside the curly braces when you write
 }>
 ```
 
-The next time you see `{{` and `}}` in JSX, know that it's nothing more than an object inside the JSX curlies!
+下次你在 JSX 中看到 `{{` 和 `}}` 的時候，要知道它只不過是 JSX 大括號中的一個 object 而已!
 
 <Pitfall>
 
-Inline `style` properties are written in camelCase. For example, HTML `<ul style="background-color: black">` would be written as `<ul style={{ backgroundColor: 'black' }}>`  in your component.
+Inline 的 `style` 屬性是用 camelCase 寫的。例如，HTML `<ul style="background-color: black">` 在你的 component 中應該寫成 `<ul style={{ backgroundColor: 'black' }}>`。
 
 </Pitfall>
 
-## More fun with JavaScript objects and curly braces {/*more-fun-with-javascript-objects-and-curly-braces*/}
+## 更多關於有趣的 JavaScript object 和大括號 {/*more-fun-with-javascript-objects-and-curly-braces*/}
 
-You can move several expressions into one object, and reference them in your JSX inside curly braces:
+你可以把幾個表達式移到一個 object 中，並在你的 JSX 中使用大括號引用它們。
 
 <Sandpack>
 
@@ -211,7 +211,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-In this example, the `person` JavaScript object contains a `name` string and a `theme` object:
+在這個例子中，`person` 的 JavaScript object 包含一個 `name` string 和一個 `theme` object。
 
 ```js
 const person = {
@@ -223,31 +223,31 @@ const person = {
 };
 ```
 
-The component can use these values from `person` like so:
+該 component 可以像這樣使用這些來自 `person` 的值。
 
 ```js
 <div style={person.theme}>
   <h1>{person.name}'s Todos</h1>
 ```
 
-JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript.
+JSX 是非常簡潔的模板語言，因為它允許使用 JavaScript 來組織資料和邏輯。
 
 <Recap>
 
-Now you know almost everything about JSX:
+現在你已經幾乎了解 JSX 的所有內容：
 
-* JSX attributes inside quotes are passed as strings.
-* Curly braces let you bring JavaScript logic and variables into your markup.
-* They work inside the JSX tag content or immediately after `=` in attributes.
-* `{{` and `}}` is not special syntax: it's a JavaScript object tucked inside JSX curly braces.
+* 在引號內的 JSX attributes 被傳遞為 string。
+* 大括號可以讓你將 JavaScript 邏輯和變數帶入標籤中。
+* 它們可以在 JSX 標籤內容內部或在屬性中的 `=` 後立即使用。
+* `{{` 和 `}}` 不是特殊的語法：它是一個被包含在 JSX 大括號內的 JavaScript object。
 
 </Recap>
 
 <Challenges>
 
-#### Fix the mistake {/*fix-the-mistake*/}
+#### 糾正錯誤 {/*fix-the-mistake*/}
 
-This code crashes with an error saying `Objects are not valid as a React child`:
+這段代碼會崩潰並報錯 `Objects are not valid as a React child`：
 
 <Sandpack>
 
@@ -287,15 +287,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Can you find the problem?
+你能找到問題所在嗎？
 
-<Hint>Look for what's inside the curly braces. Are we putting the right thing there?</Hint>
+<Hint>看一下大括號裡的內容。我們是否把正確的東西放在那裡？ </Hint>
 
 <Solution>
 
-This is happening because this example renders *an object itself* into the markup rather than a string: `<h1>{person}'s Todos</h1>` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them.
+發生這種情況是因為這個例子將*一個 object 本身*渲染到標籤中，而不是一個 string。 `<h1>{person}'s Todos</h1>` 將試圖渲染整個 `person` object! 使用原始 object 作為文本內容會拋出一個錯誤，因為 React 不知道你想如何顯示它們。
 
-To fix it, replace `<h1>{person}'s Todos</h1>` with `<h1>{person.name}'s Todos</h1>`:
+要解決這個問題，將 `<h1>{person}'s Todos</h1>` 改為 `<h1>{person.name}'s Todos</h1>`。
 
 <Sandpack>
 
@@ -337,9 +337,9 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-#### Extract information into an object {/*extract-information-into-an-object*/}
+#### 將信息提取到一個 object {/*extract-information-into-an-object*/}
 
-Extract the image URL into the `person` object.
+將圖片的 URL 提取到 `person` object 中。
 
 <Sandpack>
 
@@ -381,7 +381,7 @@ body > div > div { padding: 20px; }
 
 <Solution>
 
-Move the image URL into a property called `person.imageUrl` and read it from the `<img>` tag using the curlies:
+將圖片 URL 移到一個名為 `person.imageUrl` 的屬性中，然後在 `<img>` 標籤中使用大括號讀取它：
 
 <Sandpack>
 
@@ -424,13 +424,13 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-#### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/}
+#### 在 JSX 的大括號中寫表達式 {/*write-an-expression-inside-jsx-curly-braces*/}
 
-In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension.
+在下面的 object 中，完整的圖片 URL 被分成四個部分：base URL、`imageId`、`imageSize` 和和文件副檔名。
 
-We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `<img>` tag specifies its `src`.
+我們希望將這些 attributes 組合在一起形成完整的圖片 URL：基礎 URL（始終為 `'https://i.imgur.com/'`）、`imageId`（`'7vQD0fP'`）、`imageSize`（`'s'`）和和文件副檔名（始終為 `''.jpg'`）。然而，下面 `<img>` 標籤的 `src` 指定方式存在問題。
 
-Can you fix it?
+你能修正它嗎？
 
 <Sandpack>
 
@@ -474,15 +474,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-To check that your fix worked, try changing the value of `imageSize` to `'b'`. The image should resize after your edit.
+要檢查你的修正是否生效，請嘗試將 `imageSize` 的值更改為 `'b'`。在編輯後，圖片應該會改變大小。
 
 <Solution>
 
-You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
+你可以將其寫成 `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`。
 
-1. `{` opens the JavaScript expression
-2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string
-3. `}` closes the JavaScript expression
+1. `{` 開始 JavaScript 表達式
+2. `baseUrl + person.imageId + person.imageSize + '.jpg'` 產生正確的 URL string
+3. `}` 結束 JavaScript 表達式
 
 <Sandpack>
 
@@ -525,7 +525,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-You can also move this expression into a separate function like `getImageUrl` below:
+你也可以將這個表達式移到一個單獨的函式中，如下面的 `getImageUrl` 函式：
 
 <Sandpack>
 
@@ -580,7 +580,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Variables and functions can help you keep the markup simple!
+變數和函式可以幫助你保持標籤簡潔！
 
 </Solution>