发布于 2026-01-06 2 阅读
0

只需一个文件即可完成 React 开发环境的搭建!

只需一个文件即可完成 React 开发环境的搭建!

你好呀!

你觉得这篇文章的标题是标题党,内容不可能是真的吗?🤷🏽‍♂️

嗯,几天前我也是这么想的。但后来我发现事实并非如此。我们完全可以开发和编写一些简易的、小规模的React 应用,而无需使用create-react-app甚至webpack

你只需要一个html文件!

以下是该文件的内容:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>single page react boilerplate</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="kokaneka">
</head>

<body>
  <div id="place-app"> </div>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script type="text/babel">
    var App = (props) => {
            return (
                <div >
                    Hello Universe!
                </div>
            );
        };
        ReactDOM.render(
            App(),
            document.getElementById('place-app')
        );
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

就是这样!使用上面的文件,您可以随意使用 React,并在浏览器中打开 html 文件来查看用户界面。

以下是关于此装置中发生的奇妙现象的详细信息。

  • 我们使用CDN链接来导入reactreact-DOM。
  • 我们对 Babel 也采取了同样的做法。
  • 在内部编写 React 组件使用getElementById在占位符 div 的位置添加标签并渲染

就这样,你的 React 开发之旅继续吧!如果你喜欢这篇文章,不妨看看其他一些你可能感兴趣的内容:

干杯!

文章来源:https://dev.to/kokaneka/react-development-using-just-a-single-file-5e65