????React是目前全球使用量最大的框架，F(xiàn)aceBook出品，心疼扎克，入駐中國又一次涼了。去年React16發(fā)布，F(xiàn)B的大佬們重寫了底層架構(gòu)取名曰Fiber，性能大幅提升，高大上啊，React這么好，我選擇Vue，畢竟鐵粉~哈哈。最近開始在看vue的源碼，希望以后也一點(diǎn)點(diǎn)分享我的擼源碼心得。
????回歸正題，快速，飛速，不對，極速上手?jǐn)]React。我們以一個(gè)最最簡單的demo來講解一下React最最基本的使用。當(dāng)然這里你如果之前有過Vue或者Angular的基礎(chǔ)會(huì)理解起來容易很多，畢竟核心都是數(shù)據(jù)驅(qū)動(dòng)。
? ? 我這里以MacOS講解，Windows差距也不大。首先，開機(jī)！?。〈蜷_控制臺，cd到你的任一文件夾，輸入mkdir xxx。就輸react吧
然后cd到react里面，這里先裝node，這個(gè)我就不多說了。然后安裝React腳手架，如果你用過vue-cli的話，其實(shí)就是一樣的東西。我們輸入npm i create-react-app -g記得全局安裝~
裝好了，我們繼續(xù)輸入create-react-app xxx,xxx是你起的文件夾名字，隨意，我們就取myapp吧,這個(gè)過程可能比較慢，要從GitHub里拉模板還有裝各種依賴，磨煉你的耐心。
好，在最下面可以看到，我們裝的最新版的React16.4，對應(yīng)的React-dom也是一樣，這里要注意的就是如果說你不使用腳手架的自己手動(dòng)安裝react和react-dom的時(shí)候版本一定要保持一致，不然會(huì)報(bào)錯(cuò)。當(dāng)然一般情況不會(huì)遇到這個(gè)坑。
再往下拉，他說你可以擼下面幾個(gè)命令，第一個(gè)npm start啟動(dòng)項(xiàng)目，第二個(gè)run build是打包了，暫時(shí)用不到，第三個(gè)test測試也用不到，第四個(gè)eject, 射，彈射，想想就恐怖，這玩意最好別碰，后面還提醒你，你射了就不能后悔了。這東西就是把webpack配置開放給你，默認(rèn)你是看不到這些配置文件的，這個(gè)后面我們再說。一般情況官方默認(rèn)配置我們就夠用了，當(dāng)然你想具體了解webpack另說。
最后我們按他的提示，cd myapp然后npm start開擼開擼
過一會(huì)，網(wǎng)頁自動(dòng)打開了，臥槽，牛逼，如果你用過vue-cli 2.x就會(huì)發(fā)現(xiàn)我們還要手動(dòng)打開瀏覽器，很low，其實(shí)也可以實(shí)現(xiàn)的，只要在packjson里script里的npm start里的webpack-dev-server 后面加上一個(gè)--open的參數(shù)就ok了，腳手架，就是提升工作效率的，還不是因?yàn)槌绦騿T懶嘛。
接著我們看下項(xiàng)目工程目錄
很整潔清爽，有沒有，你發(fā)現(xiàn)，找不到webpack配置文件，想要的話，射一下就出來了。
node_modules不用說，npm黑洞一般的依賴文件，public就是我們?nèi)肟趆tml,下面那個(gè)manifest先不用管，PWA相關(guān)的。再看下面，src就是我們工程源碼目錄了，下面那個(gè)一長串的servicework的也不用管，也是PWA的。好，看下最重要的入口文件，index.js
這里import是es6的模塊化，代替了我們過去寫一堆script標(biāo)簽，不利于維護(hù)。
首先我們看到引入了React和React和ReactDOM這倆核心庫，然后引入了css，最后引入了一個(gè)關(guān)鍵的App組件，下面的serviceworker略過。
最下面的就是ReactDOM的render函數(shù)渲染了，這里JSX語法可以直接寫html標(biāo)簽，后面第二個(gè)參數(shù)就是你要掛載的dom節(jié)點(diǎn)，你會(huì)想root在哪。找到之前的public文件夾下的入口html文件
看到?jīng)]有，我們之前的整個(gè)項(xiàng)目的代碼都是渲染在這個(gè)root之下。當(dāng)然這也導(dǎo)致一個(gè)問題，seo也就能看到一個(gè)root，對應(yīng)我們可以采用ssr解決，扯遠(yuǎn)了。
我們來編寫第一個(gè)hello world.進(jìn)入App.js
愉快地?cái)]es6吧，開局一個(gè)class剩下全靠編，其他我就不細(xì)說了，我們把里面的header和p標(biāo)簽全部刪掉寫上我們的Hello world。。。
然后ctrl+S保存，切到瀏覽器，不用手動(dòng)刷新，webpack-dev-server已經(jīng)幫我們熱更新了。
好，我們現(xiàn)在嘗試自己寫一個(gè)新的組件。我們在src下新建一個(gè)文件Tqq.js，內(nèi)容就把之前的copy一份來。好了，現(xiàn)在App.js就是我李哥，Tqq.js就是我，李哥的小弟。小弟呼喊，社會(huì)我李哥，我李哥牛逼！記住最后要export default把tqq這個(gè)小弟給派出去，不然我李哥無法調(diào)遣小弟干活。
接下來我們進(jìn)入到App.js里，看看李哥在干嘛。
把我小弟tqq給import進(jìn)來，import Tqq from './Tqq.js', 當(dāng)然.js后綴你可以不寫，Tqq的名字也可以改的，李哥想叫小弟啥名就叫啥名。
接下來看最關(guān)鍵的一點(diǎn)，我李哥是大哥，獨(dú)裁，所以每個(gè)組件默認(rèn)只能有一個(gè)根節(jié)點(diǎn)，就是我最外層的div，不然會(huì)報(bào)錯(cuò)。小伙子，你想造反？？？如下圖，
好，接下來，我們來看看我李哥給自己的稱呼。也就是組件的數(shù)據(jù)存儲(chǔ)，我們在class里寫一個(gè)構(gòu)造器，數(shù)據(jù)放在this.state里，比如我們存一個(gè)李哥。
然后我們肯定要讓李哥出來快活啊。我們就要在組件里召喚我李哥，把Hello world的world換成我李哥。在React里綁定數(shù)據(jù)用的是{}，和vue和angular的{{}}不一樣
然后我們保存看看李哥出來快活沒
下面小弟齊呼，社會(huì)我李哥，我李哥牛逼！
李哥聽久了這稱呼也聽膩了，決定讓小弟們改口，叫豬哥。所以李哥就要下令了，怎么下令呢。李哥決定加一個(gè)command的按鈕，這里注意，onClick的C要大寫，然后李哥下令，大家以后改口喊豬哥，怎么改就要改state的值了，React給我們提供了一個(gè)api叫setState，我們只能通過它去修改state的數(shù)據(jù)
點(diǎn)擊李哥下令改口，一片紅，下令失敗，什么情況
找不到setState？？？李哥很不爽，下令嚴(yán)查，最后發(fā)現(xiàn)這個(gè)鍋要this來背，我們點(diǎn)擊下令按鈕觸發(fā)command的事件的時(shí)候，此時(shí)的this執(zhí)行上下文我們是指向當(dāng)前的button按鈕的，按鈕上肯定是沒有setState的，所以我們要綁定到外層執(zhí)行上下文，所以我們修改一下onClick
現(xiàn)在，李哥再次下令改口。
李哥發(fā)現(xiàn)雖然改口成功了，但只有他自己知道，下面小弟tqq不知道啊。所以要把改口令的數(shù)據(jù)傳遞下去給小弟們。我們找到小弟tqq,然后跟他們說以后喊李哥要喊這個(gè)name，把this.state.name傳遞給tqq小弟
但是，李哥發(fā)現(xiàn)關(guān)告訴小弟還不夠啊，小弟們要接受一下。
所以我們切到Tqq.js里，通過this.props.name接受一下李哥的下的命令
ok，李哥心滿意足，正式下令。改口豬哥。
李哥還覺得不太滿意，感覺小弟們口號太小了。要大一點(diǎn)。這就需要css了，還記得前面的App.css嗎，我們點(diǎn)進(jìn)去把之前的都刪了，自己寫一個(gè)class
好，下面要在Tqq.js里面使用這個(gè)dalao
我們給div加一個(gè)class，記住要寫className,N要大寫，不然React會(huì)報(bào)錯(cuò)。保存
李哥大喜，大赦天下！
好了，先寫這么多吧，入門應(yīng)該也夠了。畢竟我對React會(huì)的也不多，畢竟我是尤大鐵粉~
