react起步——jsx转换之路

吐槽一下:学啥都是,真难,可能看一上午文章,还解决不了一个问题。万事开头难,不着急

使用npm获得react包

npm install --save react
npm install --save react-dom

上边这两个包,一个是react的核心包,一个是react提供的dom相关功能包。(我也是道听途说,在0.14以前,只有一个,后来分开成了两个。反正我用的时候,就是俩了。)

转换

但是,仅仅这两个包,是完成不了一个react demo的。为什么?因为使用react难免用到它的jsx语法,而浏览器是不认识jsx的。上边的两个包,并没有提供jsx转换到js的功能。

如何转换jsx到js可能会看到很多情况,反正是把我弄蒙了,下面按照时间顺序一一说明

  • 综述
    关于编码转化 ,可以发生在两个地方。

一、在服务器端,给转化好,然后送到浏览器
二、在浏览器端转换

  • 最初——
    jsxtransformer.js,react自带的,浏览器端的转换功能脚本。
    react-tools,react自己提供的,服务器端

上边这俩,都比较早了,现在应该没人用了。

jsxtransformer.js就是在html页面通过script标签引入,然后,就可以在下边写react了。很明显,这是在浏览器端完成的转换。(注意此时react的type属性是"text/jsx")

<script src="./jsxtransformer.js">
<script type="text/jsx">
//注意,type属性

react-tools则是服务端的,通过类似如下完成转换

npm install -g react-tools   //全局安装react-tools
jsx --watch src/ bulid/      //转换
  • 过度——babel
    (具体是啥时候,我也不知道,从0.14以后?)
    同样分为两种:
    浏览器端:browser.js
    服务器端:babel

    因为过度和现在关系紧密,一并在后边说明

  • 现在——抛弃浏览器端转换
    在实际开发中,浏览器端转换性能问题严重,(毕竟多了一道工序),所以,浏览器端转换更多是用于平时的学习。(比如各种react教程,一些小demo)

    babel是一个转码工具集,里边有各种各样的插件。

    • 浏览器端
      在babel6.0版本以前,其中的
      babel-core //babel的api
      插件提供浏览器端的转换器脚本,也就是browser.js,它替代了最早的jsxtransform.js(注意type属性"text/babel")
<script src="./babel-core/browser.js">
<script type="text/babel">
//注意,type属性

6.0之后,就没有了

  • 服务器端
    依然使用babel
    关于babel如何使用,在后边再做一个简单回顾。

  • 6.0版本后,浏览器端的使用

    • browser.js
      有时候我们只是想做一个测试demo,或者一个针对react的简单总结,直接上转换器脚本更方便一些,那么如何获取到browser.js呢?
npm install babel-core@5
//下载5.x版本的babel-core,就可以找到下图中的browser.js(好大,,,随便找个地方下一个,然后,把browser.min.js考过去)
    ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4765228-dcb3873b2cad6adb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

也可以像react官网那样,用cdn
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
- babel-standalone

也可以使用它,这个插件用于非node环境下使用babel,源码来自阮一峰

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// code es2015
</script>

简单回顾babel

  • 创建.babelrc文件
  {
    "presets": [],
    "plugins": []
  }
  • 安装规则集
 npm install --save-dev babel-preset-es2015   //ES2015转码规则
 npm install --save-dev babel-preset-react      //react转码规则
。。。。等等

然而,babel官网上是这样的

Paste_Image.png
  • 将规则配置到.babelrc
{
  "presets": [
    'es2015',
    'react'
],
  "plugins": []
}
  • 安装babel-cli,babel-core,babel-register,babel-polyfill,babel-loader等插件

  • 具体的与构建工具配合有时间再做整理

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 7,036评论 7 35
  • 前两部分我们已经完成了博客页面的展示和后台页面的展示: React技术栈+Express+Mongodb实现个人博...
    SamDing阅读 4,579评论 1 12
  • 项目地址 从头开始建立一个React App - 项目基本配置 npm init 生成 package.json ...
    瘦人假噜噜阅读 80,679评论 32 76
  • 早上天还没亮我就起来收拾东西,今天要去桑耶寺。昨晚问了旅馆前台,但前台也不清楚要怎么坐车。我看了好多说法,比较可靠...
    请叫我倾城阅读 108评论 0 1
  • 宝宝生下来七天,因出生时有些症状,新生儿科直接入院了。为了避免大人探视带进细菌去,新生儿科不允许探视,除了孩子生下...
    李守俊阅读 69评论 0 0