iT邦幫忙

鐵人檔案

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

React初心者30天的探索之路 系列

未曾接觸過React 的我,決定利用30天來熟悉React!

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

[Day 01]學習前言

打開求職網站發現不少公司都是要求會前端三大框架,不知不覺已經成為前端工程師的標準配備了,好多公司都用React開發 ,不愧是前端框架市佔率最高的!假設學會了Re...

2020-09-01 ‧ 由 Lieutenant 分享
DAY 2

[Day 02] 利用create-react-app來開發React

React可以手動建立環境,或是自己寫webpack設定,安裝相關的套件,身為初學者的我為了比較快速上手(懶),決定採用官方提供的create-react-ap...

2020-09-02 ‧ 由 Lieutenant 分享
DAY 3

[Day 03] create-react-app資料夾結構

成功用npx create-react-app指令建構出來的資料夾目錄會如下圖 那麼接下來就一一介紹每個檔案的用途吧! package.json記錄專案用的套件...

2020-09-03 ‧ 由 Lieutenant 分享
DAY 4

[Day 04] 理解React Virtual DOM

會特別寫這篇的原因是以前學習框架的時候只學語法而不懂原理,如果被問到使用框架有什麼好處可能也回答不太出來,由於React是透過Virtual DOM來提升網頁渲...

2020-09-04 ‧ 由 Lieutenant 分享
DAY 5

[Day 05] React JSX - html 和JavaScript的完美結合

React利用JSX語法來開發,類似XML的寫法,可以將UI介面跟程式邏輯跟緊密的結合(在html中使用JavaScript語法),一般的瀏覽器是看不懂JSX的...

2020-09-05 ‧ 由 Lieutenant 分享
DAY 6

[Day 06] 一磚一瓦-React Component

Component的概念就很像一塊塊積木,可以拼湊組成城堡或是飛船之類的,Component裡頭會回傳React element,透過這些Component就可...

2020-09-06 ‧ 由 Lieutenant 分享
DAY 7

[Day 07] Functional Component v.s Class Component

原本以為只有Class Component的寫法,但在看技術文章的時候發現還有一種寫法是Function component,有了React Hook之後,好像...

2020-09-07 ‧ 由 Lieutenant 分享
DAY 8

[Day 08] React lifeCycle 生命週期

什麼是生命週期?就像人有生老病死,component也有類似這樣的概念,了解生命週期可以讓我們知道如何在「對」的時間做「對」的事。 從官方提供的這張圖表,可以...

2020-09-08 ‧ 由 Lieutenant 分享
DAY 9

[Day 09] React State & props

State state 為自身component 存放資料的地方,管理內部狀態,格式為一個物件,以class component來說,在建立自身的compone...

2020-09-09 ‧ 由 Lieutenant 分享
DAY 10

[Day 10] React CSS 最重要的小事(上)

今天要來介紹在React裡面有哪幾種撰寫css的方式 方法1:inline-style: 這是我最不習慣的寫法,畢竟要用駝峰式的格式寫,就沒有樣式語法自動提示了...

2020-09-10 ‧ 由 Lieutenant 分享