【前言】
前幾天我們建構了一些React的一些基礎觀念,這篇會稍微整理一下內容,並提供一些其他的網站給予參考。
【正文】
剛開始我們稍微對ReactJS這個函式庫稍微做了一下簡單的介紹、特性,以及ES6的一些相關語法,畢竟ReactJS本質上是建構在ES6的基礎上。可惜的是,瀏覽器並不懂我們寫的ES6語法、JSX語法糖等等......,所以必須要透過Babel來幫我們做編譯的動作,讓瀏覽器可以把那些代碼轉成瀏覽器看得懂的語法。
【DAY 01】你好React,我可以當你好朋友嗎?
【DAY 02】蝦咪?ES6、Babel、JSX要先來鑑定?
有了這些觀念後,我們就開始實作我們第一個React Component的語法,而且也了解由ReactJS寫的網頁是由一塊一塊的Component(組件)所組合起來的,之後為了想要傳(改)值,學習了如何從父層傳遞props
給予子層,抑或是利用setState
的方法去更改class Component的state
,ReactJS一旦發現Component的值有所改變之後,Component即會重新Render。
【DAY 03】Hello, React! 我終於印出你了!
【DAY 04】React!說,Props是誰啊?
【DAY 05】React!說,State又是誰啊?
當然有時候我們會看到許多用JQuery或是其他會對DOM直接操作的套件,但苦於ReactJS是屬於Virtual DOM很難去實做,結果發現可以透過Refs
的方法抓到ReactJS DOM的參照,就可以搭配其他的函式庫。
【DAY 06】React!還有?refs你別來好不?
再來介紹了ReactJS的生命週期方法,有些經常用到的如componentDidMount
、componentDidUpdate
、componentWillUnmount
等等,我們可以在適時的時機與合適的方法中插入API查詢、設定(清除)計時器、執行一些具有副作用的程式碼。
【DAY 07】React Component也有生老病死?(上)
【DAY 08】React Component也有生老病死?(下)
最後我們把之前做了一個具備「Component拆分」、「有跨組件溝通」、「state/props傳遞」的TodoList。
【DAY 09】利用狀態提升重新撰寫一次TodoList吧!
這就是我們過去九天所學到的東西,當然還有許多東西沒有說到,所以我就貼在下面讓大家可以去看囉!
* Typechecking With PropTypes
* Higher-Order Components
* DOM Elements
接下來這十篇文章,大致會著重在redux身上,這其實對我來說也沒有搞得很懂,但我會努力它讀懂,並且整理成大家可以看得懂的文章,大家一起加油吧!
(終於完成1/3了)
(這篇超混XDD)