只需一个文件即可完成 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>
就是这样!使用上面的文件,您可以随意使用 React,并在浏览器中打开 html 文件来查看用户界面。
以下是关于此装置中发生的奇妙现象的详细信息。
- 我们使用CDN链接来导入react和react-DOM。
- 我们对 Babel 也采取了同样的做法。
- 在内部编写 React 组件使用getElementById在占位符 div 的位置添加标签并渲染!
就这样,你的 React 开发之旅继续吧!如果你喜欢这篇文章,不妨看看其他一些你可能感兴趣的内容:
文章已失效
干杯!
文章来源:https://dev.to/kokaneka/react-development-using-just-a-single-file-5e65