学习react的心路历程(一)
生活随笔
收集整理的這篇文章主要介紹了
学习react的心路历程(一)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我是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的心路历程(一)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: iOS开发UI篇—核心动画(基础动画)
- 下一篇: 图解从上电到执行main函数的处理