@@ -170,7 +170,6 @@ export function HomeContent() {
170170 < Header > 從元件建立使用者介面</ Header >
171171 < Para >
172172 React 讓你以稱為「元件」的獨立部分來建立使用者介面。
173- < br />
174173 你也可以建立自己的 React 元件，例如： < Code > Thumbnail</ Code > 、
175174 < Code > LikeButton</ Code > 和 < Code > Video</ Code > 。
176175 接著將它們組合成完整的畫面、頁面與應用程式。
@@ -192,12 +191,9 @@ export function HomeContent() {
192191 < Center >
193192 < Header > 使用程式碼與標記語法撰寫你的元件</ Header >
194193 < Para >
195- React 元件是使用 JavaScript 函式。
196- < br />
197- 想要依條件顯示內容嗎？使用 < Code > if</ Code > 陳述式；
198- < br />
199- 想要顯示一個列表嗎？試試陣列的 < Code > map()</ Code > 。< br />
200- 學習 React，就是在學習程式設計。
194+ React 元件是使用 JavaScript 函式。 想要依條件顯示內容嗎？使用{ ' ' }
195+ < Code > if</ Code > 陳述式； 想要顯示一個列表嗎？試試陣列的{ ' ' }
196+ < Code > map()</ Code > 。 學習 React，就是在學習程式設計。
201197 </ Para >
202198 </ Center >
203199 < FullBleed >
@@ -206,8 +202,7 @@ export function HomeContent() {
206202 < Center >
207203 < Para >
208204 這種標記語法稱為 JSX。 它是一種由 React 推廣的 JavaScript
209- 語法擴充。
210- < br /> 將 JSX 標記與相關的渲染邏輯放在一起，讓 React
205+ 語法擴充。 將 JSX 標記與相關的渲染邏輯放在一起，讓 React
211206 元件更容易建立、維護與刪除。
212207 </ Para >
213208 </ Center >
@@ -218,9 +213,7 @@ export function HomeContent() {
218213 < Header > 依據需求增加互動功能</ Header >
219214 < Para >
220215 React 元件會接收資料，並回傳要顯示在畫面上的內容。
221- < br />
222216 當使用者與介面互動時，例如在輸入框輸入文字，你可以傳入新的資料。
223- < br />
224217 React 會自動更新畫面，讓內容與最新資料一致。
225218 </ Para >
226219 </ Center >
@@ -229,11 +222,8 @@ export function HomeContent() {
229222 </ FullBleed >
230223 < Center >
231224 < Para >
232- 你不需要用 React 建立整個頁面。
233- < br />
234- 只要將 React 加入現有的 HTML 頁面，
235- < br />
236- 就能在頁面的任何地方渲染互動式的 React 元件。
225+ 你不需要用 React 建立整個頁面。 只要將 React 加入現有的 HTML
226+ 頁面， 就能在頁面的任何地方渲染互動式的 React 元件。
237227 </ Para >
238228 < div className = "flex justify-start w-full lg:justify-center" >
239229 < CTA
@@ -255,11 +245,8 @@ export function HomeContent() {
255245 </ Header >
256246 < Para >
257247 React 是一個函式庫。
258- < br />
259248 它讓你能將元件組合在一起，但不會規範路由或資料擷取的方式。
260- < br />
261249 若要使用 React 建立完整的應用程式，我們建議使用全端 React 框架，
262- < br />
263250 例如 < Link href = "https://nextjs.org" > Next.js</ Link > 或{ ' ' }
264251 < Link href = "https://reactrouter.com" > React Router</ Link > .
265252 </ Para >
@@ -270,9 +257,7 @@ export function HomeContent() {
270257 < Center >
271258 < Para >
272259 React 同時也是一種架構。
273- < br />
274260 實作該架構的框架允許你在伺服器端，甚至在建置階段，於非同步元件中擷取資料。
275- < br />
276261 你可以從檔案或資料庫讀取資料，並將它傳遞到互動式元件中。
277262 </ Para >
278263 < div className = "flex justify-start w-full lg:justify-center" >
@@ -290,10 +275,8 @@ export function HomeContent() {
290275 < div className = "mx-auto max-w-4xl lg:text-center items-center px-5 flex flex-col" >
291276 < Header > 善用各平台的優勢</ Header >
292277 < Para >
293- 人們喜歡網頁和原生應用程式的原因不同。
294- < br />
295- React 讓你能運用相同的技能來開發兩者。
296- < br />
278+ 人們喜歡網頁和原生應用程式的原因不同。 React
279+ 讓你能運用相同的技能來開發兩者。
297280 它善用各平台的獨特優勢，讓介面在每個平台上都感覺恰到好處。
298281 </ Para >
299282 </ div >
@@ -311,14 +294,10 @@ export function HomeContent() {
311294 忠於網頁
312295 </ h4 >
313296 < p className = "lg:text-xl leading-normal text-secondary" >
314- 使用者期望網頁應用程式能快速載入。
315- < br />
316- 在伺服器端，React 允許你在仍在擷取資料時就開始串流傳送
317- HTML，
318- < br />
319- 並在 JavaScript 程式碼載入前逐步填入剩餘內容。
297+ 使用者期望網頁應用程式能快速載入。 在伺服器端，React
298+ 允許你在仍在擷取資料時就開始串流傳送 HTML， 並在
299+ JavaScript 程式碼載入前逐步填入剩餘內容。
320300 在用戶端，React 可以利用標準的 Web API，
321- < br />
322301 讓你的介面即使在渲染過程中也能保持即時回應。
323302 </ p >
324303 </ div >
@@ -408,7 +387,6 @@ export function HomeContent() {
408387 < Link href = "https://github.com/expo/expo" > Expo</ Link > { ' ' }
409388 讓你能使用 React 來開發 Android、iOS
410389 以及更多平台的應用程式。
411- < br />
412390 它們在外觀和操作如同原生應用程式，因為它們的使用者介面是真正的原生
413391 UI。 這並非透過網頁開啟，而是React
414392 元件直接渲染出平台所提供的原生 Android 與 iOS 畫面。
@@ -422,9 +400,7 @@ export function HomeContent() {
422400 < div className = "px-5 lg:px-0 max-w-4xl mx-auto lg:text-center text-secondary dark:text-secondary-dark" >
423401 < Para >
424402 使用 React，你可以同時開發網頁與原生應用。
425- < br />
426403 團隊能在維持最佳使用者體驗的前提下，輕鬆跨平台發佈；
427- < br />
428404 組織也能整合平台間的隔閡，打造能完整負責功能開發的團隊。
429405 </ Para >
430406 < div className = "flex justify-start w-full lg:justify-center" >
@@ -442,21 +418,16 @@ export function HomeContent() {
442418 < div className = "w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:ps-5 lg:pe-10" >
443419 < Header > 穩定可靠的升級流程</ Header >
444420 < Para >
445- React 對待變更一向謹慎。
446- < br />
447- 每一次 React
421+ React 對待變更一向謹慎。 每一次 React
448422 的提交（commit）都會在超過十億使用者的商業關鍵場景中進行測試。
449- < br /> 在 Meta 內部超過十萬個 React
423+ 在 Meta 內部超過十萬個 React
450424 元件共同驗證每一次升級策略的可行性。
451425 </ Para >
452426 < div className = "order-last pt-5" >
453427 < Para >
454428 React 團隊總是不斷搜尋如何改進 React.
455- < br />
456- 有些研究甚至花費數年才能得到成效，
457- < br />
458- React 對將研究成果轉化為生產環境有著很高的標準。
459- < br />
429+ 有些研究甚至花費數年才能得到成效， React
430+ 對將研究成果轉化為生產環境有著很高的標準。
460431 只有經過驗證的方法才能成為 React 的一部分。
461432 </ Para >
462433 < div className = "hidden lg:flex justify-start w-full" >
@@ -504,7 +475,6 @@ export function HomeContent() {
504475 </ Header >
505476 < Para >
506477 你並不孤單。每個月都有200萬開發者從世界各地造訪React的文件，
507- < br />
508478 React 是能讓人與團隊共同認可的選擇。
509479 </ Para >
510480 </ Center >
@@ -514,16 +484,11 @@ export function HomeContent() {
514484 < Center >
515485 < Para >
516486 這正是為什麼 React
517- 不僅僅是一個函式庫、一個框架，甚至不只是個生態系。
518- < br />
519- React
487+ 不僅僅是一個函式庫、一個框架，甚至不只是個生態系。 React
520488 是一個社群——在這裡，你可以尋求協助、發現機會，甚至結識新朋友。
521- < br />
522489 你會在這裡遇見開發者與設計師、初學者與專家、研究人員與藝術家、老師與學生。
523- < br />
524490 儘管我們的背景各不相同，React
525491 讓我們能夠齊聚一堂，創造出優秀的使用者介面。
526- < br />
527492 </ Para >
528493 </ Center >
529494 </ div >
0 commit comments