From f664d3bca494e0ee619025dc2b8245048d51ebe6 Mon Sep 17 00:00:00 2001 From: atrist Date: Thu, 4 Nov 2021 11:03:53 +0800 Subject: [PATCH 01/18] docs: add-react-to-a-website --- .../src/pages/learn/add-react-to-a-website.md | 156 +++++++++--------- 1 file changed, 79 insertions(+), 77 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 18da6d843d..a601db3177 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,58 @@ --- -title: Add React to a Website +title: 在网站中添加 React +translators: + - Atrist --- -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 。无论你是使用微前端，已有项目，还是仅仅想尝试一下 React，你只需要几行代码便可以将 React 添加到你的 HTML 页面--无需构建工具！ -## 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 +### 步骤 1：添加一个 DOM 容器到 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 +### 步骤 2：添加 Script 标签 -In the HTML page, right before the closing `` tag, add three ` ``` -### Step 3: Create a React component +### 步骤 3：创建一个 React 组件 -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 +74,26 @@ function LikeButton() { } ``` -### Step 4: Add your React Component to the page +### 步骤 4： 把你的 React 组件添加到网站中 -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 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 +107,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 +### 步骤 5: 为生产环境压缩 JavaScript 代码 -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 +## 使用 React 和 JSX {#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 +### 尝试 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 +152,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**, 用 +```jsx +return ; +``` +替换 ```js return React.createElement( 'button', @@ -176,63 +182,59 @@ return React.createElement( ); ``` -with: -```jsx -return ; -``` -2. In **index.html**, add `type="text/babel"` to the like button's script tag: +1. 在 **index.html**，为 link_button_js 的` script` 标签添加 `type="text/babel"` 属性 : ```html ``` -Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) that you can download and play with. +这是 [一个使用了 JSX 的 HTML 文件的例子](https://raw.githubusercontent.com/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 ` @@ -123,19 +123,19 @@ ReactDOM.render( ## 使用 React 和 JSX {/*try-react-with-jsx*/} -在上面的示例中，我们只依赖了浏览器原生支持的特性。 这就是为什么我们在 **like_button.js** 中调用了 一个 JavaScript 函数来告诉 React 要显示什么： +在上面的示例中，我们只依赖了浏览器原生支持的特性。 这就是为什么我们在 **like_button.js** 中用一个 JavaScript 函数调用来告诉 React 要显示什么： ```js return React.createElement('button', {onClick: () => setLiked(true)}, 'Like'); ``` -然而，React 还提供了一种使用 [JSX](/learn/writing-markup-with-jsx) 编写界面的方式，，一种类于 HTML 的 JavaScript 语法： +然而，React 还提供了一种使用 [JSX](/learn/writing-markup-with-jsx) 编写界面的方式，一种类似 HTML 的 JavaScript 语法： ```jsx return ; ``` -这两段代码是等价的。 JSX 是一种在 JavaScript 中描述标签的语法。多数人觉得这样编写 UI 代码更方便 —— 无论是使用 React 还是其它库。您可能会在其他项目中发现 “标签在 JavaScript 中随处散布”！ +这两段代码是等价的。JSX 是一种在 JavaScript 中描述标记的语法。多数人觉得这样编写 UI 代码更方便 —— 无论是使用 React 还是其它库。你可能会在其他项目中看到 “JavaScript 中到处散布着标记”！ > 你可以通过 [在线转换器](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。 @@ -155,7 +155,7 @@ return ; ``` -现在，你可以在任何 ` @@ -192,13 +192,13 @@ return React.createElement( 这是 [一个使用了 JSX 的 HTML 文件的例子](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) ，你可以下载并尝试使用。 -这种方式适合于学习和创建简单的示例。然而，它会使你的网站变慢，并且不适用**于生产环境**。当你准备好更进一步时，删除你添加的这个新的 ` ``` -使用 JSX 编写 **like_button.js**: +使用 JSX 编写 **like_button.js**： 1. 在 **like_button.js** 文件中，用 @@ -184,13 +185,13 @@ return React.createElement( -2. 在 **index.html** 文件中，为 link_button_js 的 `script` 标签添加 `type="text/babel"` 属性: +2. 在 **index.html** 文件中，为 link_button_js 的 `script` 标签添加 `type="text/babel"` 属性： ```html ``` -这是 [一个使用了 JSX 的 HTML 文件的例子](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) ，你可以下载并尝试使用。 +这是 [一个使用了 JSX 的 HTML 文件的例子](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html)，你可以下载并尝试使用。 这种方式适合于学习和创建简单的示例。然而，它会使你的网站变慢，并且**不适用于生产环境**。当你准备好更进一步时，删除你添加的这个新的 ` ``` -这是 [一个使用了 JSX 的 HTML 文件的例子](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html)，你可以下载并尝试使用。 +这是 [一个使用了 JSX 的 HTML 文件示例](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html)，你可以下载并尝试使用。 这种方式适合于学习和创建简单的示例。然而，它会使你的网站变慢，并且**不适用于生产环境**。当你准备好更进一步时，删除你添加的这个新的 ` ``` -## 使用 React 和 JSX {/*try-react-with-jsx*/} +## 尝试使用 JSX 编写 React {/*try-react-with-jsx*/} -在上面的示例中，我们只依赖了浏览器原生支持的特性。 这就是为什么我们在 **like_button.js** 中用一个 JavaScript 函数调用来告诉 React 要显示什么： +在上面的示例中，依靠的是浏览器原生就支持的特性。这也就是为什么我们在 **like_button.js** 中要调用 JavaScript 的函数，用以告知 React 要显示的内容： ```js return React.createElement('button', {onClick: () => setLiked(true)}, 'Like'); @@ -136,13 +137,13 @@ return React.createElement('button', {onClick: () => setLiked(true)}, 'Like'); return ; ``` -这两段代码是等价的。JSX 是一种在 JavaScript 中描述标记的语法。多数人觉得这样编写 UI 代码更方便 —— 无论是使用 React 还是其它库。你可能会在其他项目中看到 “JavaScript 中到处散布着标记”！ +这两段代码是等价的。JSX 是一种在 JavaScript 中描述标签的语法。多数人觉得这样编写 UI 代码更方便 —— 无论是使用 React 还是其它库。你可能会在其他项目中看到 “混在 JavaScript 代码中的标签”！ > 你可以通过 [在线转换器](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。 -### 尝试 JSX {/*try-jsx*/} +### 试用 JSX {/*try-jsx*/} -在项目中尝试 JSX 最快的方法是在页面中添加这几个 `