diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 9cc26bdaa..f58876c1c 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -143,7 +143,7 @@ export function HomeContent() { React

- The library for web and native user interfaces + 用於網頁與原生使用者介面的函式庫

- Learn React + 學習 React - API Reference + API 參考
-
Create user interfaces from components
+
從元件建立使用者介面
- React lets you build user interfaces out of individual pieces - called components. Create your own React components like{' '} - Thumbnail, LikeButton, and{' '} - Video. Then combine them into entire screens, pages, - and apps. + React 讓你以稱為「元件」的獨立部分來建立使用者介面。 + 你也可以建立自己的 React 元件,例如: Thumbnail、 + LikeButtonVideo。 + 接著將它們組合成完整的畫面、頁面與應用程式。
@@ -181,22 +180,20 @@ export function HomeContent() {
- Whether you work on your own or with thousands of other - developers, using React feels the same. It is designed to let you - seamlessly combine components written by independent people, - teams, and organizations. + 無論你是獨立開發,或與上千名開發者協作,使用 React + 的體驗都是一致的。 + 它的設計讓你能無縫地組合來自個人開發者、團隊或組織的元件。
-
Write components with code and markup
+
使用程式碼與標記語法撰寫你的元件
- React components are JavaScript functions. Want to show some - content conditionally? Use an if statement. - Displaying a list? Try array map(). Learning React is - learning programming. + React 元件是使用 JavaScript 函式。 想要依條件顯示內容嗎?使用{' '} + if 陳述式; 想要顯示一個列表嗎?試試陣列的{' '} + map()。 學習 React,就是在學習程式設計。
@@ -204,22 +201,20 @@ export function HomeContent() {
- This markup syntax is called JSX. It is a JavaScript syntax - extension popularized by React. Putting JSX markup close to - related rendering logic makes React components easy to create, - maintain, and delete. + 這種標記語法稱為 JSX。 它是一種由 React 推廣的 JavaScript + 語法擴充。 將 JSX 標記與相關的渲染邏輯放在一起,讓 React + 元件更容易建立、維護與刪除。
-
Add interactivity wherever you need it
+
依據需求增加互動功能
- React components receive data and return what should appear on the - screen. You can pass them new data in response to an interaction, - like when the user types into an input. React will then update the - screen to match the new data. + React 元件會接收資料,並回傳要顯示在畫面上的內容。 + 當使用者與介面互動時,例如在輸入框輸入文字,你可以傳入新的資料。 + React 會自動更新畫面,讓內容與最新資料一致。
@@ -227,16 +222,15 @@ export function HomeContent() {
- You don’t have to build your whole page in React. Add React to - your existing HTML page, and render interactive React components - anywhere on it. + 你不需要用 React 建立整個頁面。 只要將 React 加入現有的 HTML + 頁面, 就能在頁面的任何地方渲染互動式的 React 元件。
- Add React to your page + 將 React 加入到你的頁面
@@ -245,14 +239,15 @@ export function HomeContent() {
- Go full-stack
- with a framework + 透過框架 +
+ 打造全端應用
- React is a library. It lets you put components together, but it - doesn’t prescribe how to do routing and data fetching. To build an - entire app with React, we recommend a full-stack React framework - like Next.js or{' '} + React 是一個函式庫。 + 它讓你能將元件組合在一起,但不會規範路由或資料擷取的方式。 + 若要使用 React 建立完整的應用程式,我們建議使用全端 React 框架, + 例如 Next.js 或{' '} React Router.
@@ -261,17 +256,16 @@ export function HomeContent() {
- React is also an architecture. Frameworks that implement it let - you fetch data in asynchronous components that run on the server - or even during the build. Read data from a file or a database, and - pass it down to your interactive components. + React 同時也是一種架構。 + 實作該架構的框架允許你在伺服器端,甚至在建置階段,於非同步元件中擷取資料。 + 你可以從檔案或資料庫讀取資料,並將它傳遞到互動式元件中。
- Get started with a framework + 從框架開始
@@ -279,12 +273,11 @@ export function HomeContent() {
-
Use the best from every platform
+
善用各平台的優勢
- People love web and native apps for different reasons. React - lets you build both web apps and native apps using the same - skills. It leans upon each platform’s unique strengths to let - your interfaces feel just right on every platform. + 人們喜歡網頁和原生應用程式的原因不同。 React + 讓你能運用相同的技能來開發兩者。 + 它善用各平台的獨特優勢,讓介面在每個平台上都感覺恰到好處。
@@ -298,15 +291,14 @@ export function HomeContent() {

- Stay true to the web + 忠於網頁

- People expect web app pages to load fast. On the server, - React lets you start streaming HTML while you’re still - fetching data, progressively filling in the remaining - content before any JavaScript code loads. On the client, - React can use standard web APIs to keep your UI - responsive even in the middle of rendering. + 使用者期望網頁應用程式能快速載入。 在伺服器端,React + 允許你在仍在擷取資料時就開始串流傳送 HTML, 並在 + JavaScript 程式碼載入前逐步填入剩餘內容。 + 在用戶端,React 可以利用標準的 Web API, + 讓你的介面即使在渲染過程中也能保持即時回應。

@@ -384,21 +376,20 @@ export function HomeContent() {

- Go truly native + 真正的原生體驗

- People expect native apps to look and feel like their - platform.{' '} + 人們期望原生應用程式在外觀與操作上都能符合各自的平台{' '} React Native {' '} - and{' '} + 和{' '} Expo{' '} - let you build apps in React for Android, iOS, and - more. They look and feel native because their UIs{' '} - are truly native. It’s not a web view—your - React components render real Android and iOS views - provided by the platform. + 讓你能使用 React 來開發 Android、iOS + 以及更多平台的應用程式。 + 它們在外觀和操作如同原生應用程式,因為它們的使用者介面是真正的原生 + UI。 這並非透過網頁開啟,而是React + 元件直接渲染出平台所提供的原生 Android 與 iOS 畫面。

@@ -408,14 +399,13 @@ export function HomeContent() {
- With React, you can be a web and a native developer. Your - team can ship to many platforms without sacrificing the user - experience. Your organization can bridge the platform silos, and - form teams that own entire features end-to-end. + 使用 React,你可以同時開發網頁與原生應用。 + 團隊能在維持最佳使用者體驗的前提下,輕鬆跨平台發佈; + 組織也能整合平台間的隔閡,打造能完整負責功能開發的團隊。
- Build for native platforms + 為原生平台開發應用程式
@@ -426,23 +416,23 @@ export function HomeContent() {
-
Upgrade when the future is ready
+
穩定可靠的升級流程
- React approaches changes with care. Every React commit is - tested on business-critical surfaces with over a billion - users. Over 100,000 React components at Meta help validate - every migration strategy. + React 對待變更一向謹慎。 每一次 React + 的提交(commit)都會在超過十億使用者的商業關鍵場景中進行測試。 + 在 Meta 內部超過十萬個 React + 元件共同驗證每一次升級策略的可行性。
- The React team is always researching how to improve React. - Some research takes years to pay off. React has a high bar - for taking a research idea into production. Only proven - approaches become a part of React. + React 團隊總是不斷搜尋如何改進 React. + 有些研究甚至花費數年才能得到成效, React + 對將研究成果轉化為生產環境有著很高的標準。 + 只有經過驗證的方法才能成為 React 的一部分。
- Read more React news + 閱讀更多 React 消息
@@ -450,7 +440,7 @@ export function HomeContent() {

- Latest React News + 最新的 React 消息

@@ -468,7 +458,7 @@ export function HomeContent() {
- Read more React news + 閱讀更多 React 消息
@@ -481,13 +471,11 @@ export function HomeContent() {
- Join a community
- of millions + 加入數百萬人的社群
- You’re not alone. Two million developers from all over the - world visit the React docs every month. React is something - that people and teams can agree on. + 你並不孤單。每個月都有200萬開發者從世界各地造訪React的文件, + React 是能讓人與團隊共同認可的選擇。
@@ -495,13 +483,12 @@ export function HomeContent() {
- This is why React is more than a library, an architecture, or - even an ecosystem. React is a community. It’s a place where - you can ask for help, find opportunities, and meet new - friends. You will meet both developers and designers, - beginners and experts, researchers and artists, teachers and - students. Our backgrounds may be very different, but React - lets us all create user interfaces together. + 這正是為什麼 React + 不僅僅是一個函式庫、一個框架,甚至不只是個生態系。 React + 是一個社群——在這裡,你可以尋求協助、發現機會,甚至結識新朋友。 + 你會在這裡遇見開發者與設計師、初學者與專家、研究人員與藝術家、老師與學生。 + 儘管我們的背景各不相同,React + 讓我們能夠齊聚一堂,創造出優秀的使用者介面。
@@ -518,15 +505,15 @@ export function HomeContent() {
- Welcome to the
- React community + 歡迎來到
+ React 社群
- Get Started + 立即開始