From cc0fcb6f188853b18553fb2150413d6debabefc8 Mon Sep 17 00:00:00 2001 From: seognil LC Date: Sat, 16 Feb 2019 22:54:47 +0800 Subject: [PATCH 1/8] docs(cn): translate content/docs/add-react-to-a-website.md into Chinese --- content/docs/add-react-to-a-website.md | 150 ++++++++++++------------- 1 file changed, 75 insertions(+), 75 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 11b99d37aa..8c0bcd3aae 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,6 +1,6 @@ --- id: add-react-to-a-website -title: Add React to a Website +title: 在网站中添加 React permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" @@ -8,127 +8,127 @@ prev: getting-started.html next: create-a-new-react-app.html --- -Use as little or as much React as you need. +根据需要或多或少地使用 React。 -React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that. +React 从一开始就被设计为逐步采用，并且**你可以根据需要或多或少地使用 React**。可能你只想在现有页面中“点缀一些交互性”。使用 React 组件是一种不错的方式。 -The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. +大多数网站不是、也不需要是单页应用程序。**用几行代码以及不用构建工具**，试试在你的网站的一小部分中使用 React。然后，你可以逐步扩展它的存在，或只将其涵盖在少数动态部件中。 --- -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +- [在一分钟内添加 React](#add-react-in-one-minute) +- [可选：使用 React 和 JSX](#optional-try-react-with-jsx) (不需要打包工具！) -## Add React in One Minute {#add-react-in-one-minute} +## 在一分钟内添加 React {#add-react-in-one-minute} -In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice. +在本小节中，我们将展示如何将 React 组件添加到现有的 HTML 页面中。你可以基于自己现有的网站，或创建一个空的 HTML 文件来练习。 -There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.** +不会涉及复杂的工具或安装需求 —— **完成这一节的内容，你只需要连接到网络，以及一分钟的时间。** -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +可选：[下载完整示例（2KB zipped）](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) -### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html} +### 步骤 1： 添加一个 DOM 容器到 HTML {#step-1-add-a-dom-container-to-the-html} -First, open the HTML page you want to edit. Add an empty `
` tag to mark the spot where you want to display something with React. For example: +首先，打开你想要编辑的 HTML 页面。添加一个空的 `
` 标签作为标记你想要用 React 显示内容的位置。例如： ```html{3} - +
- + ``` -We gave this `
` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it. +我们给这个 `
` 加上唯一的 `id` HTML 属性。这将允许我们稍后用 JavaScript 代码找到它，并在其中显示一个 React 组件。 ->Tip +> 提示 > ->You can place a "container" `
` like this **anywhere** inside the `` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers. +> 你可以像这样在 `` 标签内的**任意位置**放置一个“容器” `
`。根据需要，你可以在一个页面上放置多个独立的 DOM 容器。它们通常是空标签 —— React 将替换 DOM 容器内的任何现有内容。 -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### 步骤 2：添加 Script 标签 {#step-2-add-the-script-tags} -Next, add three ` - + ``` -The first two tags load React. The third one will load your component code. +前两个标签加载 React。第三个将加载你的组件代码。 -### Step 3: Create a React Component {#step-3-create-a-react-component} +### 步骤 3：创建一个 React 组件 {#step-3-create-a-react-component} -Create a file called `like_button.js` next to your HTML page. +在 HTML 页面文件的同级目录下创建一个名为 `like_button.js` 的文件。 -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. +打开 **[这个入门代码](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** 并粘贴到你创建的文件中。 ->Tip +> 提示 > ->This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! +> 这段代码定义了一个名为 `LikeButton` 的 React 组件。如果你还不明白这段代码的意思，不用担心 —— 我们将在后面的 [入门教程](/tutorial/tutorial.html) 和 [核心概念](/docs/hello-world.html) 中介绍 React 的构建块。现在，让我们只是把它显示在屏幕上！ -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +在 `like_button.js` 的底部，在 **[入门代码](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** 之后，加入以下两行代码。 ```js{3,4} -// ... the starter code you pasted ... +// ... 你粘贴的入门代码 ... const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); ``` -These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. +这两行代码会找到我们在步骤 1 中添加到 HTML 里的 `
`，然后在它内部显示我们的 “Like” 按钮 React 组件。 -### That's It! {#thats-it} +### 就是这么简单！ {#thats-it} -There is no step four. **You have just added the first React component to your website.** +没有第四步了。**你刚刚已经将第一个 React 组件添加到你的网站中。** -Check out the next sections for more tips on integrating React. +查看后续小节，以便查看关于集成 React 的更多提示。 -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +**[查看完整的示例源码](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[下载完整示例（2KB zipped）](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### 提示：重用一个组件 {#tip-reuse-a-component} -Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it: +通常，你可能希望在 HTML 页面的多个位置展示 React 组件。下面是一个示例，它显示了三次 “Like” 按钮，并向各自传入了一些数据： -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[查看完整的示例源码](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[下载完整示例（2KB zipped）](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) ->Note +> 注意 > ->This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead. +> 当页面中以 React 驱动的不同部分是相互独立的时候，这种策略通常非常有用。在 React 代码中，使用 [组件组合（component composition）](/docs/components-and-props.html#composing-components) 来实现会更容易。 -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### 提示：为生产环境压缩 JavaScript 代码 {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users. +在将你的网站部署到生产环境之前，请注意，未压缩的 JavaScript 可能会显著降低用户的页面速度。 -If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: +如果你已经压缩了应用代码，如果你确保已部署的 HTML 加载了以 `production.min.js` 结尾的 React 版本，那么**你的网站是生产就绪的**： ```js ``` -If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +如果你没有一个代码压缩的步骤，[这有一个配置它的方式](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3)。 -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## 可选：使用 React 和 JSX {#optional-try-react-with-jsx} -In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: +在上面的示例中，我们只依赖了浏览器原生支持的特性。这就是为什么我们使用了 JavaScript 函数调用来告诉 React 要显示什么： ```js const e = React.createElement; -// Display a "Like"