iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
4
Modern Web

React 30天系列 第 1

Day 01-前言&綱要

第一天開跑啦!
透過這個機會記錄自己學React的過程,也可以藉機練習表達能力...
(文字表達能力很差有救嗎╮( ̄▽ ̄"")╭)

crazy

之後的內容打算以輕鬆愉快(?!)的方式陳述~(完全圖文不符)
以下列出這三十天內會出現的項目。

React

  1. 打造個人工作室(開發環境建置)
  2. 其實我只是披著html的javascript(JSX)
  3. React的靈魂角色(Components)
  4. 靈魂角色的家庭成員(Props & State)
  5. 生命有限好好把握(Lifecycle)
  6. 來點互動吧(Handling Events)
  7. 淚水交織的表單(Form)
  8. [番外]繽紛世界(CSS / Autoprefixer / SCSS with Parcel)
  9. todos小練習
  10. 回憶過去

Redux

  1. 東西太多心好累,拜託Redux來幫忙(環境設定)
  2. state & store你哪位?
  3. 改變資料請靠它(action, dispatch, reducer)
  4. 結合react和redux吧(connect)
  5. middleware你幹嘛?(react-promise)
  6. 小練習
  7. 回憶過去

React Router 4

  1. 環境設定
  2. 基本面靠你們了(Router, Route, Switch)
  3. 這裡不能來,閃閃去旁邊(Redirect)

加映

  1. react-intl
  2. 用react-intl做點什麼吧!

大概粗略分一下會有這些內容,如果有要增減就再說啦。
從小就是作文苦手的我,能寫出什麼我自己也很好奇啊啊啊(;´༎ຶД༎ຶ`)

不求完美,只求不傷眼
還有29天

對了對了本人初出茅廬有組隊
武裝狗狗

團隊名稱:武裝狗狗
團員介紹:
Summer - 你懂 JavaScript 嗎?
Hunter -用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog

這次謝謝團員們的邀請
接下來的日子一起加油吧


下一篇
Day 02-打造個人工作室(開發環境建置)
系列文
React 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
神Q超人
iT邦研究生 5 級 ‧ 2018-10-08 19:06:08

加油!一起學習!

0
TomasLin
iT邦新手 5 級 ‧ 2018-10-09 10:44:32

(個人理解)
SPA 不一定要用 React Router 才能實現
因為React 是一個 Component 的世界
每一個頁面也都是小的 Component 的組合

尤其使用了 redux 之後
你每次開一個新的 route都還要做一個 connect
每次換頁的成本頗高
可以在 store 中放一個字串
在一個 MainScene 中使用 switch 做頁面切換
這樣就可以實現換頁效果
而且頁面也可以做第一階段的攤平化

至於什麼時候要使用 React Router?
基本上有需求讓使用者直接輸入 URL 可以直接跳到該頁面的時候
才會有使用 React Router 的必要性吧
這兩種手法也可以混合使用 那也是另一個故事了

Yvonne iT邦新手 5 級 ‧ 2018-10-12 16:52:09 檢舉

之前想回沒過新手任務,抱歉了!
看完你這段話後我有去搜尋SPA的定義Single-page Application
的確react並不指名要react router才能實現SPA,我之前的理解太狹隘了,謝謝你!/images/emoticon/emoticon41.gif

我要留言

立即登入留言