iT邦幫忙

鐵人檔案

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

react.js 的學習筆記 (沒在用硬要學 系列

第一次參加鐵人
可能無法完成全部挑戰
有一種愈看愈不懂的感覺,基礎?應用?

對react 一直都只是會使用看得懂,希望透過這次鐵人讓我更了解它
此篇會寫我學習react過程筆記。

鐵人鍊成 | 共 30 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文
DAY 11

day 11 開始寫畫面 幫Create React App裝個sass

開始寫畫面 幫Create React App裝個sass 在App3.js最上方新增一行 import './app3.scss'; 比較喜歡寫SCSS,S...

2020-09-11 ‧ 由 咖咖拉 分享
DAY 12

day 12 寫一個白天晚上切換功能

利用目前學會的來寫一個簡單的小功能 App3.js import React, { useState } from 'react' import './app...

2020-09-12 ‧ 由 咖咖拉 分享
DAY 13

day 13 useState 做雙向綁定

在react中要做雙向綁定,必須使用react API "noChange",不然資料會被綁死不能使用。 第一個範例 import Reac...

2020-09-13 ‧ 由 咖咖拉 分享
DAY 14

day 14 key的說明

準備一個標準的範例,這章要說key存在的意義, import React, { useState } from "react"; impor...

2020-09-14 ‧ 由 咖咖拉 分享
DAY 15

day 15 useEffect的使用

在hooks裡面useEffect其實就是生命週期,也就是放在裡面的程式,再載入畫面時也會被跟著執行。就類似於JQ的 $(document).ready(fun...

2020-09-15 ‧ 由 咖咖拉 分享
DAY 16

day 16 寫一個簡單的 to do List

學完前面的生命週期,事件後就能自己寫一個todo List ,也就是新增列表 官網範例寫的 class TodoApp extends React.Compon...

2020-09-16 ‧ 由 咖咖拉 分享
DAY 17

day 17 自訂Hooks 打造自己的Hook

先寫一個input的小功能 import React, { useState } from 'react' import './app4.scss'; e...

2020-09-17 ‧ 由 咖咖拉 分享
DAY 18

day 18 知道useState之後還要知道useReducer

這章要講的是useReducer,他是useState進階的語法,專門來處理複雜邏輯。 useReducer import React, {useReducer...

2020-09-18 ‧ 由 咖咖拉 分享
DAY 19

day 19 Hook中的props(useContext

在hooks我覺得useContext變得更複雜了,並沒有因為hooks而變簡單,原先的props反而很單純。官方範例 const themes = { l...

2020-09-19 ‧ 由 咖咖拉 分享
DAY 20

day 20 Hook中的props(useContext - 2

把官方範例刪掉自己寫看看 import React, {useContext} from 'react' const name = React.create...

2020-09-20 ‧ 由 咖咖拉 分享