用最簡單的範例，10分鐘入門React!

本文章目的是希望可以用最簡單的範例，來讓大家了解React到底是什麼東西，有什麼好處，並且套用bootstrap的navbar，加上自己客製的css，來達到component重用的目的!

用React來開發網頁，必須把目標拆解成一個個component，最後組合起來就成為一個網站!

假如我們目標是要開發一個有navbar的網頁，可以把它想像成是這樣組成的:

橘色的是Main元件，裡面包含了綠色的Navbar這個元件!

以下直接透過範例來了解，並開發一個可重用的navbar component。

以下是我的環境配置:

專案結構:

public/index.html長這樣:

這邊直接用CDN的方式import bootstrap，然後加上自己定義的navbar.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。

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:

本筆記參考: 1. https://ithelp.ithome.com.tw/articles/10205439 2. https://stackoverflow.com/questions/32230635/passing-in-class-names-to-react-components