iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

看初心者怎麼學React 系列

4月底的轉職的菜鳥,剛學完vue,緊接著要挑戰從零開始學習react了!
從建立專案到完成todolist的過程中逐步了解其中的基礎架構,比較React和vue兩大框架的差異性,做出我第一個React專案,用初學者的角度去紀錄過程遇到的問題,希望能幫助到同樣程度的學習者,互相交流進步!

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文 團隊寫 code 需要講幹話
DAY 1

Day1 參賽前言

緊張緊張,刺激刺激,從去年下半年才參加UI/UX設計班的菜逼八,今年居然就自不量力的參加傳說中的鐵人賽!多虧UI/UX班結識的好夥伴們的熱情邀約,才讓我這次鼓起...

2021-09-16 ‧ 由 Taco 分享
DAY 2

Day2 React是什麼呢?

React是由facebook推出的前端函式庫 (library),主要使用語言是Javascript的ES6。 然而React其實不是個框架(Framewor...

2021-09-17 ‧ 由 Taco 分享
DAY 3

Day3 建立React環境

這次來介紹兩個方式在專案裡設置使用React吧! 本系列文章使用的環境系統為 電腦系統:macOS Big Sur 11.2.3 M1晶片 編輯器:vscode...

2021-09-18 ‧ 由 Taco 分享
DAY 4

Day4 專案架構

之後會以create-react-app建立的專案,來進行React後續的學習, 來看看建立後專案的結構,了解一下預設資料夾和檔案有什麼用途吧~ 專案內部的資料...

2021-09-19 ‧ 由 Taco 分享
DAY 5

Day5 宣告元件 - Functional Component

React的核心就是將UI拆成不同的程式碼,以元件的方式獨立,讓元件可以在主程式中重複利用。 而要使用這些元件前我們必須將元件宣告後輸出使用。 宣告方法有兩種方...

2021-09-20 ‧ 由 Taco 分享
DAY 6

Day6 宣告元件 - Class Component

Class Component用的是ES6中的class語法建立元件,接著去 extends(繼承)React.component中定義的內容。 被定義的內容渲...

2021-09-21 ‧ 由 Taco 分享
DAY 7

Day7 什麼是JSX?

這個看起來很像HTML的標籤語法,但實際上他是JavaScript的語法所擴充出來的 JSX語法 const element = <h1>Hello...

2021-09-22 ‧ 由 Taco 分享
DAY 8

Day8 撰寫JSX

在JSX中嵌入javascript表達式 ,要使用在JSX中用大括號{}將包javascript表達式包起來就可以使用了。 在大括號{ }中可以使用: jav...

2021-09-23 ‧ 由 Taco 分享
DAY 9

Day9 渲染元件

渲染(render)元件 我們知道了JSX的語法寫出元件的結構,也知道如何宣告元件了, 現在來學如何把元件渲染到畫面上吧! 利用react-dom提供的Reac...

2021-09-24 ‧ 由 Taco 分享
DAY 10

Day10 React Props

此用React的最大目的就是將UI分區模組化成獨立的、可複用的元件。 該如何運用這些元件? 就是將資料模組套入元件中,讓元件隨著的資料模型的更新,去重新渲染在畫...

2021-09-25 ‧ 由 Taco 分享