1. React介紹 React開發環境搭建 React第一個程式
阿新 • • 發佈：2019-01-04
什麼是 React
React 是 Facebook 釋出的 JavaScript 庫，以其高效能和獨特的設計理念受到了廣泛關注。React的開發背景
Facebook需要解決的問題：構建資料不斷變化的大型應用。 資料變化 1. 大量DOM操作 （方案：自動DOM操作 ） 2. 邏輯極其複雜 （方案：狀態對應內容 ）React的應用場景
複雜場景下的高效能 重用元件庫，元件組合React的特點
1. 簡單 2. 宣告式 React的核心是元件，元件化的開發思路，元件的設計目的是提高程式碼複用率、降低測試難度和程式碼複雜度React的發展過程
2013年6月，Facebook官方釋出React 2013年9月，React熱度開始上漲 2015年3月，React Native釋出開發工具
Sublime Text 3 安裝Sublime Text 3外掛： 1. 安裝外掛管理工具 packagecontrol（參考官網安裝介紹import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );然後回車執行 安裝外掛方式，選擇Install Package 然後輸入具體的外掛就可以 2. 安裝Emmet：輸入Emmet進行安裝 3. 安裝babel-sublime 支援ES6， React.js, jsx程式碼高亮 輸入babel-sublime進行安裝 配置：開啟選單view， Syntax -> Open all with current extension as… -> Babel -> JavaScript (Babel)，選擇babel為預設 javascript 開啟syntax 4. JsFormat 格式化 js 程式碼 ：輸入JsFormat進行安裝by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
開發環境
安裝React的Chrome外掛“React Developer Tools”方便進行除錯，安裝完成審查元素的時候可以看到React的選項卡用React編寫第一個程式Hello, World
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello, World</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
參考 極客學院 慕課網程式碼 檢視程式碼 資料