我是react小白，網(wǎng)上的react教程成堆成堆的，我就不在這里寫(xiě)什么教程，巴拉巴拉以下我的學(xué)習(xí)“心得”！ 我是在“技術(shù)胖”的帶領(lǐng)下學(xué)習(xí)的react，這個(gè)教程是小白也能輕松學(xué)習(xí)react。 雖然跟著“技術(shù)胖”的視頻學(xué)習(xí)敲打代碼，但是還是很容易踩坑。我會(huì)在這里記錄下我覺(jué)得重要的，還有我踩的坑，加深印象。歷任老師都說(shuō)了，好記性不如爛筆頭，記下來(lái)就少犯錯(cuò)誤！ 順便在這里表達(dá)下自己學(xué)習(xí)時(shí)候的心情哈！啦啦啦～～～～

---

環(huán)境搭建

第一天學(xué)習(xí)，是沒(méi)有安裝react的，引用了外部文件來(lái)搭建的環(huán)境。 訪(fǎng)問(wèn)官網(wǎng)https://facebook.github.io/react/，下載兩個(gè)文件“react.js”和“react-dom.js”。 然后我就開(kāi)始按照技術(shù)胖教的開(kāi)始寫(xiě)例子了，到這里一切都很順利。

第一個(gè)點(diǎn) `<script type="text/babel"></script> 基本的創(chuàng)建組建，渲染組建的代碼熟悉之后，接下去的JSX就坑壞我了，一個(gè)小細(xì)節(jié)我沒(méi)注意到，折騰了半天。 在寫(xiě)JSX之前需要用到bable轉(zhuǎn)換，可以去網(wǎng)上提供的靜態(tài)資源庫(kù)引用（http://www.bootcdn.cn/），也可以自己下載。

我這里是引用的資源<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>，寫(xiě)出了JSX數(shù)組的小例子，歡迎來(lái)找茬，發(fā)現(xiàn)哪里的問(wèn)題了嗎？

我的頁(yè)面是報(bào)錯(cuò)的！我的天吶，然后我就一直覺(jué)得是不是我引入的babel資源有問(wèn)題，換了好幾個(gè)，都沒(méi)用。
對(duì)比了js的代碼，也沒(méi)問(wèn)題，若不是老眼昏花，總共就那么幾行，我能看錯(cuò)？？！
不死心，我都復(fù)制了主要代碼，還是報(bào)錯(cuò)！崩潰！！！我的心情你懂嗎？？最后關(guān)鍵來(lái)了，我的錯(cuò)誤很簡(jiǎn)單，呵呵呵～～～

script標(biāo)簽里少了個(gè)type！豁然開(kāi)朗！柳暗花明！

第二個(gè)點(diǎn) return <div>要同一行 剛開(kāi)始學(xué)習(xí)的demo都很簡(jiǎn)單，只有幾行，我就沒(méi)看視頻，直接開(kāi)打，就出現(xiàn)了以下一幕

WHAT！！！什么鬼？看不懂啊看不懂！然后又對(duì)著零星幾行代碼找錯(cuò)，我們有錯(cuò)不怕，就怕找不出錯(cuò)啊～～～
最后都復(fù)制了教程上的代碼，紅色警告還是沒(méi)有消失，最后在我堅(jiān)持不懈的努力下，我發(fā)現(xiàn)錯(cuò)誤了！哈～哈～哈～

return <div>

需要同一行！同一行！同一行！重要的事情說(shuō)三次，return后面必須緊跟一個(gè)html標(biāo)簽。
這個(gè)坑真的有點(diǎn)深啊，我剛開(kāi)始不放一行是覺(jué)得代碼好看點(diǎn)，為了代碼的美觀，現(xiàn)在不都是長(zhǎng)相比較重要嘛！

---

還好，結(jié)局是美好的！

總結(jié)

以上是生活随笔為你收集整理的学习react的心路历程（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。