From a6bcf7ca9f00344793f5aca44ebcc55b6d705dbd Mon Sep 17 00:00:00 2001 From: watonyweng Date: Fri, 26 Nov 2021 13:10:19 +0800 Subject: [PATCH 1/4] [Beta]: docs(cn): translate learn/start-a-new-react-project.md --- .../pages/learn/start-a-new-react-project.md | 74 ++++++++++--------- 1 file changed, 38 insertions(+), 36 deletions(-) diff --git a/beta/src/pages/learn/start-a-new-react-project.md b/beta/src/pages/learn/start-a-new-react-project.md index b42a1ff787..27142044fb 100644 --- a/beta/src/pages/learn/start-a-new-react-project.md +++ b/beta/src/pages/learn/start-a-new-react-project.md @@ -1,33 +1,35 @@ --- -title: Start a New React Project +title: 开始一个 React 新项目 +translators: + - watonyweng --- -If you're learning React or considering adding it to an existing project, you can get started quickly by [adding React to any HTML page with script tags](/learn/add-react-to-a-website). If your project will need many components and many files, it might be time to consider the options below! +如果你正在学习 React 或考虑将其添加到现有项目中，你可以通过 [使用脚本标签添加 React 到任意的 HTML 页面](/learn/add-react-to-a-website) 快速入门。如果你的项目需要很多组件和文件，那么是时候考虑下面的选项了！ -## Choose your own adventure {/*choose-your-own-adventure*/} +## 选择你的冒险 {#choose-your-own-adventure} -React is a library that lets you organize UI code by breaking it apart into pieces called components. React doesn't take care of routing or data management. For these features, you'll want to use third-party libraries or write your own solutions. This means there are several ways to start a new React project: +React 是一个允许你将 UI 代码有效地组织称为组件的框架。React 不关注路由或者数据管理。对于这些特性，你需要使用第三方库或者书写自己的解决方案。这意味着有几种方法可以启动一个新的 React 项目： -* Start with a **minimal set up with just a toolchain,** adding features to your project as necessary. -* Start with an **opinionated framework** with common functionality already built in. +- 从**最小工具链开始，**如有必要添加新特性到你的项目中。 +- 从一个已经内置了通用功能的**固执己见的框架**开始。 -Whether you're just getting started, looking to build something big, or want to set up your own toolchain, this guide will set you on the right path. +无论你刚刚入门、想要构建大型项目，或者想构建自己的工具链，本指南都会为你指明正确的道路。 -## Getting started with a React toolchain {/*getting-started-with-a-react-toolchain*/} +## 使用 React 工具链入门 {#getting-started-with-a-react-toolchain} -If you're just getting started with React, we recommend [Create React App](https://create-react-app.dev/), the most popular way to try out React's features and a great way to build a new single-page, client-side application. Create React App is an unopinionated toolchain configured just for React. Toolchains help with things like: +如果你刚开始使用 React，我们推荐 [Create React App](https://create-react-app.dev/)，这是试用 React 特性的一种流行方式，也是构建一个单页面，客户端的好办法。Create React App 是一个专为 React 配置坚持己见的工具链。工具链有助于处理以下事情： -* Scaling to many files and components -* Using third-party libraries from npm -* Detecting common mistakes early -* Live-editing CSS and JS in development -* Optimizing the output for production +- 允许扩展许多文件和组件 +- 使用来自 npm 的第三方库 +- 及早地发现常见错误 +- 开发过程中的实时编辑 CSS 和 JS +- 优化生产输出 -You can get started building with Create React App with one line of code in your terminal! (**Be sure you have [Node.js](https://nodejs.org/) installed!**) +你可以在终端通过 Create React App 一行代码来开始构建你的应用！(**确保你已经安装 [Node.js](https://nodejs.org/)！**) @@ -35,7 +37,7 @@ npx create-react-app my-app -Now you can run your app with: +现在可以通过以下方式你的应用： @@ -44,37 +46,37 @@ npm start -For more information, [check out the the official guide](https://create-react-app.dev/docs/getting-started). +想了解更多信息，请 [查阅官方指南](https://create-react-app.dev/docs/getting-started)。 -> Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline. This means you can use it with any backend you want. But if you're looking for more features like routing and server-side logic, read on! +> Create React App 不处理后端逻辑或者数据库；它只是创建了一个前端构建管道。这意味着你可以将它与你想要的任何后端一起使用。但是你正在寻找更多特性，比如路由和服务端渲染逻辑，请继续往下阅读！ -### Other options {/*other-options*/} +### 其它选项 {#other-options-1} -Create React App is great to get started working with React, but if you'd like an even lighter toolchain, you might try one of these other popular toolchains: +Create React App 非常适合开始使用 React，但如果你想要更轻量级的工具链，可以尝试以下流行的工具链： -* [Vite](https://vitejs.dev/guide/) -* [Parcel](https://parceljs.org/) -* [Snowpack](https://www.snowpack.dev/tutorials/react) +- [Vite](https://vitejs.dev/guide/) +- [Parcel](https://parceljs.org/) +- [Snowpack](https://www.snowpack.dev/tutorials/react) -## Building with React and a framework {/*building-with-react-and-a-framework*/} +## 使用 React 和框架构建 {#building-with-react-and-a-framework} -If you're looking to start a bigger, production-ready project, [Next.js](https://nextjs.org/) is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly. +如果你想开始一个大规模、生产可用的项目，[Next.js](https://nextjs.org/) 是一个很好的起点。Next.js 是一个流行的，轻量的使用 React 构建的静态和服务端渲染框架。它预先打包了路由，样式，服务端渲染等特性，可用快速地开始你的项目。 -[Get started building with Next.js](https://nextjs.org/docs/getting-started) with the official guide. +使用官方指南来 [入门 Next.js](https://nextjs.org/docs/getting-started)。 -### Other options {/*other-options-1*/} +### 其它选项 {#other-options-2} -* [Gatsby](https://www.gatsbyjs.org/) lets you generate static websites with React with GraphQL. -* [Razzle](https://razzlejs.org/) is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js. +- [Gatsby](https://www.gatsbyjs.org/) 允许你使用 React 和 GraphQL 生成静态站点。 +- [Razzle](https://razzlejs.org/) 是一个无需任何配置的服务端渲染框架，它提供了比 Next.js 更多的灵活性。 -## Custom toolchains {/*custom-toolchains*/} +## 自定义工具链 {#custom-toolchains} -You may prefer to create and configure your own toolchain. A JavaScript build toolchain typically consists of: +你可能更喜欢创建和配置自己的工具链。一个 JavaScript 构建工具链通常包括： -* A **package manager**—lets you install, updated and manage third-party packages. [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) are two popular package managers. -* A **bundler**—lets you write modular code and bundle it together into small packages to optimize load time. [Webpack](https://webpack.js.org/), [Snowpack](https://www.snowpack.dev/), [Parcel](https://parceljs.org/) are several popular bundlers. -* A **compiler**—lets you write modern JavaScript code that still works in older browsers. [Babel](https://babeljs.io/) is one such example. +- 一个**包管理器**——允许你安装，更新和管理第三方包。[Yarn](https://yarnpkg.com/) 和 [npm](https://www.npmjs.com/) 是两个流行的包管理器。 +- 一个**打包器**——允许你编写模块化代码并将其捆绑到更小的包中来优化加载时间。[Webpack](https://webpack.js.org/)，[Snowpack](https://www.snowpack.dev/)，[Parcel](https://parceljs.org/) 是几个流行的打包器。 +- 一个**编译器**——允许你编写在旧浏览器中可以正常运行的现代 JavaScript 代码。[Babel](https://babeljs.io/) 是其中的一个例子。 -In a larger project, you might also want to have a tool to manage multiple packages in a single repository. [Nx](https://nx.dev/react) is an example of such a tool. +在一个大型项目中，你可以需要一个工具来管理单个存储库中的多个包。[Nx](https://nx.dev/react) 是这种工具的例子。 -If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality. +如果你更喜欢从头开始设置自己的 JavaScript 工具链，对于以函数方式重新创建 React 应用可以 [查阅指南](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658)。 From 925568d4505ee721b74f420aa17bc28fb31fa21c Mon Sep 17 00:00:00 2001 From: watonyweng Date: Mon, 29 Nov 2021 13:00:02 +0800 Subject: [PATCH 2/4] update learn/start-a-new-react-project.md --- beta/src/pages/learn/start-a-new-react-project.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/beta/src/pages/learn/start-a-new-react-project.md b/beta/src/pages/learn/start-a-new-react-project.md index 27142044fb..1f597fcf7c 100644 --- a/beta/src/pages/learn/start-a-new-react-project.md +++ b/beta/src/pages/learn/start-a-new-react-project.md @@ -10,7 +10,7 @@ translators: -## 选择你的冒险 {#choose-your-own-adventure} +## 选择你的冒险 {/*choose-your-own-adventure*/} React 是一个允许你将 UI 代码有效地组织称为组件的框架。React 不关注路由或者数据管理。对于这些特性，你需要使用第三方库或者书写自己的解决方案。这意味着有几种方法可以启动一个新的 React 项目： @@ -19,7 +19,7 @@ React 是一个允许你将 UI 代码有效地组织称为组件的框架。Reac 无论你刚刚入门、想要构建大型项目，或者想构建自己的工具链，本指南都会为你指明正确的道路。 -## 使用 React 工具链入门 {#getting-started-with-a-react-toolchain} +## 使用 React 工具链入门 {/*getting-started-with-a-react-toolchain*/} 如果你刚开始使用 React，我们推荐 [Create React App](https://create-react-app.dev/)，这是试用 React 特性的一种流行方式，也是构建一个单页面，客户端的好办法。Create React App 是一个专为 React 配置坚持己见的工具链。工具链有助于处理以下事情： @@ -50,7 +50,7 @@ npm start > Create React App 不处理后端逻辑或者数据库；它只是创建了一个前端构建管道。这意味着你可以将它与你想要的任何后端一起使用。但是你正在寻找更多特性，比如路由和服务端渲染逻辑，请继续往下阅读！ -### 其它选项 {#other-options-1} +### 其它选项 {/*other-options-1*/} Create React App 非常适合开始使用 React，但如果你想要更轻量级的工具链，可以尝试以下流行的工具链： @@ -58,18 +58,18 @@ Create React App 非常适合开始使用 React，但如果你想要更轻量级 - [Parcel](https://parceljs.org/) - [Snowpack](https://www.snowpack.dev/tutorials/react) -## 使用 React 和框架构建 {#building-with-react-and-a-framework} +## 使用 React 和框架构建 {/*building-with-react-and-a-framework*/} 如果你想开始一个大规模、生产可用的项目，[Next.js](https://nextjs.org/) 是一个很好的起点。Next.js 是一个流行的，轻量的使用 React 构建的静态和服务端渲染框架。它预先打包了路由，样式，服务端渲染等特性，可用快速地开始你的项目。 使用官方指南来 [入门 Next.js](https://nextjs.org/docs/getting-started)。 -### 其它选项 {#other-options-2} +### 其它选项 {/*other-options-2*/} - [Gatsby](https://www.gatsbyjs.org/) 允许你使用 React 和 GraphQL 生成静态站点。 - [Razzle](https://razzlejs.org/) 是一个无需任何配置的服务端渲染框架，它提供了比 Next.js 更多的灵活性。 -## 自定义工具链 {#custom-toolchains} +## 自定义工具链 {/*custom-toolchains*/} 你可能更喜欢创建和配置自己的工具链。一个 JavaScript 构建工具链通常包括： From f70ffaed276bb6467fcd0d46039ce681c7c30fea Mon Sep 17 00:00:00 2001 From: QC-L Date: Fri, 27 May 2022 16:03:14 +0800 Subject: [PATCH 3/4] docs(cn): optimized translation --- .../pages/learn/start-a-new-react-project.md | 62 +++++++++---------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/beta/src/pages/learn/start-a-new-react-project.md b/beta/src/pages/learn/start-a-new-react-project.md index e058e89840..a05eab44f9 100644 --- a/beta/src/pages/learn/start-a-new-react-project.md +++ b/beta/src/pages/learn/start-a-new-react-project.md @@ -1,37 +1,38 @@ --- -title: 开始一个 React 新项目 +title: 启动一个新的 React 项目 translators: - watonyweng + - QC-L --- -If you're starting a new project, we recommend to use a toolchain or a framework. These tools provide a comfortable development environment but require a local Node.js installation. +如果你打算启动一个新项目，我们建议使用工具链或框架。这些工具提供了非常舒适的开发环境，但前提是需要在本地安装 Node.js。 -* How toolchains are different from frameworks -* How to start a project with a minimal toolchain -* How to start a project with a fully-featured framework -* What's inside popular toolchains and frameworks +* 工具链与框架有何不同 +* 如何用极简的工具链启动一个项目 +* 如何用功能齐全的框架启动一个项目 +* 流行的工具链和框架有哪些 -## Choose your own adventure {/*choose-your-own-adventure*/} +## 选择适合你的方案 {/*choose-your-own-adventure*/} -React is a library that lets you organize UI code by breaking it apart into pieces called components. React doesn't take care of routing or data management. This means there are several ways to start a new React project: +React 是一个库，可以让你通过将 UI 代码分解成一个个组件的方式来组织它。但 React 并不负责路由或者数据管理。这意味着有几种方案来启动一个 React 新项目： -* [Start with an **HTML file and a script tag**.](/learn/add-react-to-a-website) This doesn't require Node.js setup but offers limited features. -* Start with a **minimal toolchain,** adding more features to your project as you go. (Great for learning!) -* Start with an **opinionated framework** that has common features like data fetching and routing built-in. +* 从 [**HTML 文件和 script 标签开始**](/learn/add-react-to-a-website)。这种方案无需 Node.js 配置，但提供的功能有限。 +* 从一款 **极简的工具链** 开始，可以在你的项目中加入更多的功能。（非常适合学习入门！） +* 从一款 **功能齐全的框架** 开始，它内置了数据获取以及路由等常见功能。 -## Getting started with a minimal toolchain {/*getting-started-with-a-minimal-toolchain*/} +## 快速入门极简工具链 {/*getting-started-with-a-minimal-toolchain*/} -If you're **learning React,** we recommend [Create React App](https://create-react-app.dev/). It is the most popular way to try out React and build a new single-page, client-side application. It's made for React but isn't opinionated about routing or data fetching. +如果你正在 **学习 React**，我们推荐使用 [Create React App](https://create-react-app.dev/)。它是尝试 React 以及创建单页客户端应用的最流行方案。它是为 React 量身打造的，但缺点是不支持路由以及数据获取。 -First, install [Node.js](https://nodejs.org/en/). Then open your terminal and run this line to create a project: +首先，你需要安装 [Node.js](https://nodejs.org/en/)。接着打开你的终端，并运行这行命令来创建一个新项目： @@ -39,7 +40,7 @@ npx create-react-app my-app -现在可以通过以下方式你的应用： +现在可以通过以下方式运行你的应用： @@ -50,20 +51,20 @@ npm start 想了解更多信息，请 [查阅官方指南](https://create-react-app.dev/docs/getting-started)。 -> Create React App doesn't handle backend logic or databases. You can use it with any backend. When you build a project, you'll get a folder with static HTML, CSS and JS. Because Create React App can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead. +> Create React App 不处理任何后端逻辑或数据库。你可以把它与任何后端搭配使用。当你创建一个项目时，你会得到一个包含静态 HTML、CSS 和 JS 的文件夹。因为 Create React App 不能利用服务器优势，它不能提供最好的性能。如果你正在寻找更快的加载时间，以及完善的内置功能，如路由和服务端处理逻辑，我们推荐你使用框架代替。 -### Popular alternatives {/*popular-alternatives*/} +### 主流备选方案 {/*popular-alternatives*/} * [Vite](https://vitejs.dev/guide/) * [Parcel](https://parceljs.org/) -## Building with a full-featured framework {/*building-with-a-full-featured-framework*/} +## 使用开箱即用的框架来构建 {/*building-with-a-full-featured-framework*/} -If you're looking to **start a production-ready project,** [Next.js](https://nextjs.org/) is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly. +如果你想 **启动一个用于生产的项目**，[Next.js](https://nextjs.org/) 是你的首选。Next.js 是一款流行且轻量级的框架，用于使用 React 来构建静态和服务端渲染程序。它内置了路由、样式和服务端渲染等功能，可以快速启动和运行你的项目。 -The [Next.js Foundations](https://nextjs.org/learn/foundations/about-nextjs) tutorial is a great introduction to building with React and Next.js. +[Next.js 基础教程](https://nextjs.org/learn/foundations/about-nextjs) 是对使用 React 和 Next.js 进行构建的一个完美诠释。 -### Popular alternatives {/*popular-alternatives*/} +### 主流备选方案 {/*popular-alternatives*/} * [Gatsby](https://www.gatsbyjs.org/) * [Remix](https://remix.run/) @@ -71,15 +72,14 @@ The [Next.js Foundations](https://nextjs.org/learn/foundations/about-nextjs) tut ## 自定义工具链 {/*custom-toolchains*/} -You may prefer to create and configure your own toolchain. A toolchain typically consists of: +你可能喜欢创建和配置你自己的工具链，一个工具链通常由以下部分组成： -* A **package manager** lets you install, update, and manage third-party packages. Popular package managers: [npm](https://www.npmjs.com/) (built into Node.js), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/). -* A **compiler** lets you compile modern language features and additional syntax like JSX or type annotations for the browsers. Popular compilers: [Babel](https://babeljs.io/), [TypeScript](http://typescript.org/), [swc](https://swc.rs/). -* A **bundler** lets you write modular code and bundle it together into small packages to optimize load time. Popular bundlers: [webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/), [esbuild](https://esbuild.github.io/), [swc](https://swc.rs/). -* A **minifier** makes your code more compact so that it loads faster. Popular minifiers: [Terser](https://terser.org/), [swc](https://swc.rs/). -* A **server** handles server requests so that you can render components to HTML. Popular servers: [Express](https://expressjs.com/). -* A **linter** checks your code for common mistakes. Popular linters: [ESLint](https://eslint.org/). -* A **test runner** lets you run tests against your code. Popular test runners: [Jest](https://jestjs.io/). - -If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality. A framework will usually also provide a routing and a data fetching solution. In a larger project, you might also want to manage multiple packages in a single repository with a tool like [Nx](https://nx.dev/react). +* 一款 **包管理器（package manager）** 可以让你安装、更新并管理第三方软件包。主流的包管理器有：[npm](https://www.npmjs.com/)（内置于 Node.js）中，[Yarn](https://yarnpkg.com/)，[pnpm](https://pnpm.io/)。 +* 一款 **编译器（compiler）** 可以让你编译现代语法特性和额外语法特性，如 JSX 或浏览器的类型注释。主流的编译器有：[Babel](https://babeljs.io/)，[TypeScript](http://typescript.org/)，[swc](https://swc.rs/)。 +* 一款 **捆绑器（bundler）** 可以编写模块化代码并将其进行捆绑到小包中，以优化加载时间。主流的捆绑器有：[webpack](https://webpack.js.org/)，[Parcel](https://parceljs.org/)，[esbuild](https://esbuild.github.io/)，[swc](https://swc.rs/). +* 一款 **压缩工具（minifier）** 可以使你的代码体积更小，从而提高加载速度。主流的压缩工具有：[Terser](https://terser.org/)，[swc](https://swc.rs/)。 +* 一款 **服务端框架** 处理服务器请求，以便于将组件渲染成 HTML。主流的服务端框架有：[Express](https://expressjs.com/)。 +* 一款 **代码检查工具（linter）** 用于检查你的代码是否包含常见错误。主流的代码检查工具有： [ESLint](https://eslint.org/)。 +* 一款 **测试框架（test runner）** 用于对你的代码进行测试。主流测测试框架：[Jest](https://jestjs.io/)。 +如果你喜欢从 0 开始搭建自己的 JavaScript 工具链，[请参阅这篇指南](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658)，它重新编写了 Create React App 的功能。一个框架通常也会提供路由和数据获取的解决方案。在一个较大的项目中，你可能还需要用到类似 [Nx](https://nx.dev/react) 这样的工具来管理一个仓库中的多个包。 From f08c89db241019fdd08ae07fb13d54a123ef423c Mon Sep 17 00:00:00 2001 From: QC-L Date: Fri, 27 May 2022 16:05:14 +0800 Subject: [PATCH 4/4] docs(cn): sync with article title --- beta/src/sidebarLearn.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json index 8a5fbcb8b9..580f1ee887 100644 --- a/beta/src/sidebarLearn.json +++ b/beta/src/sidebarLearn.json @@ -12,7 +12,7 @@ "path": "/learn/installation", "routes": [ { - "title": "开始一个新的 React 项目", + "title": "启动一个新的 React 项目", "path": "/learn/start-a-new-react-project" }, {