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

- babel-standalone

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

简单回顾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等插件

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