如何新建一个最简单的 react 页面范例?react 迷你范例
发布于 作者:苏南大叔 来源:程序如此灵动~苏南大叔已经介绍了如何使用create-react-app
建立一个react
项目。但是,上述react
项目,对于新人小白来说,还是太过于复杂。虽然建立起项目,很容易简单。但是对于新人来说,仅仅练习某个特性的时候,上述项目也许并不是最合适的选择。本文中,苏南大叔介绍一个最最简单的react
项目的页面,而且非常好理解,非常适合新人。
本文测试环境:react@16
/react-dom@16
/babel-stonealone@6
。
最简单的react
页面
最简单的react
迷你helloworld
范例,如下就是全部代码了:
<script src="https://cdn.bootcss.com/react/16.7.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
是不是非常简单,就上边这几行代码,就可以做一个最简单的react
页面了。当然,这些代码也是有变数的。不过,截止到发稿,上述代码无疑是目前的最优化选择。
值得特别说明的是:这里的react
和react-dom
都是development
版本,并不是production
版本。毕竟仅仅在测试环境下推荐使用本迷你范例的。所以,使用development
版本,可能是更好的选择。
两者的区别对比及检测方法如下:
总结
基本上要描述的注意事项就这么多了,使用这个最简化的react
页面,就可以顺利调试学习react
了。但是,并不是推荐您在正式生产环境里面,这么使用哦。生产环境下,现在推荐的流程要经过babel
+ 打包 + 混淆等等工序的,非常的复杂的说。
本文的整体思路就是:引入react
/react-dom
/babel
,然后加入type
为text/babel
的react
代码即可。但是具体的js
库的版本号以及来源,这个就是随时都可能发生变化的。大家请根据自己的情况自行修改。
想知道更多react
前端构建相关知识么?请点击苏南大叔的后续经验文章吧。


转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。
本站的忠实读者小伙伴,正在阅读下面这些文章: