苏南大叔已经介绍了如何使用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版本,可能是更好的选择。

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

公共js

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

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

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

如何新建一个最简单的 react 页面范例?react 迷你范例 - bootcss
如何新建一个最简单的 react 页面范例?react 迷你范例(图4-3)

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

其实,整体来说,引用放别人服务器上面的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,必须设置typetext/babel,否则无法解析里面的react内容。
  • 对于babel来说,还可以设置上述业务逻辑所在的scriptdata-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>

如何新建一个最简单的 react 页面范例?react 迷你范例 - react-demo-code-babel
如何新建一个最简单的 react 页面范例?react 迷你范例(图4-4)

稍稍豪华点的代码

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

<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,然后加入typetext/babelreact代码即可。但是具体的js库的版本号以及来源,这个就是随时都可能发生变化的。大家请根据自己的情况自行修改。

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

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

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

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

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

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!