如何将 React 组件添加到由 HTML 和 CSS 组成的简单网页？答案

【问题标题】：How can I add a react component to a simple webpage made up of HTML and CSS?如何将 React 组件添加到由 HTML 和 CSS 组成的简单网页？
【发布时间】：2020-11-15 23:05:54
【问题描述】：

我想创建一个简单的网页，显示用户可以滑过的轮播/图片库。

可以在 reactjsexample.com，here 上找到可用于执行此操作的 react 组件。

我已经查看了“将 React 添加到网站”tutorial，但我无法弄清楚我需要编辑和保存什么 JS 文件才能让它显示在网页上。

我已经尝试添加 react 和 react dom 开发脚本，

然后将以下内容添加到 Playground.js 文件中：

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

page_contents 是我的 html 页面中的一个 div id。

但是，轮播仍然没有出现。

我觉得添加 React 组件可能比“将 React 添加到网站”教程中解释的要复杂得多。

如果有人可以帮助我弄清楚如何使用 reactjsexample.com 中的组件，将不胜感激。

谢谢！

【问题讨论】：

reactjs.org/docs/getting-started.html
嗨，欢迎来到 Stack Overflow。请在您的问题正文中包含您迄今为止生成的任何相关代码作为 sn-p。加载 React 脚本标签的 HTML 页面和放置 React 代码的任何辅助 JS 文件都会很有用。

标签： javascript html css reactjs

【解决方案1】：

如果您密切关注本教程，您会发现它建立在一些“入门代码”之上。我在下面的屏幕截图中以红色概述了文档的相关部分。

也就是说，您的 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'));

【讨论】：

【解决方案2】：

如果我可以建议开始使用 react 的最佳方式是加入 create-react-app 潮流。这将为您设置好一切。

npx create-react-app name-of-app

【讨论】：

当然可以。但是对于初学者来说，该命令的整个项目都在 .js 中。所以至少在我写这篇文章的时候，在线官方教程并没有这样做。所以我可以理解这种困惑。
啊。有道理。