jsx转换之路

react起步——jsx转换之路

    <!-- 文章内容 -->
    <div data-note-content="" class="show-content">
      <div class="show-content-free">
        <p>吐槽一下：学啥都是，真难，可能看一上午文章，还解决不了一个问题。万事开头难，不着急</p>

使用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等插件

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