Skip to content

快速學習 React.js 和 Redux 的基礎到實踐 (Udemy) — 觀後心得

Posted on:June 24, 2018

人生第一次寫教學觀後心得,有寫不好的地方還請看官多多包容 QQ

還有先說,這是心得文,不是技術分享o_o

在朋友的介紹下,購買了 Udemy 的這門 React 課程 — 快速學習 React.js 和 Redux 的基礎到實踐

而剛好我正準備要來找 react 的教學來看,這教學完全幫助我快速地入門

特色

以我在網路上買了 10 幾堂程式語言課程的經驗來說,這門還挺特別的,特別在哪呢?

他會在部分單元結束後附上一個測驗,測驗是一般選擇題,測試你是否真的懂上一單元在講的東西,而在選完答案後,他也會說明為何是這個答案,這種隨堂測試的感覺是我買的很多課程中,第一次遇到的,所以覺得很特別。

而除了選擇題測驗,他還會出個題目(作業)請你上傳該題答案的 code,而你的 code 不是就上傳擺在那而已,會有老師來看,來給你意見。

教些什麼呢?

說真的,我覺得內容挺豐富的,而且重點是,

老師講話不會讓人想睡覺!

有些教線上課程的人就像在唸稿一樣,死板板的,看得很痛苦,但這門課不會!

開頭

一開始說明過去開發網頁的方式,遇到的窘境,例如 DOM tree,當架構越來越大時,DOM tree 越來越複雜,很容易一動A就壞了B C D 等等;而 react 正能解決這項問題,react 會產生虛擬 DOM tree,只更新要更新的地方,維護上較方便。

之後講解 ES6 的新語法,例如解構、預設值、箭頭函數等等,因 react 用了大量的 ES6 的語法,不會使用的話實在很難駕馭 react (應該吧…)

還說明了 ES6 裡我覺得超級好用的 Promise,Promise 真的非常強大,他讓 js 的異步處理變得非常好控制,可讀性也提升了。

過去我們要在 ajax 讀取完後執行一些行為必須要寫個 callback,而現在有了 Promise,只要在 call api 的那個 function 接個 then,then 裡面寫要執行的行為就行了,非常的方便。

而除了好用的 Promise 外,還講到了「短路求值」,何謂短路求值呢?

以上述為例,兩種效果都一樣,只要「temp」為 true 就會執行 todoSomething(),但第二種的短路求值就能讓程式變得很簡短 (簡短就很爽啊 XD),總之就是如果是 and (&&) 就必須前項為 true 才會執行後項,反之則不會執行後項;而 or (||) 是當前項為 true 時就不會執行後項,反之則執行後項。

進入 React

再來就是進入到說明 react 的用法了,這門課一開始就是直接使用 JSX 了,不會像其他網路教學會先來個 JSX 外的寫法,等教完那種難寫的方式後再進入 JSX,現在忘記那個難寫的方式叫啥…

而這門課使用的套件管理工具用 FB 所支持的「create-react-app」,不用動手自己創 webpack,省去了不少時間。

之後開始用例子來帶大家進入實作,這門課是用教學最愛用的待辦清單 (to do list) 來當範例,對我來說有沒有實作真的太重要了,在自己寫的時候,教的東西有沒有吸收到,一目了然,原本不會的,在寫完後也差不多記得了

然後用 Single Page Application (SPA) 來教如何使用 react-router,用 router 來解決 SPA 重整後頁面會回到最初的窘境

再來進入到 redux,非常重要的 redux,將多組件之間的溝通簡單化,省去很多傳遞的麻煩,然後還結合了 api 的呼叫,真的不得不說這邊 api 真的很用心,call api 用的是 fetch,老師將 fetch 能使用的參數講得很仔細,還寫了一些正確 call api 的寫法,像是要判斷 response status 來做對應的事情,當有出錯時要讓使用者知道當前狀況

到這裡先感謝看到此段的你,感謝你看了我打這麼多的廢話XD 若有哪裡講錯的,還請不吝指教!!

說真的,我還沒到很熟悉 react,所以很多東西講不太上來,但這門課真的還不錯啦,物超所值,希望老師還會再出更多的教學XD

最後再附上這門課的連結 - 傳送門