iT邦幫忙

鐵人檔案

第 11 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

給初入JS框架新手的React.js入門 系列

會想寫這系列文,是因為當初自學JS的時候,從ES5、jquery突然跳到React,這段過程遇到了不少困難,所以雖然目前React.js的教學文已經很多,但我希望透過參與鐵人賽幫助想入門React的人能更快上手,另一方面也記錄自己的學習、了解自己不足的地方。

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

【React.js入門 - 01】 前言 & 環境設置(上)

前言 會想寫這系列文,是因為一開始,自己只是知道怎麼用 html/css/js 做出想要做的東西,但很多觀念並不是很清晰,導致當初在學React時遇到了不少困...

2019-09-12 ‧ 由 Andy Chang 分享
DAY 2

【React.js入門 - 02】 環境設置(下) - 使用create-react-app

建立專案 在前一篇,我們安裝好了create-react-app,現在就可以用它來建立我們的專案。 請建立一個放專案的資料夾 開啟終端機 ( termi...

2019-09-13 ‧ 由 Andy Chang 分享
DAY 3

【React.js入門 - 03】 開始之前應該要知道的DOM和ES6

當初自己從ES5在進入到框架前,對於前端的觀念僅止於能用html/css/js實現想要呈現的介面。然而在學習React時,有一些重要的事情和ES6的新語法需要先...

2019-09-14 ‧ 由 Andy Chang 分享
DAY 4

【React.js入門 - 04】 HelloWorld! - 從ReactDOM開始

請記得先執行npm start後,開啟localhost:3000。 Part.1 - HelloWorld 現在,我們的專案結構應該是這個樣子: (.vs...

2019-09-15 ‧ 由 Andy Chang 分享
DAY 5

【React.js入門 - 05】 JSX (上)

從函式中的 html 開始 : JSX 接續解釋上一篇的Hello world程式碼: ReactDOM.render( <h1> Hell...

2019-09-16 ‧ 由 Andy Chang 分享
DAY 6

【React.js入門 - 06】 JSX (下)

JSX的規定(接續前一篇) 6.在元素上傳遞屬性時若省略要指定的值,該資料會獲得true布林值 如果你要給的是布林值的true,可以只寫屬性名稱,直接省略要指定...

2019-09-17 ‧ 由 Andy Chang 分享
DAY 7

【React.js入門 - 07】 function component

第一個要講的「專屬於React的語法」是React component。 在製作網頁時,會有一些功能/元件是很常重複用到 (ex:選單) ,卻又不完全一樣。...

2019-09-18 ‧ 由 Andy Chang 分享
DAY 8

【React.js入門 - 08】 用props綁定資料

在上一篇文章中,我們曾經提到: React component能用跟使用button、div這些元素一樣的方法寫在JSX中 看到這句話,不少的人通常會有這個...

2019-09-19 ‧ 由 Andy Chang 分享
DAY 9

【React.js入門 - 09】 用props綁定函式

props除了可以綁定資料外,也可以綁定函式。函式的綁定常被運用在不同元件間的溝通。 目前我們在javasript的程式階層如下: index.js...

2019-09-20 ‧ 由 Andy Chang 分享
DAY 10

【React.js入門 - 10】 夾在中間的props: children

在前面幾篇中,當我們使用React component時,多半是這樣使用的: <元素名稱/> 然而在一開始的時候,我們提到過像這樣的使用方法也是可...

2019-09-21 ‧ 由 Andy Chang 分享