苏南大叔已经介绍了如何使用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）

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

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

总结

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

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

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

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

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

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

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

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