最近公司在做一个建站的项目， 项目中组件化的部分使用了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(<div>3333</div>)
}
}
export default Audio
render(<Audio />, document.getElementById('app'))
我开始接触react时，就已经在用es6，去写，所以关于其他的写法，没有进行过复习。
- react
-
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以后的无法使用
例如
<html>
<head>
<title>react入门知识</title>
<meta name="content" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<script src="http://cdn.bootcss.com/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
class Test {
test() {
var ss = new Array(2).fill(3)
console.log(ss)
}
}
var test = new Test;
test.test();
</script>
</body>
</html>
在script标签的type属性是“text/babel”需要注意，这样我们就可以 写es6的代码了。
Paste_Image.png
注意到这里还有一个polyfill， babel再做转化时，Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，阮一峰大神这样解释道，像箭头函数，结构赋值 这都是新的句法 但是像Array.from这个只是array类的一个新的api 所以会被忽略，这时候，我们还需要额外引用polyfill，记住测试的时候，在手机端测试效果比较明显，因为 pc端的chrom支持的差不多了，所以你看不出效果
关于babel的那些包怎么使用，怎么权重，我其实今天也看了许多文章，可以总结一些，但是我现在困了，不想写了，有时间再补上。其实我觉得阮一峰大神的这篇文章就已经说的很明白了 -
快速用react写组件
终于切入正题<html> <head> <title>react入门知识</title> <meta name="content" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <script src="http://cdn.bootcss.com/babel-core/5.8.23/browser.min.js"></script> <script src="//cdn.bootcss.com/react/15.4.1/react.js"></script> <script src="//cdn.bootcss.com/react/15.4.1/react-dom.js"></script> </head> <body> <div id="app"> </div> <script type="text/babel"> var { render } = ReactDOM ,{ Component } = React class App extends Component{ render(){ return ( <div>hello,world</div> ) } } render( <App/>, document.getElementById('app') ); </script> </body> </html>
关于webpack是一个大坑，我每次研究他一下午就过去了，这个也需要写一篇笔记，但是最近工作一直再用react 加上 我现在工作上并不需要用，所以就先暂缓，接下来 就是react组件上一些注意的地方，改天再写吧。
我已经好久好久没有写过笔记了。对前端的热衷远不及我微博加的那些大神，就让我安静的做个切图工程师
我穿的珠子有没有很好看
网友评论