簡單聊聊，我為什麼又多下載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
像是個例子，我打的這短短幾個字我就對h1設定了長寬、display、position
p.s. className == html的class 是因為這個東西是在js檔寫的，所以為了避免重複才改名的
歐對了，他也有預先生成顏色，要用就直接打就好
反正就是這樣，所以我想我會再創一個沙龍
我知道react跟tailwind其實還有很多用處，不過剩下的功能以後再講
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件，包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化，幫助開發者提高工作效率，適合希望深入瞭解前端開發和網站架構的讀者。
此篇主要紀錄PWA開發過程心得，內容為PWA有什麼特色，為何React可以使PWA成為接近App的操作體驗，以概念敘述與簡單開發流程紀錄來介紹PWA。
什麼是漸進式網路應用程式(PWA)
PWA擁有傳統網頁和移動應用的優點，使網頁應用程序可以像應用程序一樣運行，提供更加優越的用戶體驗
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
可能包含敏感內容
先說一下我的背景，非本科系從 2022/3 開始接觸到前端領域，在摸索過程中遇到六角學院，買了 ＨTML 和 CSS 課程從基礎學起。
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
在 2021 年的剛轉職成為前端工程師的時候，我在面試時滿常會被詢問到 JavaScript 中閉包的議題，當時候自己回答的滿差的，於是在 2022 年時，我寫了一系列的有關於函式程式設計鐵人賽的文章， 裡頭就有簡單提到有關於閉包的議題。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件，包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化，幫助開發者提高工作效率，適合希望深入瞭解前端開發和網站架構的讀者。
此篇主要紀錄PWA開發過程心得，內容為PWA有什麼特色，為何React可以使PWA成為接近App的操作體驗，以概念敘述與簡單開發流程紀錄來介紹PWA。
什麼是漸進式網路應用程式(PWA)
PWA擁有傳統網頁和移動應用的優點，使網頁應用程序可以像應用程序一樣運行，提供更加優越的用戶體驗
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
可能包含敏感內容
先說一下我的背景，非本科系從 2022/3 開始接觸到前端領域，在摸索過程中遇到六角學院，買了 ＨTML 和 CSS 課程從基礎學起。
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
在 2021 年的剛轉職成為前端工程師的時候，我在面試時滿常會被詢問到 JavaScript 中閉包的議題，當時候自己回答的滿差的，於是在 2022 年時，我寫了一系列的有關於函式程式設計鐵人賽的文章， 裡頭就有簡單提到有關於閉包的議題。