最近公司在做一個建站的項目， 項目中組件化的部分使用了react，并通過browserify（也可以使用webpack，gulp， grunt……）構(gòu)建工具，配合babel 對jsx進行ES6轉(zhuǎn)義。
我感覺自從我做前端一來，前端的輪子越來越多，越來越大，想寫個hello world ，有時候都需要經(jīng)過步驟1，2，3，4，在我研究webpack時， 最感同身受的一句話就是“前端圈需要有個配置工程師，專門研究各種工具的使用文檔”，我自己老早就想寫這一篇文章，雖然內(nèi)容并不會太深，只是想對最近一個月工作的一個總結(jié)，并希望通過總結(jié)找到我還遺漏了哪些地方，今天韓語老師身體不舒服，可以有時間寫一篇。
我每次在家（筆記本沒有工作環(huán)境）時，想寫react 總覺得需要準備的環(huán)境很多， 我想用react 但是我想用es6去寫react，覺得需要準備很多，于是，我就找了找，如何不需要構(gòu)建工具，直接在瀏覽器端就直接運行 然后 編譯es6代碼， 雖然 在瀏覽器端編譯會慢一些，但是只是為練習寫組件，嘗試react編寫，暫時就夠了。。
-
react構(gòu)成
- react
我現(xiàn)在工作內(nèi)容很簡單，使用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時，就已經(jīng)在用es6，去寫，所以關(guān)于其他的寫法，沒有進行過復習。
- react
react-dom
主要負責將我們編寫的組件渲染到dom中，提供的api：ReactDOM.render .unmountComponentAtNode .findDOMNodereact-dom-server
負責進行服務(wù)端渲染，將渲染dom的過程留在服務(wù)端，減少瀏覽器端的渲染成本，包含api：.renderToString 和 .renderToStaticMarkup-
react-with-addons
與react數(shù)據(jù)流相關(guān)，react本身是單向數(shù)據(jù)綁定，不同于angular，vue， 但是提供了這個包，來使得開發(fā)者對數(shù)據(jù)進行額外的操作，具體不了解，沒用過。React Native
沒用過，看網(wǎng)上的文章 應該是為了讓同一套代碼運行在多個平臺，而提供的一門技術(shù)，與之相比較的可以用最近半年比較火的 weex， 基于vue的。 -
ES6 with Babel
es6
es6 提供了很多比較簡化代碼的方法，最喜歡用的像模塊化，結(jié)構(gòu)賦值， 數(shù)組填充，對象拷貝，如果有深度拷貝就更好了。關(guān)于模塊化，這個 需要對比我們常用的模塊化規(guī)范說一下
CommonJS 服務(wù)端（node）的模塊加載規(guī)范，是同步的，因為在本地目錄加載文件，速度很快不需要異步
AMD與CMD是瀏覽器端的兩個模塊加載規(guī)范，是異步的，兩個再具體實現(xiàn)也是有差別的。關(guān)于模塊加載是什么鬼，可以看一下我之前自己寫的一個AMD模塊加載的代碼，，，
但是 這三者有一個共同點：都只能在運行時確定模塊的具體內(nèi)容。只有瀏覽器運行時，通過加載某個文件即模塊，來獲得這個對象。
由于es6的模塊化寫法，則是在編譯時加載，我已開始有個疑問，js代碼不是不需要編譯么，問過同事，給的合理的解釋 就是，是瀏覽器對es6代碼進行進行的編譯，同理 瀏覽器也會對es5代碼進行編譯。ES6模塊不是對象，而是通過export命令顯式指定輸出的代碼，這在一定程度上解決了之前循環(huán)加載的問題，但是 es6 對除去對象的循環(huán)加載輸出并不是像期待的那樣，參考
原本ES6模塊化的引入，原本是彌補瀏覽器端缺失的模塊加載這個功能，但是由于瀏覽器或者服務(wù)端 貌似都沒有想好怎么支持這個，所以就到了babel出場了。
-
babel
這個是這一年多與webpack 結(jié)合比較火的工具，babel以轉(zhuǎn)化es6代碼聞名，后來又不甘心只做這一件事，于是就有了babel5.0 到6.0的故事
babel 與之前的react 類似，都是 由一個大而全的包，拆成了許許多多獨立的小包，優(yōu)點是 我們用的時候 撿那些需要用的用，不需要的就不引用，缺點是，以前引用一個就夠了，現(xiàn)在 不知道引用哪一個，呵呵噠
·還有一個需要注意的從Babel 6.0開始，不再直接提供瀏覽器版本，而是要用構(gòu)建工具構(gòu)建出來。如果你沒有或不想使用構(gòu)建工具，可以通過安裝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再做轉(zhuǎn)化時，Babel默認只轉(zhuǎn)換新的JavaScript句法（syntax），而不轉(zhuǎn)換新的API，阮一峰大神這樣解釋道，像箭頭函數(shù)，結(jié)構(gòu)賦值 這都是新的句法 但是像Array.from這個只是array類的一個新的api 所以會被忽略，這時候，我們還需要額外引用polyfill，記住測試的時候，在手機端測試效果比較明顯，因為 pc端的chrom支持的差不多了，所以你看不出效果
關(guān)于babel的那些包怎么使用，怎么權(quán)重，我其實今天也看了許多文章，可以總結(jié)一些，但是我現(xiàn)在困了，不想寫了，有時間再補上。其實我覺得阮一峰大神的這篇文章就已經(jīng)說的很明白了 -
快速用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="http://cdn.bootcss.com/react/15.4.1/react.js"></script> <script src="http://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>
關(guān)于webpack是一個大坑，我每次研究他一下午就過去了，這個也需要寫一篇筆記，但是最近工作一直再用react 加上 我現(xiàn)在工作上并不需要用，所以就先暫緩，接下來 就是react組件上一些注意的地方，改天再寫吧。
我已經(jīng)好久好久沒有寫過筆記了。對前端的熱衷遠不及我微博加的那些大神，就讓我安靜的做個切圖工程師
