彭彭學院

React 套件簡介

彭彭React 網頁應用,2017-09-27

React 是由 Facebook 團隊所建構、維護的一款 JavaScript 套件,主要用來做使用者介面的開發。使用 React 套件撰寫網頁應用,很輕易的就能生出乾淨俐落、易於維護的程式碼。

React 適用情境

世界上沒有完美的程式套件,只有因地制宜,各有所長的不同選擇。以下情境,適合考慮用 React 來進行開發:

  • 打算開發一個強大的網頁應用(請參考 Piconion 影像編輯),例如線上影像編輯、圖表繪製、客戶管理、內容管理系統等等。
  • 想在現有網頁中,加入一些小功能,例如切換開關介面、跳出式對話框、可搜尋列表等等。React 能有效包裝元件,在不影響其他設計的情況下,達成使命!
  • 希望透過 JavaScript 開發手機應用程式,那麼 React 是基礎功課!接著,可以用 React Native 完成原生的手機應用程式。

React 不適用情境

承上,總有些時候,我們可能不會選擇用 React 做開發,例如以下情況:

  • 需要緊迫地完成專案,越快越好,時間有限,程式碼的品質暫時不重要。
  • 簡單的、一次性使用的到達網頁(Landing Page),React 太搞剛,殺雞用牛刀。
  • 團隊中,主要成員非工程背景,且無資深工程師協力時。React 不適合由初、中階的技術人員掌舵

聽說 React 授權有疑慮?

確實,過去 React 授權文字中,有防禦性的專利保護條款。但在開源社群的與論壓力之後,Facebook 已經於 2017 後半年,將 React 改用 MIT 開源授權條款,相當有誠意的解決了眾人的疑慮。這部份,大家可以不用擔心。

到底 React 長什麼樣子?

請參考以下片段的程式碼,若有進一步的興趣,可以參考 React 課程教學

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React 快速開始</title>
<!-- 載入相關套件 -->
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// 快速開始:用 React 建立 <h1> 標題
class MyHead extends React.Component{
    render(){
        return <h1>Hello React</h1>;
    }
}
window.addEventListener("load", ()=>{
    ReactDOM.render(<MyHead/>, document.body);
});
</script>
</head>
<body></body>
</html>

投資 React 有價值嗎?

投資一定有風險,技術投資有賺有賠。很簡單的道理,所以彭彭無法正面回答,只能說,至少我是已經把頭洗下去了 XD


返回前頁

回到上方

相關課程推薦