React.js 与 html 合并答案

【问题标题】：React.js merging with htmlReact.js 与 html 合并
【发布时间】：2020-12-17 21:45:49
【问题描述】：

我和我的朋友目前正在做一个小项目，我们刚刚开始作为程序员的旅程，并且具备 html、CSS 和 JavaScript 的中级知识。在我们的项目中，我们想开发一个聊天系统作为我们项目的一部分，我们找到了一个 Udemy 课程，但它使用 react 作为我想问的技术，我们可以在 html 中创建一个网页，在 react 中创建一个网页并将它们合并为一个网站？

【问题讨论】：

如果两者是一前一后发展起来的，一起，关于彼此，那么是的。如果两个人各自写一个网站一周，然后你尝试合并他们，这仍然是可能的，但会带来巨大的痛苦，你宁愿避免这种痛苦。

标签： javascript html reactjs

【解决方案1】：

您可以将多个 React 组件放在您分配的不同 <div> 中，并使用现有的 html、css 和 js 内容。

const App1 = () => (
  <div>
    <h2>The React App 1</h2>
  </div>
);

const App2 = () => (
  <div>
    <h2>The React App 2</h2>
  </div>
);

ReactDOM.render(<App1 />, document.querySelector("#react-app-1"));
ReactDOM.render(<App2 />, document.querySelector("#react-app-2"));

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #fff;
}
.react-app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react-app-1" class="react-app"></div>
<div>
  <h2>What is Lorem Ipsum?</h2>
  <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div id="react-app-2" class="react-app"></div>

【讨论】：

【解决方案2】：

我想问一下，我们可以在 html 中创建一个网页，而在 react 中创建另一个网页并将它们合并为一个网站吗？

是的，您可以这样做，原因有两个：

如果您愿意（或根本不使用），网站的单独页面可以使用完全不同的客户端库、框架等，并且
更重要的是：您只能将 React 用于页面的一部分。你告诉 React 将它的顶级组件挂载到哪个 DOM 元素中。它不必是 document.body（事实上，它通常不是）。通常这是通过 ReactDOM.render 调用来完成的——第二个参数表示将顶级 React 组件放入哪个元素。

【讨论】：