簡體   English   中英

如何將 React 組件添加到由 HTML 和 CSS 組成的簡單網頁?

[英]How can I add a react component to a simple webpage made up of HTML and CSS?

我想創建一個簡單的網頁,顯示用戶可以滑動的輪播/圖片庫。

可用於執行此操作的 react 組件可以在 reactjsexample.com 上找到, 這里

我已經閱讀了“將 React 添加到網站”教程,但我不知道需要編輯和保存哪個 JS 文件才能將其顯示在網頁上。

我嘗試添加 react 和 react dom 開發腳本,

然后將以下內容添加到 Playground.js 文件中:

ReactDOM.render(e(ItemsCarouselPlayground), document.getElementById('page_contents'));

其中page_contents是我的 html 頁面中的 div id。

但是,輪播仍然沒有出現。

我覺得添加 React 組件可能比“將 React 添加到網站”教程中解釋的要復雜得多。

如果有人能幫我弄清楚如何使用 reactjsexample.com 中的組件,我將不勝感激。

謝謝!

如果我可以建議開始 React 的最佳方法是跳上 create-react-app 潮流。 這將為您設置一切。

npx create-react-app name-of-app

如果您密切關注本教程,您會發現它建立在一些“入門代碼”之上。 我在下面的屏幕截圖中用紅色概述了文檔的相關部分。

也就是說,您的 Playground.js 文件應該看起來像這樣:

'use strict';

const e = React.createElement;


// TODO: customise class
class ItemsCarouselPlayground 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'
    );
  }
}

ReactDOM.render(e(ItemsCarouselPlayground), 
  document.getElementById('page_contents'));

在此處輸入圖片說明

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM