用最簡單的範例，10分鐘入門React!
閱讀時間約 4 分鐘
本文章目的是希望可以用最簡單的範例，來讓大家了解React到底是什麼東西，有什麼好處，並且套用bootstrap的navbar，加上自己客製的css，來達到component重用的目的!
用React來開發網頁，必須把目標拆解成一個個component，最後組合起來就成為一個網站!
假如我們目標是要開發一個有navbar的網頁，可以把它想像成是這樣組成的:
橘色的是Main元件，裡面包含了綠色的Navbar這個元件!
以下直接透過範例來了解，並開發一個可重用的navbar component。
以下是我的環境配置:
專案結構:
public/index.html長這樣:
這邊直接用CDN的方式import bootstrap，然後加上自己定義的navbar.css。
放在components下，未來如果有更多元件，可以有自己的css。
放在components下，未來如果有更多元件，可以有自己的css。
app.jsx:
app.jsx為程式進入點，這邊可以想像成，我的網頁有一個最大的Main元件，裡面包含很多子元件，所以這邊直接把Main元件import進來，指到root div。
Main.jsx:
而Main元件裡面又可能有navbar, header, content, footer...等等，這邊的範例為了簡單化，只做了一個Navbar元件。
其實就是import Navbar，直接在render()中回傳Navbar，然後設定bgTheme 這個props，傳入Navbar 元件中。
props可以用來傳參數用，假如這個navbar會在很多地方用到，然後在不同地方想要有不同的背景顏色，就可以用這種方式!
最後的export Main，主要是想要讓app.jsx可以import的到Main。
Navbar.jsx:
在Navbar裡面就是直接套bootstrap，要注意的是jsx中要用className。
className={`navbar navbar-default ${this.props.bgTheme}`}
這個東西意思其實就是除了boostrap本身有的兩個class: navbar, navbar-default外，多設定一個傳進來的參數bgTheme。
className={`navbar navbar-default ${this.props.bgTheme}`}
這個東西意思其實就是除了boostrap本身有的兩個class: navbar, navbar-default外，多設定一個傳進來的參數bgTheme。
public/css/components/navbar.css:
從原始碼來看應該不難理解，由於index.html中head有import bootstrap lib，還有自己定義的navbar.css，最後jsx都被build在bundle.js裡:
最後來看看網頁的結果:
值得一提的是，如果我把Main.jsx中傳入的navbar背景主題換掉，改成navbar-theme-red，navbar背景就會變紅色。
結論:
使用React開發網頁必須把網頁拆解成元件來思考，這個範例其實就是Main裡面有Navbar，未來如果有Footer元件，相信看到這邊，大家都知道怎麼加了吧!
假如一個元件被開發出來後，在很多頁面都會用到，而且只差在style可能不太一樣，就很適合用props這個特性，把style傳入元件中，例如本範例的navbar，達到component重用的目的!
當然，React還有很多東西需要更深入學習，例如事件處理、元件生命週期、資料串接等等東西，小弟也是剛入門順便做個筆記，若有錯誤還請不吝給小弟指教，希望這篇文章可以幫助到大家，未來若有機會再補充更進階的應用，謝謝!
Source code:
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
你可能也想看
Google News 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
先從react開始：
其實市面上有許多前端框架像是react,angular,vue...
至於為什麼我會選擇react…
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
效能優化：如果你的網站只使用 Boot
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
此篇主要紀錄PWA開發過程心得，內容為PWA有什麼特色，為何React可以使PWA成為接近App的操作體驗，以概念敘述與簡單開發流程紀錄來介紹PWA。
什麼是漸進式網路應用程式(PWA)
PWA擁有傳統網頁和移動應用的優點，使網頁應用程序可以像應用程序一樣運行，提供更加優越的用戶體驗
Storybook 是一個用來透過獨立元件快速開發 UI 介面的工具，以往要開發元件時，我們可能需要建立一個全新的頁面才能進行開發，但這樣的開發方式可能會有一個狀況：沒有辦法事先開發或是預覽流程中不存在的元件。
透過 Storybook 我們在開發元件時，不需要重新建立複雜的頁面結構⋯⋯
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
這是一個介紹React Text Wrap Balancer套件的文章，主要內容包括套件的使用方式，常見的實作方式和一些注意事項。文章內容較長，內容大概是在介紹套件的使用方法、使用技巧和注意事項。
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
先從react開始：
其實市面上有許多前端框架像是react,angular,vue...
至於為什麼我會選擇react…
使用靜態檔案下載 Bootstrap 的原因主要有以下幾點：
客製化：當你下載了 Bootstrap 的靜態檔案，你可以根據自己的需求來修改這些檔案。例如，你可以改變預設的顏色、字型大小、間距等，使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。
效能優化：如果你的網站只使用 Boot
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
此篇主要紀錄PWA開發過程心得，內容為PWA有什麼特色，為何React可以使PWA成為接近App的操作體驗，以概念敘述與簡單開發流程紀錄來介紹PWA。
什麼是漸進式網路應用程式(PWA)
PWA擁有傳統網頁和移動應用的優點，使網頁應用程序可以像應用程序一樣運行，提供更加優越的用戶體驗
Storybook 是一個用來透過獨立元件快速開發 UI 介面的工具，以往要開發元件時，我們可能需要建立一個全新的頁面才能進行開發，但這樣的開發方式可能會有一個狀況：沒有辦法事先開發或是預覽流程中不存在的元件。
透過 Storybook 我們在開發元件時，不需要重新建立複雜的頁面結構⋯⋯
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計，也可提升設計審美或與設計師溝通的能力。
然而前端開發者也算是擁有設計師的天賦，透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，
這是一個介紹React Text Wrap Balancer套件的文章，主要內容包括套件的使用方式，常見的實作方式和一些注意事項。文章內容較長，內容大概是在介紹套件的使用方法、使用技巧和注意事項。