我只想知道写react组件，不想学习webpack，等那些构建工具

最近公司在做一个建站的项目， 项目中组件化的部分使用了react，并通过browserify（也可以使用webpack，gulp， grunt……）构建工具，配合babel 对jsx进行ES6转义。
我感觉自从我做前端一来，前端的轮子越来越多，越来越大，想写个hello world ，有时候都需要经过步骤1，2，3，4，在我研究webpack时， 最感同身受的一句话就是“前端圈需要有个配置工程师，专门研究各种工具的使用文档”，我自己老早就想写这一篇文章，虽然内容并不会太深，只是想对最近一个月工作的一个总结，并希望通过总结找到我还遗漏了哪些地方，今天韩语老师身体不舒服，可以有时间写一篇。

---

我每次在家（笔记本没有工作环境）时，想写react 总觉得需要准备的环境很多， 我想用react 但是我想用es6去写react，觉得需要准备很多，于是，我就找了找，如何不需要构建工具，直接在浏览器端就直接运行 然后 编译es6代码， 虽然 在浏览器端编译会慢一些，但是只是为练习写组件，尝试react编写，暂时就够了。。

关于react的几个方向

• react构成

  • react
    我现在工作内容很简单，使用react&react-dom就好，主要是进行组件的编写。包含api：React.createElement .createClass .Component .PropTypes .Children
    使用方法
    import { Component } from 'react'
    import { render } from 'react-dom';
    class Audio extends Component{
    render(){
    return(
    3333
    )
    }
    }
    export default Audio
    render(

• react-dom
  主要负责将我们编写的组件渲染到dom中，提供的api：ReactDOM.render .unmountComponentAtNode .findDOMNode

• react-dom-server
  负责进行服务端渲染，将渲染dom的过程留在服务端，减少浏览器端的渲染成本，包含api：.renderToString 和 .renderToStaticMarkup

• react-with-addons
  与react数据流相关，react本身是单向数据绑定，不同于angular，vue， 但是提供了这个包，来使得开发者对数据进行额外的操作，具体不了解，没用过。

  React Native
  没用过，看网上的文章 应该是为了让同一套代码运行在多个平台，而提供的一门技术，与之相比较的可以用最近半年比较火的 weex， 基于vue的。

• ES6 with Babel

• es6
  es6 提供了很多比较简化代码的方法，最喜欢用的像模块化，结构赋值， 数组填充，对象拷贝，如果有深度拷贝就更好了。关于模块化，这个 需要对比我们常用的模块化规范说一下

CommonJS 服务端（node）的模块加载规范，是同步的，因为在本地目录加载文件，速度很快不需要异步
AMD与CMD是浏览器端的两个模块加载规范，是异步的，两个再具体实现也是有差别的。关于模块加载是什么鬼，可以看一下我之前自己写的一个AMD模块加载的代码，，，
但是 这三者有一个共同点：都只能在运行时确定模块的具体内容。只有浏览器运行时，通过加载某个文件即模块，来获得这个对象。
由于es6的模块化写法，则是在编译时加载，我已开始有个疑问，js代码不是不需要编译么，问过同事，给的合理的解释 就是，是浏览器对es6代码进行进行的编译，同理 浏览器也会对es5代码进行编译。ES6模块不是对象，而是通过export命令显式指定输出的代码，这在一定程度上解决了之前循环加载的问题，但是 es6 对除去对象的循环加载输出并不是像期待的那样，参考

原本ES6模块化的引入，原本是弥补浏览器端缺失的模块加载这个功能，但是由于浏览器或者服务端 貌似都没有想好怎么支持这个，所以就到了babel出场了。

• babel
  这个是这一年多与webpack 结合比较火的工具，babel以转化es6代码闻名，后来又不甘心只做这一件事，于是就有了babel5.0 到6.0的故事
  babel 与之前的react 类似，都是 由一个大而全的包，拆成了许许多多独立的小包，优点是 我们用的时候 捡那些需要用的用，不需要的就不引用，缺点是，以前引用一个就够了，现在 不知道引用哪一个，呵呵哒
  ·还有一个需要注意的从Babel 6.0开始，不再直接提供浏览器版本，而是要用构建工具构建出来。如果你没有或不想使用构建工具，可以通过安装5.x版本的babel-core模块获取· cdn地址6.0以后的无法使用
  例如
  
  
  
  
  
  
  
  
  
  
  在script标签的type属性是“text/babel”需要注意，这样我们就可以 写es6的代码了。
  

  

  Paste_Image.png
  
  注意到这里还有一个polyfill， babel再做转化时，Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，阮一峰大神这样解释道，像箭头函数，结构赋值 这都是新的句法 但是像Array.from这个只是array类的一个新的api 所以会被忽略，这时候，我们还需要额外引用polyfill，记住测试的时候，在手机端测试效果比较明显，因为 pc端的chrom支持的差不多了，所以你看不出效果
  关于babel的那些包怎么使用，怎么权重，我其实今天也看了许多文章，可以总结一些，但是我现在困了，不想写了，有时间再补上。其实我觉得阮一峰大神的这篇文章就已经说的很明白了

• 快速用react写组件
  终于切入正题

关于webpack是一个大坑，我每次研究他一下午就过去了，这个也需要写一篇笔记，但是最近工作一直再用react 加上 我现在工作上并不需要用，所以就先暂缓，接下来 就是react组件上一些注意的地方，改天再写吧。
我已经好久好久没有写过笔记了。对前端的热衷远不及我微博加的那些大神，就让我安静的做个切图工程师

我穿的珠子有没有很好看