React

mChales...發表於2020-11-23
React

一、react 的三種使用方法

1、在 html 中使用 react

（1）、建立並使用 react 元件

<!DOCTYPE html>
<html>

// html 中
<head>
  <meta charset="UTF-8" />
  <title>第一次使用 react</title>
</head>

<body>
  <h2>初識 react</h2>
  <!-- 我們將把 React 元件放在這個 div 中。 -->
  <div id="like_button_container"></div>

  <!-- 載入 React. -->
  <!-- 注意: 部署時，將 "development.js" 替換為 "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>

  <!-- 載入我們的 React 元件。 -->
  <script src="like_button.js"></script>
  
  <!-- 本HTML的JS程式碼應該放在這裡 -->
  <script>
  
  </script>
</body>

</html>

react 的元件中：

// like_button.js
"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 '前路浩浩蕩蕩';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      '點我有喜'
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

 （2）、重用 react 元件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>第二次使用 react</title>
</head>

<body>
    <p>
        first
        <div class="like_button_container" data-commentid="1"></div>
    </p>

    <p>
        second
        <div class="like_button_container" data-commentid="2"></div>
    </p>

    <p>
        third
        <div class="like_button_container" data-commentid="3"></div>
    </p>

    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <!-- 載入我們的 React 元件。 -->
    <script src="like_button.js"></script>

</body>

</html>

react 的元件中：

// like_button.js
'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 ' ' + this.props.commentID;
        }

        return e(
            'button',
            { onClick: () => this.setState({ liked: true }) },
            '告訴你個祕密'
        );
    }
}

// 找到所有的DOM容器，並像按鈕一樣呈現在其中。
document.querySelectorAll('.like_button_container')
    .forEach(domContainer => {
        // 從data-*屬性中讀取註釋ID。
        const commentID = parseInt(domContainer.dataset.commentid, 10);
        ReactDOM.render(
            e(LikeButton, { commentID: commentID }),
            domContainer
        );
    });

2、結合 JSX 使用 react

 

3、通過工具使用 react

 

 

相關文章