编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

搭建一个无需构建工具的 React 页面

wxchong 2025-01-03 19:24:01 开源技术 617 ℃ 0 评论

通常我们会使用 Webpack 或 Vite 等构建工具，先把 React 源码转译为普通 JavaScript，然后才能在页面使用。如果你想快速验证一个 React 特性，使用构建工具多少有点重，下面介绍一种无需构建工具又能使用 React 的轻量级方法。

这个方法来自 Next.js 官方提供的《React Foundations》教程。

首先，在页面引入两个 React 核心脚本。

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

然后，引入 Babel 编译器脚本。它可以在线编译 JSX 语法。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

JSX 语法的代码需要放在 <script type="text/jsx"> 中，这是 Babel 感兴趣的类型。

<div id="app"></div>
<script type="text/jsx">
  const el = document.queryElementById('app')
  const root = ReactDOM.createRoot(el)
  root.render(<h1>Hello, React!</h1>)
</script>

换一个稍微复杂的 React 应用，完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Run React without bundler</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/jsx">
      const el = document.getElementById('app');
      const root = ReactDOM.createRoot(el);
      root.render(<Counter />);

      function Counter() {
        const [count, setCount] = React.useState(0);

        function handleClick() {
            setCount(c => c + 1);
        }

        return (
            <section>
                <span>count: {count}</span>{' '}
                <button onClick={handleClick}>ADD</button>
            </section>
        );
      }
    </script>
  </body>
</html>

参考链接

  • React Foundations, https://nextjs.org/learn/react-foundations/getting-started-with-react

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2