Add React in One Minute

` 标签作为标记你想要用 React 显示内容的位置。例如： ```html

``` 我们给这个 `

` 加上唯一的 `id` HTML 属性。这将允许我们稍后用 JavaScript 代码找到它，并在其中显示一个 React 组件。 ### 步骤 2：添加 Script 标签接下来，在 `` 结束标签之前，向 HTML 页面中添加三个 ` ``` 前两个标签加载 React。第三个将加载你的组件代码。 **HTML 的完整示例**： ```html Add React in One Minute

Add React in One Minute

This page demonstrates using React with no build tooling.

React is loaded as a script tag.

``` ### 步骤 3：创建一个 React 组件在 HTML 页面文件的同级目录下创建一个名为 `like_button.js` 的文件： ```javascript 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); ``` 这段代码会找到我们在步骤 1 中添加到 HTML 里的 `

`，然后在它内部显示我们的 React 组件 “Like” 按钮。 ## 复用组件的示例 > 示例源码： HTML： ```html Add React in One Minute

Add React in One Minute

This page demonstrates using React with no build tooling.

React is loaded as a script tag.

This is the first comment.

This is the second comment.

This is the third comment.

``` JavaScript ： ```javascript 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked comment number ' + this.props.commentID; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } // Find all DOM containers, and render Like buttons into them. document.querySelectorAll('.like_button_container') .forEach(domContainer => { // Read the comment ID from a data-* attribute. const commentID = parseInt(domContainer.dataset.commentid, 10); ReactDOM.render( e(LikeButton, { commentID: commentID }), domContainer ); }); ``` ## 为生产环境压缩 JavaScript 代码在将你的网站部署到生产环境之前，要注意未经压缩的 JavaScript 可能会显著降低用户的访问速度。如果你已经压缩了应用代码，如果你确保已部署的 HTML 加载了以 `production.min.js` 结尾的 React 版本，那么\*\*你的网站是生产就绪（production-ready）\*\*的： ```javascript ``` 压缩代码的步骤可参考[这个 gist](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3) 。 ## 可选：使用 React 和 JSX 在上面的示例中，我们只依赖了浏览器原生支持的特性。这就是为什么我们使用了 JavaScript 函数调用来告诉 React 要显示什么： ```javascript const e = React.createElement; // 显示一个 "Like" ); ``` ### 快速尝试 JSX 在项目中尝试 JSX 最快的方法是在页面中添加这个 ` ``` 现在，你可以在任何 `

``` 这种方式适合于学习和创建简单的示例。然而，它会使你的网站变慢，并且**不适用于生产环境**。当你准备好更进一步时，删除你添加的这个新的 `