簡單聊聊,我為什麼又多下載react跟tailwind使用

更新於 發佈於 閱讀時間約 2 分鐘
痾,隔了好幾天真是抱歉,我原本預計每格兩三天就發一次文,但由於我又去學了react跟tailwind,所以花了不少時間,反正我就簡單說明一下為什麼我中途去學這兩個函式庫。

先從react開始:

其實市面上有許多前端框架像是react,angular,vue...

至於為什麼我會選擇react…

痾…不知道

我當時只是隨便選的ww

哈哈,幸好學下來我也覺得react不錯用

React能幫我把每個html組件分類,分檔案,眼睛終於不會脫窗,找不到我要的組件在哪裡,你們可能覺得我太誇張,可是這是真的,明明每個東西都用div分的乾淨又整齊,但每次要用的時候,還是找半天,好痛苦阿啊。

當然react也有幫我的程式做優化,所以會有一些特性

剛開始用會比較不習慣,像是react是單向溝通的架構,(父容器能傳資料給子項,但子項不能傳資料給父容器,不過要傳也是可以拉,只是盡量不要用),要換一下思考方式

而且要熟悉一下Hook(react的func)的用法,新手基本上學useState 跟 useEffect就夠了,但其實我覺得會useState就已經能做出很多功能了


接著是tailwind:

其實原因很簡單,就只是因為用了react之後,我每個檔案的程式變很短,所以我就覺得好像不用特地在分一個檔案去管理style了。

簡單說一下,tailwindcss是一個加速編輯css的架構,他會預先生成很多class,要用的時候就直接去html的class=''那裏打入名字​
預先生成的class

預先生成的class

像是個例子,我打的這短短幾個字我就對h1設定了長寬、display、position

raw-image

p.s. className == html的class 是因為這個東西是在js檔寫的,所以為了避免重複才改名的

歐對了,他也有預先生成顏色,要用就直接打就好

raw-image


反正就是這樣,所以我想我會再創一個沙龍

我知道react跟tailwind其實還有很多用處,不過剩下的功能以後再講

留言
avatar-img
留言分享你的想法!
avatar-img
Web開發日誌
2會員
5內容數
這是一篇帶新手快速入門的Web教學。會帶你製作第一個todo-list,雖然看起來很簡單,但其實蘊含很多觀念。
Web開發日誌的其他內容
2024/07/10
這次的side bar不一樣了,上一次我好像做的太簡單了,所以完讀率只有14%,我好難過啊(;´д`)ゞ,所以我這準備的內容有多一點。 這次的目標 按鈕的排版 按鈕滑過去會有顏色變化 Side bar能夠展開 箭頭能夠移動至被選擇的物件上 宣告 這次我創了兩個檔案 SideBa
Thumbnail
2024/07/10
這次的side bar不一樣了,上一次我好像做的太簡單了,所以完讀率只有14%,我好難過啊(;´д`)ゞ,所以我這準備的內容有多一點。 這次的目標 按鈕的排版 按鈕滑過去會有顏色變化 Side bar能夠展開 箭頭能夠移動至被選擇的物件上 宣告 這次我創了兩個檔案 SideBa
Thumbnail
2024/07/09
我用了vite react tailwind , 並用typescript寫 跟他一樣 [vite] 使用 Vite 快速建立 React + TypeScript + Tailwind CSS 專案 | WeiWei 的前端程式教學與筆記 (wei-docusaurus-vercel.verc
2024/07/09
我用了vite react tailwind , 並用typescript寫 跟他一樣 [vite] 使用 Vite 快速建立 React + TypeScript + Tailwind CSS 專案 | WeiWei 的前端程式教學與筆記 (wei-docusaurus-vercel.verc
2024/06/30
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
2024/06/30
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
先從react開始: 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
Thumbnail
先從react開始: 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
Thumbnail
此篇主要紀錄PWA開發過程心得,內容為PWA有什麼特色,為何React可以使PWA成為接近App的操作體驗,以概念敘述與簡單開發流程紀錄來介紹PWA。 什麼是漸進式網路應用程式(PWA) PWA擁有傳統網頁和移動應用的優點,使網頁應用程序可以像應用程序一樣運行,提供更加優越的用戶體驗
Thumbnail
此篇主要紀錄PWA開發過程心得,內容為PWA有什麼特色,為何React可以使PWA成為接近App的操作體驗,以概念敘述與簡單開發流程紀錄來介紹PWA。 什麼是漸進式網路應用程式(PWA) PWA擁有傳統網頁和移動應用的優點,使網頁應用程序可以像應用程序一樣運行,提供更加優越的用戶體驗
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
Thumbnail
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
Thumbnail
React Props - React 白話文運動。這一篇則會針對 React 語法進一步做講解, 前幾篇也學會了如何建立一個 React 元件,並且學會了元件之間有父子元件的關係。這篇會介紹 React Props 的概念,包含了:React 元件宣告、React Props。
Thumbnail
前言 create react app 是一個可以快速設定 react 專案的一個工具,在建立專案時已經把 babel,webpack 都已經預先封裝設置好,如果我們要修改 webpack alias 設定該如何設定呢 什麼是 alias alias 在 webpack 設定意義叫做,檔案路徑
Thumbnail
前言 create react app 是一個可以快速設定 react 專案的一個工具,在建立專案時已經把 babel,webpack 都已經預先封裝設置好,如果我們要修改 webpack alias 設定該如何設定呢 什麼是 alias alias 在 webpack 設定意義叫做,檔案路徑
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News