????React是目前全球使用量最大的框架大脉，F(xiàn)aceBook出品，心疼扎克水孩，入駐中國又一次涼了镰矿。去年React16發(fā)布，F(xiàn)B的大佬們重寫了底層架構(gòu)取名曰Fiber俘种，性能大幅提升秤标，高大上啊，React這么好宙刘，我選擇Vue抛杨，畢竟鐵粉~哈哈。最近開始在看vue的源碼荐类，希望以后也一點(diǎn)點(diǎn)分享我的擼源碼心得怖现。
????回歸正題，快速，飛速屈嗤，不對(duì)潘拨，極速上手?jǐn)]React。我們以一個(gè)最最簡(jiǎn)單的demo來講解一下React最最基本的使用饶号。當(dāng)然這里你如果之前有過Vue或者Angular的基礎(chǔ)會(huì)理解起來容易很多铁追，畢竟核心都是數(shù)據(jù)驅(qū)動(dòng)。
? ? 我這里以MacOS講解茫船，Windows差距也不大琅束。首先，開機(jī)Ｋ闾浮Ｉ鳌！打開控制臺(tái)然眼，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，對(duì)應(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測(cè)試也用不到，第四個(gè)eject, 射粟判，彈射亿昏，想想就恐怖，這玩意最好別碰档礁，后面還提醒你角钩，你射了就不能后悔了。這東西就是把webpack配置開放給你呻澜，默認(rèn)你是看不到這些配置文件的递礼，這個(gè)后面我們?cè)僬f。一般情況官方默認(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è)一長(zhǎng)串的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，對(duì)應(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è)新的組件。我們?cè)趕rc下新建一個(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ǔ)路操，我們?cè)赾lass里寫一個(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，李哥心滿意足搞挣，正式下令带迟。改口豬哥。
李哥還覺得不太滿意囱桨，感覺小弟們口號(hào)太小了仓犬。要大一點(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)該也夠了鲸鹦。畢竟我對(duì)React會(huì)的也不多，畢竟我是尤大鐵粉~
