reactjs 无webpack的React设置

dy1byipe  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(139)

我正在尝试在没有CRA的情况下建立React项目
之前,我已经成功地使用CDN设置了reactApp,所以这一次,我只想使用npm设置reactApp。
我安装了react,react-dom由npm.和index.html下面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script type="module" src="./src/index.js"></script>
  </body>
</html>

下面的index.js

import React from "/react";
import { ReactDOM } from "react-dom";

const createEle = React.createElement;

const domContainer = document.querySelector("#root");
const root = ReactDOM.createRoot(domContainer);

root.render(createEle(LikeButton));

function LikeButton() {
  const [liked, setLike] = React.useState(false); //

  if (liked) {
    domContainer.style.backgroundColor = "red";
    return createEle("button", { onClick: () => setLike(false) }, "Hate");
  } else {
    domContainer.style.backgroundColor = "green";

    return createEle("button", { onClick: () => setLike(true) }, "Like");
  }
}

我不想用网络包,Babel。
但是我打开index.html之后就不行了,设置了webpack之后才行。
那么webpack是如何让reactApp活起来的呢?
很多人说,要设置reactApp没有CRA,它需要webpack,因为它捆绑了这么多复杂的文件。
但在我的情况下,我简化了应用程序,我只想运行它。
我想知道webpack在我的案例中的作用。(在这种情况下我需要webpack的目的

tp5buhyn

tp5buhyn1#

Webpack注入reactreactdom源代码
要在没有webpack或其他模块捆绑器的情况下使用它,您需要添加react源代码
React cdn用于开发

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

将cdn用于生产

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

一个二个一个一个

相关问题