用最簡單的範例，10分鐘入門React!
本文章目的是希望可以用最簡單的範例，來讓大家了解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 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
人們非常生氣
健康的一半是精神健康，病的一半是精神疾病。所以，一個人應該不是感情的囚犯，而是感情的主人。必須控制自己的心情。請不要讓他們控制你。重要的是要記住，心情是健康的接力棒。小型榨油機
我們應該經常記住生活中的三種幸福。
如果家庭不和，人們就容易生病。
一部分的家人每天都在吵鬧。我們應該知道7
10個投資人有9個想等巿場下跌才買進，因為他覺得股巿就是起起浮浮，大家都想要在最佳時機進場，這樣的認知沒有錯，錯的是他對人性的認知不夠。
科斯托蘭尼曾提過：「下坡時肩膀上沒有麥子的人，上坡的時候也不會有。」投資心理在下跌段時，投資人心理的O.S.為：還會跌，等跌多一點再買；止跌時會等確立上昇趨勢才會
埋首苦幹、用時間換取成果，「勤奮」不過是職場上低層次的表演，透過「閱讀」訓練邏輯思考、廣為學習各種知識及他人成功經驗，是最快提升職場實力的方法。
如果你總是抽不出時間讀書，或有選書障礙、經常抓不到要點，誠摯推薦你追蹤、訂閱《老查商業好書簡報》。
待辦清單應該是最廣為人用的時間管理工具之一。但你是否常常列了一堆清單，卻無法有效完成，反而被堆積如山的任務給壓得喘不過氣呢？其實，你並不孤單。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
人們非常生氣
健康的一半是精神健康，病的一半是精神疾病。所以，一個人應該不是感情的囚犯，而是感情的主人。必須控制自己的心情。請不要讓他們控制你。重要的是要記住，心情是健康的接力棒。小型榨油機
我們應該經常記住生活中的三種幸福。
如果家庭不和，人們就容易生病。
一部分的家人每天都在吵鬧。我們應該知道7
10個投資人有9個想等巿場下跌才買進，因為他覺得股巿就是起起浮浮，大家都想要在最佳時機進場，這樣的認知沒有錯，錯的是他對人性的認知不夠。
科斯托蘭尼曾提過：「下坡時肩膀上沒有麥子的人，上坡的時候也不會有。」投資心理在下跌段時，投資人心理的O.S.為：還會跌，等跌多一點再買；止跌時會等確立上昇趨勢才會
埋首苦幹、用時間換取成果，「勤奮」不過是職場上低層次的表演，透過「閱讀」訓練邏輯思考、廣為學習各種知識及他人成功經驗，是最快提升職場實力的方法。
如果你總是抽不出時間讀書，或有選書障礙、經常抓不到要點，誠摯推薦你追蹤、訂閱《老查商業好書簡報》。
待辦清單應該是最廣為人用的時間管理工具之一。但你是否常常列了一堆清單，卻無法有效完成，反而被堆積如山的任務給壓得喘不過氣呢？其實，你並不孤單。