我是react小白，網上的react教程成堆成堆的，我就不在這里寫什么教程，巴拉巴拉以下我的學習“心得”！ 我是在“技術胖”的帶領下學習的react，這個教程是小白也能輕松學習react。 雖然跟著“技術胖”的視頻學習敲打代碼，但是還是很容易踩坑。我會在這里記錄下我覺得重要的，還有我踩的坑，加深印象。歷任老師都說了，好記性不如爛筆頭，記下來就少犯錯誤！ 順便在這里表達下自己學習時候的心情哈！啦啦啦～～～～

---

環境搭建

第一天學習，是沒有安裝react的，引用了外部文件來搭建的環境。 訪問官網https://facebook.github.io/react/，下載兩個文件“react.js”和“react-dom.js”。 然后我就開始按照技術胖教的開始寫例子了，到這里一切都很順利。

第一個點 `<script type="text/babel"></script> 基本的創建組建，渲染組建的代碼熟悉之后，接下去的JSX就坑壞我了，一個小細節我沒注意到，折騰了半天。 在寫JSX之前需要用到bable轉換，可以去網上提供的靜態資源庫引用（http://www.bootcdn.cn/），也可以自己下載。

我這里是引用的資源<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>，寫出了JSX數組的小例子，歡迎來找茬，發現哪里的問題了嗎？

我的頁面是報錯的！我的天吶，然后我就一直覺得是不是我引入的babel資源有問題，換了好幾個，都沒用。
對比了js的代碼，也沒問題，若不是老眼昏花，總共就那么幾行，我能看錯？？！
不死心，我都復制了主要代碼，還是報錯！崩潰！！！我的心情你懂嗎？？最后關鍵來了，我的錯誤很簡單，呵呵呵～～～

script標簽里少了個type！豁然開朗！柳暗花明！

第二個點 return <div>要同一行 剛開始學習的demo都很簡單，只有幾行，我就沒看視頻，直接開打，就出現了以下一幕

WHAT！！！什么鬼？看不懂啊看不懂！然后又對著零星幾行代碼找錯，我們有錯不怕，就怕找不出錯啊～～～
最后都復制了教程上的代碼，紅色警告還是沒有消失，最后在我堅持不懈的努力下，我發現錯誤了！哈～哈～哈～

return <div>

需要同一行！同一行！同一行！重要的事情說三次，return后面必須緊跟一個html標簽。
這個坑真的有點深啊，我剛開始不放一行是覺得代碼好看點，為了代碼的美觀，現在不都是長相比較重要嘛！

---

還好，結局是美好的！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。