如何新建一个最简单的 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版本，可能是更好的选择。

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

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

公共js库

上述代码中，苏南大叔使用的公共代码库来自于bootcss。当然，苏南大叔推荐都是使用自己本地服务器上面的文件的。

但是为了体现最简化，那么使用公共的js库，也是可以接受的。如果上述代码放到国外，可能最优选择就变成了unpkg提供的公共js库。目前选择的bootcss，去年也发生过大范围的问题。所以，请千万不要把自己代码的安全寄托在别人身上。你懂的。

下面的是一些相对靠谱的选择：

• https://www.bootcdn.cn/
• https://unpkg.com/#/stats

当然下面的是一些不靠谱的选择：

• http://unpkg.zhimg.com/
• 百度CDN：http://cdn.code.baidu.com/
• 360CDN：http://libs.useso.com/

其实，整体来说，引用放别人服务器上面的js库，永远都是不靠谱的。所以，想放心靠谱，就放自己本地安装。下面给出，目前来说，可能的两组替换代码：

unpkg:

<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>

知乎未公开的unpkg镜像:

<script crossorigin src="http://unpkg.zhimg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="http://unpkg.zhimg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="http://unpkg.zhimg.com/babel-standalone@6/babel.min.js"></script>

关于里面的crossorigin属性，最好写上这个属性值，这个和js资源提供方有关。至于，具体的crossorigin原理，以后苏南大叔会单独写篇文章，讲述这个属性的相关事宜。

关于babel

• 对于这个babel库，实际上网络流传的还有使用babel-core/browser.min的说法。但是在实际的试验中，苏南大叔觉得还是babel-standalone/babel.min更靠谱一些。大家可以自行试验。
• 实际业务代码所在的script，必须设置type为text/babel，否则无法解析里面的react内容。
• 对于babel来说，还可以设置上述业务逻辑所在的script的data-presets。用过babel的同学，都会知道presets是做什么的。对于react来说，可能需要设置的值是es2015,stage-0,react。但是，如果大家不知道设置什么比较合适，建议不要设置。否则，很可能出各种问题。

<script type="text/babel" data-presets="es2015,stage-0,react">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );
</script>

稍稍豪华点的代码

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

<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>

相关链接

• https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html

总结

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

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

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

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

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