iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
自我挑戰組

從JS到React的前端入門實作 系列

從入門的JS,到框架React的差別

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文 團隊NUTC_IMAC_BLUE
DAY 21

Day21:React箭頭函數、解構

今天目的 今天新增一些語法,讓React可以好使用,今天比較忙,所以只能教比較少。 React箭頭函數 像這樣就是箭頭函數 constructor(prop...

2019-10-07 ‧ 由 vanilla666 分享
DAY 22

Day22:拆解組件(2)傳遞資料給父祖件

今天目的 今天要傳資料給父祖件,所以就直接開始了。 Searchbar.js 組件 像this.props.xxx就可以傳給父祖件資料 import React...

2019-10-08 ‧ 由 vanilla666 分享
DAY 23

Day23:拆解組件(3)父祖件傳來的值來收尋文字

今日目的 今天利用父祖件接收傳進來的值來收尋文字,對了以下都是在App.js。 render() 由於code太多,我們分解這是主要炫覽畫面。 render()...

2019-10-09 ‧ 由 vanilla666 分享
DAY 24

Day24:拆組組件(4),收尋文字放入另一個組件,並且新增輸入框

今天目的 今天把昨天收尋到的放入到Todolist組件,讓Todolist專門用來顯示結果,用Searchbar用來收尋。 在App.js加Todolist i...

2019-10-10 ‧ 由 vanilla666 分享
DAY 25

Day25:拆組組件(5),新增輸入值到收尋欄並且收尋

今天目的 今天要新增資料到收尋欄裡,這樣就可以增加收尋資料。 畫面部分 新增按鈕,輸入值後可以新增資料。 render() { const {sea...

2019-10-11 ‧ 由 vanilla666 分享
DAY 26

Day26:拆解組件(6),優化輸入

今天目的 今天新增資料之後直接用來收尋,我們不用再加上this.state.data,這樣就可以自己加想要的資料。 畫面部分 整體畫面沒有麼改變。 rend...

2019-10-12 ‧ 由 vanilla666 分享
DAY 27

Day27:拆解組件(7),新增刪除功能(上)

今天目的 由於刪除功能就複雜,所以要分成上,下。 重新定義Todolist.js 我們在Todolist.js裡要改寫裡面畫面跟新增函數 畫面部分 新增按鈕,並...

2019-10-13 ‧ 由 vanilla666 分享
DAY 28

Day28:拆解組件(8),新增刪除功能(下)

今天目的 今天要刪除功能實踐,廢話不多說直接開始。 Todolist.js 函數 handleClick改寫 新增this.props.onItemClick把...

2019-10-14 ‧ 由 vanilla666 分享
DAY 29

Day29:組件的生命週期

今天目的 介紹React組件的生命週期,除了平常看到render以外,組件還有其他生命週期,等等就來介紹一些。 元件生命週期 元件的生命週期主要可以分為三個時間...

2019-10-15 ‧ 由 vanilla666 分享
DAY 30

Day30:介紹React輔助軟體,結束感言

今天目的 今天介紹一個軟體,可以看到自訂義組件的內容。 軟體介紹 首先這個軟體,我是從chrome商店載下來;如果安裝完成後建議把整個瀏覽器重新啟動,不然有時候...

2019-10-16 ‧ 由 vanilla666 分享