苏南大叔已经介绍了如何使用create-react-app建立一个react项目。但是,上述react项目,对于新人小白来说,还是太过于复杂。虽然建立起项目,很容易简单。但是对于新人来说,仅仅练习某个特性的时候,上述项目也许并不是最合适的选择。本文中,苏南大叔介绍一个最最简单的react项目的页面,而且非常好理解,非常适合新人。

苏南大叔:如何新建一个最简单的 react 页面范例?react 迷你范例 - react-mini
如何新建一个最简单的 react 页面范例?react 迷你范例(图4-1)

本文测试环境: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 迷你范例 - react-demo-code
如何新建一个最简单的 react 页面范例?react 迷你范例(图4-2)

值得特别说明的是:这里的reactreact-dom都是development版本,并不是production版本。毕竟仅仅在测试环境下推荐使用本迷你范例的。所以,使用development版本,可能是更好的选择。

两者的区别对比及检测方法如下:

总结

基本上要描述的注意事项就这么多了,使用这个最简化的react页面,就可以顺利调试学习react了。但是,并不是推荐您在正式生产环境里面,这么使用哦。生产环境下,现在推荐的流程要经过babel + 打包 + 混淆等等工序的,非常的复杂的说。

本文的整体思路就是:引入react/react-dom/babel,然后加入typetext/babelreact代码即可。但是具体的js库的版本号以及来源,这个就是随时都可能发生变化的。大家请根据自己的情况自行修改。

想知道更多react前端构建相关知识么?请点击苏南大叔的后续经验文章吧。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   react    babel

本站的忠实读者小伙伴,正在阅读下面这些文章: