如何新建一个最简单的 react 页面范例？react 迷你范例

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

本文测试环境：react@16/react-dom@16/babel-stonealone@6。

• 第1页
• 第2页
• 第3页

最简单的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版本，可能是更好的选择。

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

• https://newsn.net/say/react-detect.html

• 第1页
• 第2页
• 第3页

稍稍豪华点的代码

下面这里是个稍稍豪华点的代码，增加了点额外属性。加不加属性，目前其实没有大区别。

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" data-presets="es2015,stage-0,react">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );
</script>

总结

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

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

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

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留链接作者。

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

• nginx如何配置ssl证书，启用https？
• 微信小程序之快速生成目录结构
• 从“和讯登陆注册”谈“chrome对http环境下的密码输入处理”
• SSO单点登陆，典型应用场景逻辑走向分析
• php如何设置cookie？三种方案比较大全