React 开始使用

Z时代
2024-01-10
分类：综合

hello world

下面的例子让你最快的速度知道怎么使用 React 来运行一个 hello world。

首先定义一个 index.html：

引用依赖的两个 react 源文件

在界面定义一个按钮 id 为 like_button_container

另外引入第三个自定义的 js 文件：like_button.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>
    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!-- Load our React component. -->
    <script src="like_button.js"></script>
  </body>
</html>

然后定义 like_button.js 的内容，它做到事情很简单：

定义组件LikeButton继承自 React.Component

维护一个叫 liked 的属性，默认值为false

定义一个render函数，liked为true的时候返回文本You liked this.

借用 React.createElement方法，创建一个类型为button文案为Like的按钮

点击button的时候，将 liked 设置为true

'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);

使用 JSX

为了在浏览器中使用 JSX，需要首先在 index.html 增加

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

同样需要修改对应 script 的 type：

<script type="text/babel" src="like_button.js"></script>

最后就可以在like_button.js中直接使用JSX了：

'use strict';
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }
    return (
      <button onClick={() => this.setState({ liked: true })}>
        Like
      </button>
    );
  }
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);

对应完整的 index.html 为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>
    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!-- Load our React component. -->
    <script type="text/babel" src="like_button.js"></script>
  </body>
</html>