iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

自己工具,自己 React - React學習 系列

在軟體開發中會用到各種工具,無論是時間換算、單位換算等等換算,或是隨機資料產出,這些看似小小工具,但如果有地方可以快速的提供服務,那該有多好~

儘管網路上有許多工具可以使用,但睫毛希望藉由這次的機會,學習 React。運用新的技巧和新穎的元件,打造出符合自己使用習慣的開發工具。

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

【D1】前言與規劃

規劃 之前學的網頁,比較偏向以前的 Javascript ,後來有學一點 Vue.js,而現在 React.js 成為顯學,因此學習新的網頁工具就是朝這邊發展...

2022-09-16 ‧ 由 eyelash*睫毛 分享
DAY 2

【D2】 初探 React

React 的超級簡介 React 網路上有很多介紹與教學,這邊就不做太多介紹。 React.js 是免費的開放原始碼前端 JavaScript 工具庫,是由...

2022-09-17 ‧ 由 eyelash*睫毛 分享
DAY 3

【D3】 設定環境:React 與 VS Code

安裝 VS code 開始前,不例外的就是設定環境,這邊先安裝 VS Code (Visual Studio Code),因為藉由工具可以快速的安裝與檢測 Re...

2022-09-18 ‧ 由 eyelash*睫毛 分享
DAY 4

【D4】 第一個 React :瞭解架構與解析程式

簡單做個 React 的 Hello, world。 官方範例 從昨日的作業中,預設運作中可以看到預設畫面,這時我們去看資料夾可以知道他的結構。 資料夾與檔案解...

2022-09-19 ‧ 由 eyelash*睫毛 分享
DAY 5

【D5】 更熟悉 React 改寫範本

運用官方範例,改寫自己的 Hello World。 建立 .jsx 建立檔案:HelloWorld.js 檔案做為我們的範例檔,內容為: function H...

2022-09-20 ‧ 由 eyelash*睫毛 分享
DAY 6

【D6】 建立互動元件

這次要建立互動的功能,讓我們動作可以很快在 .js 檔案中運作,並且轉譯(render,之前叫做「渲染」,感覺「轉譯」比較合理,先以「轉譯」為主)到畫面。 目標...

2022-09-21 ‧ 由 eyelash*睫毛 分享
DAY 7

【D7】 解析 .jsx

經過幾天的實作與摸索,建立出第一個 React 運用,但是裡面還是有些東西不熟悉,這時要探討一下這些是什麼東西。 本日的範本是昨日-【D6】的 .jsx,這邊會...

2022-09-22 ‧ 由 eyelash*睫毛 分享
DAY 8

【D8】 建立更多資訊的 jsx

建立一個比較複雜的 .jsx,讓後面使用這個範本進行作業。這邊嘗試用 .jsx 進行副檔名,非原先的.js。 建立 .jsx 建立一個 ChangeStr.js...

2022-09-23 ‧ 由 eyelash*睫毛 分享
DAY 9

【D9】 製作簡易互動的 .jsx

昨日【D8】有點小問題,其實<div id="result">的值React 已經會幫忙轉譯,可以顯示test,但是從input...

2022-09-24 ‧ 由 eyelash*睫毛 分享
DAY 10

【D10】 小工具:溫度換算(part 1)

攝氏與華氏 常見的氣溫標記方式為攝氏溫標(degree Celsius)和華氏溫標(degree Fahrenheit),也就是常見的 °C 或 °F 兩種,這...

2022-09-25 ‧ 由 eyelash*睫毛 分享