iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 10
0
自我挑戰組

請你當我的好朋友吧!ReactJS!系列 第 10

【DAY 10】這樣我們關係有比較近了嗎?ReactJS

  • 分享至 

  • xImage
  •  

【前言】
  前幾天我們建構了一些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的生命週期方法,有些經常用到的如componentDidMountcomponentDidUpdatecomponentWillUnmount等等,我們可以在適時的時機與合適的方法中插入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)


上一篇
【DAY 09】利用狀態提升重新撰寫一次TodoList吧!
下一篇
【DAY 11】Redux不是小三!它只是和ReactJS較契合!
系列文
請你當我的好朋友吧!ReactJS!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言