translate creating-a-react-app (#1667)

Author: heygsc

src/content/learn/creating-a-react-app.md

@@ -1,116 +1,116 @@
 ---
-title: Creating a React App
+title: 创建一个 React 应用
 ---
 
 <Intro>
 
-If you want to build a new app or website with React, we recommend starting with a framework.
+如果你想用 React 构建一个新的应用或网站，我们推荐从一个框架开始。
 
 </Intro>
 
-## Recommended React frameworks {/*bleeding-edge-react-frameworks*/}
+## 推荐的 React 框架 {/*bleeding-edge-react-frameworks*/}
 
-These recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture.
+这些推荐的框架支持你在生产环境中部署和扩展应用所需的所有功能。它们集成了 React 的最新特性，并充分利用了 React 的架构。
 
 <Note>
 
-#### React frameworks do not require a server. {/*react-frameworks-do-not-require-a-server*/}
+#### React 框架不需要服务器。 {/*react-frameworks-do-not-require-a-server*/}
 
-All the frameworks on this page can create single-page apps. Single-page apps can be deployed to a [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN) or static hosting service and do not need a server. If you would like to enable features that require a server (like server side rendering), you can opt-in on individual routes without rewriting your app.
+本页面中的所有框架都可以创建单页应用。单页应用可以部署到 [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN) 或静态托管服务上，而无需服务器。如果你希望启用需要服务器的功能（例如服务器端渲染），你可以在不重写应用的情况下，为个别路由启用这些功能。
 
 </Note>
 
 ### Next.js (App Router) {/*nextjs-app-router*/}
 
-**[Next.js's App Router](https://nextjs.org/docs) is a React framework that takes full advantage of React's architecture to enable full-stack React apps.**
+**[Next.js 的 App Router](https://nextjs.org/docs) 是一个 React 框架，充分利用了 React 的架构，支持全栈 React 应用。**
 
 <TerminalBlock>
 npx create-next-app@latest
 </TerminalBlock>
 
-Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server. Vercel additionally provides opt-in paid cloud services.
+Next.js 由 [Vercel](https://vercel.com/) 维护。你可以 [将 Next.js 应用部署](https://nextjs.org/docs/app/building-your-application/deploying) 到任何支持 Node.js 或 serverless 的托管平台，或者部署到你自己的服务器。 Next.js 也支持 [静态导出](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) 无需服务器。Vercel 还提供可选的付费云服务。
 
 ### React Router (v7) {/*react-router-v7*/}
 
-**[React Router](https://reactrouter.com/start/framework/installation) is the most popular routing library for React and can be paired with Vite to create a full-stack React framework**. It emphasizes standard Web APIs and has several [ready to deploy templates](https://github.com/remix-run/react-router-templates) for various JavaScript runtimes and platforms.
+**[React Router](https://reactrouter.com/start/framework/installation) 是 React 最流行的路由库，可以与 Vite 结合创建一个全栈 React 框架**。它强调标准的 Web API 并提供了多个 [可部署的模板](https://github.com/remix-run/react-router-templates) 适用于各种 JavaScript 运行时和平台。
 
-To create a new React Router framework project, run:
+要创建一个新的 React Router 框架项目，请运行:
 
 <TerminalBlock>
 npx create-react-router@latest
 </TerminalBlock>
 
-React Router is maintained by [Shopify](https://www.shopify.com).
+React Router 由 [Shopify](https://www.shopify.com) 维护。
 
 ### Expo (for native apps) {/*expo*/}
 
-**[Expo](https://expo.dev/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.** It provides an SDK for [React Native](https://reactnative.dev/) that makes the native parts easier to use. To create a new Expo project, run:
+**[Expo](https://expo.dev/) 是一个 React 框架，让你可以创建支持真正原生 UI 的通用 Android、iOS 和 Web 应用**。它为 [React Native](https://reactnative.dev/) 提供了一个 SDK，让原生部分更易于使用。要创建一个新的 Expo 项目，请运行：
 
 <TerminalBlock>
 npx create-expo-app@latest
 </TerminalBlock>
 
-If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/).
+如果你是 Expo 新手，请查看 [Expo 教程](https://docs.expo.dev/tutorial/introduction/).
 
-Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.
+Expo 由 [Expo 公司](https://expo.dev/about) 维护。使用 Expo 构建应用是免费的，你可以将应用提交到 Google 和 Apple 应用商店，没有任何限制。Expo 还提供可选的付费云服务。
 
 
-## Other options {/*other-options*/}
+## 其它选项 {/*other-options*/}
 
-There are other up-and-coming frameworks that are working towards our full stack React vision:
+还有一些新兴的框架正在努力实现我们的全栈 React 愿景：
 
-- [TanStack Start (Beta)](https://tanstack.com/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite.
-- [RedwoodJS](https://redwoodjs.com/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications.
+- [TanStack Start (Beta)](https://tanstack.com/): TanStack Start 是一个由 TanStack Router 驱动的全栈 React 框架。它使用 Nitro 和 Vite 等工具提供完整的文档服务端渲染、流式传输、服务器函数、打包等功能。
+- [RedwoodJS](https://redwoodjs.com/): Redwood 是一个全栈 React 框架，带有许多预装的包和配置，方便构建全栈 Web 应用。
 
 <DeepDive>
 
-#### Which features make up the React team’s full-stack architecture vision? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
+#### 哪些特性构成了 React 团队的全栈架构愿景？ {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
 
-Next.js's App Router bundler fully implements the official [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree.
+Next.js 的 App Router 打包器完全实现了官方的 [React Server Components 规范](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). 这让你可以在同一个 React 树中混合使用构建时、仅服务器端和交互式组件。
 
-For example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components:
+例如，你可以编写一个仅在服务器端运行（或在构建期间运行）的服务器端 React 组件，作为 async 函数从数据库或文件中读取数据。然后，你可以将数据传递给将在浏览器中运行的交互式组件：
 
 ```js
-// This component runs *only* on the server (or during the build).
+// 该组件**仅**在服务器端运行（或在构建期间运行）。
 async function Talks({ confId }) {
-  // 1. You're on the server, so you can talk to your data layer. API endpoint not required.
+  // 1. 你在服务器端，因此可以直接与数据层交互。无需 API 端点。
   const talks = await db.Talks.findAll({ confId });
 
-  // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
+  // 2. 添加任意渲染逻辑。这不会使你的 JavaScript bundle 变大。
   const videos = talks.map(talk => talk.video);
 
-  // 3. Pass the data down to the components that will run in the browser.
+  // 3. 将数据传递给将在浏览器中运行的组件。
   return <SearchableVideoList videos={videos} />;
 }
 ```
 
-Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree:
+Next.js 的 App Router 还集成了 [使用 Suspense 的数据获取](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). 这让你可以直接在 React 树中为用户界面的不同部分指定加载状态（例如骨架占位符）：
 
 ```js
 <Suspense fallback={<TalksLoading />}>
   <Talks confId={conf.id} />
 </Suspense>
 ```
 
-Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks.
+服务器组件和 Suspense 是 React 的特性，而不是 Next.js 的特性。然而，在框架层面采用它们需要开发者的支持和大量的实现工作。目前，Next.js App Router 是最完整的实现。React 团队正在与打包工具开发者合作，以便在下一代框架中更容易实现这些特性。
 
 </DeepDive>
 
 <Note>
 
 
-#### Do you recommend Vite? {/*do-you-recommend-vite*/}
+#### 你推荐使用 Vite 吗？ {/*do-you-recommend-vite*/}
 
-We provide several Vite-based recommendations.
+我们推荐了一些基于 Vite 的选择。
 
-React Router v7 is a Vite based framework which allows you to use Vite's fast development server and build tooling with a framework that provides routing and data fetching. Just like the other frameworks we recommend, you can build a SPA with React Router v7.
+React Router v7 是一个基于 Vite 的框架，允许你使用 Vite 的快速开发服务器和构建工具，同时提供路由和数据获取功能。与其他推荐的框架一样，你可以用 React Router v7 构建单页应用。
 
-We also recommend using Vite when [adding React to an existing project](/learn/add-react-to-an-existing-project), or [building a framework](/learn/building-a-react-framework).
+我们也推荐在 [将 React 添加到现有项目中](/learn/add-react-to-an-existing-project)，或者 [构建一个 React 框架](/learn/building-a-react-framework) 时使用 Vite。
 
-Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, React recommends using a framework that integrates with build tools like Vite for new projects.
+就像 Svelte 有 Sveltekit、Vue 有 Nuxt、Solid 有 SolidStart 一样，React 推荐使用集成了 Vite 等构建工具的框架来创建新项目。
 
 </Note>
 
 -----
 
-_If you’re a framework author interested in being included on this page, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+)._
+_如果你是一个框架开发者，希望在本页面被推荐，[请告知我们](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+)。_