一、插件或框架的好處
? ? ? ?從久遠的時代到現在，我們的網頁更加動態化與強大，大家在學習的過程中，發現或了解過很多很多的插件或框架，用過的都知道，方便、快速、簡單上手快、重用性高、維護成本低、兼容性好、穩定性強
? ? ? ?這些插件或框架的出現，是因為JavaScript的越來越強大，都成為服務端語言了。在之前我們開發大型的項目，由于業務邏輯非常復雜，html結構累贅，css樣式龐大，造成了資源的浪費，性能低下，速度慢體驗差，開發維護迭代成本大，沒有正規的項目組織形式，所以大佬們為了解決傳統開發項目導致的一系列問題，我們所熟知的這些框架就應運而生了，例如前端三大框架 angularJS，vueJS，reactJS等
二、React版本
- Facebook對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設Instagram 網站
- 2013 年5月開源了 React
- 2013 年 7 月 3 日
v0.3.0 - 2015年4月開源了 React Native
- 2016 年 4 月 9 日
v15.0.0 - 2017 年 9 月 27 日
v16.0.0核心架構重寫 - 截止到目前：2018年10月9日
v16.5.2
三、前端三大框架對比
1.angularJS
- 是一個比較完善的前端MV*框架，后為Google所收購
- 包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等等所有功能，依賴注入和自定義directive非常靈活，功能強大
- 框架【偏重】，太龐大了，學習路線長
- 主要提供更多的是一整套解決方案，vue和react更像是一個生態
2.reactJS和VueJS
有很多的相似之處：
使用 Virtual DOM
提供了響應式 (Reactive) 和組件化 (Composable) 的視圖組件
將注意力集中保持在核心庫，而將其他功能如路由和全局狀態管理交給相關的庫
react采用的JSX語法，angular推崇使用typescript，也可以直接用js寫。配合上ts還是很爽，后端的也能很快習慣ts的開發。react更注重的是在【view ui】層，用state的改變去re-render頁面。angular是雙向綁定，更加注重的是【model 數據】層，更加擅長對數據的處理和業務邏輯。
React和Vue都有
props的概念，props在組件中是一個特殊的屬性，允許父組件往子組件傳送數據React和Vue都有自己的構建工具，你可以使用它快速搭建開發環境
SSR(server side render) 服務器端渲染
VueJS：
- 都是組件化思想
- 模板的使用和數據渲染非常靈活，層次結構鮮明
- 簡單的語法并能夠簡單快速構建一個項目
- 輕量級，體積小渲染速度更快
- Vue采用的腳手架工具是：【vue-cli】 2.x版本，現在已經是3.x版本了，2.x和3.x構建項目的方式也不同了
cnpm i webpack webpack-cli -gcnpm i vue-cli -gvue init webpack projectNamenpm run dev- 初期是尤雨溪大神維護，現在有加入的團隊組織個人提供技術一同維護迭代更新
- Vue中指令和組件分得更清晰。指令只封裝 DOM 操作，而組件代表一個自給自足的獨立單元 —— 有自己的視圖樣式和數據邏輯
- 跨平臺：windows、android、IOS
安卓開發 IOS開發 原生APP (動畫流暢)
軟件打包APP
react-native開的APP 接近于原生APP
ReactJS：
React 是一個用于構建用戶界面的漸進式 JavaScript 庫，也可以說是 是一個采用聲明式，高效而且靈活的用來構建用戶界面的框架。
可以和你的其它技術棧組合到一起來使用，主要用于構建Ui，不用關注內在的實現原理，只要提供數據就可，也就是數據驅動視圖，不關注路由，不處理數據請求.說白了就是，React 提供了模板語法以及一些函數鉤子用于基本的 HTML 渲染第一個真正意義上把組件化思想移植到前端開發領域，angular 1.x是模塊化思想，從2.x開始也用組件化思想，但angular 一個版本一個樣。學習成本大！ 后來vue也借鑒了react 和angular的思想和優點并簡化了，學習成本非常低
由于react設計思想獨特，性能出眾，靠近后端語言的面向對象編程思想強烈，并且從最早的ui引擎逐漸變成了一套前后端都能滿足的web App解決方案，所以越來越多的人使用。最后孵化出了 react native框架，目標很偉大，就算沒學android開發或ios開發，也能用開發web app的方式去寫 Native(原生的) app。這將是顛覆半個互聯網行業生態，那到時，只要寫一次ui，就能同時運行在瀏覽器，服務器，手機端。
龐大的生態系統，背后是強大的FB團隊，野心更大，angularJS和react是競爭對手，都想取代對方
但學了 react 就可以上react native框架 開發跨平臺app了，所以我看好react
組件有兩個核心概念：props,state。 一個組件就是通過這兩個屬性的值在 render 方法里面生成這個組件對應的 HTML 結構
數據流單向，為啥不是雙向呢？是因為技術不行嗎？NO!，存在即有意義！
react采用的是自己開發的腳手架：create-react-app，全局安裝
cnpm i create-react-app -gnpm run startnpm run eject生成webpack的配置文件react推廣了Virtual DOM，并創造了新的語法——JSX，JSX允許開發者在JavaScript中書寫HTML
react 認為組件才是王道，而組件是和模板緊密關聯的，組件模板和組件邏輯分離讓問題復雜化了。所以就有了 JSX 這種語法，就是為了把 HTML 模板直接嵌入到 JS 代碼里面，這樣就做到了模板和組件關聯，但是 JS 不支持這種包含 HTML 的語法，所以需要通過工具將 JSX 編譯輸出成 JS 代碼才能使用（可以進行跨平臺開發的依據，通過不同的解釋器解釋成不同平臺上運行的代碼，由此才有RNAPP和React開發桌面客戶端）
特點：一切皆組件化思想
基于虛擬DOM性能高效
漸進式，專注ui，可以和其它的技術棧結合開發，很靈活
聲明式程序設計編程
-
JSX語法，允許JavaScript和XML混搭，類似于node 的模板引擎 jade ejs swig handl.. pug...
- JSX語法的誕生
都是組件間傳值通信，都是單向數據流
vue是一個mvvm框架，即數據雙向綁定，即當數據發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，數據也會跟著同步變化。這也算是vue的精髓之處了。值得注意的是，我們所說的數據雙向綁定，一定是對于UI控件來說的，非UI控件不會涉及到數據雙向綁定。 單向數據綁定是使用狀態管理工具（如redux）的前提。如果我們使用vuex，那么數據流也是單向的
兩者并不互斥， 在全局性數據流使用單向，方便跟蹤
局部性數據流使用雙向，簡單易操作。處理表單，vue的雙向數據綁定用起來就特別舒服了
四、ReactJS學習
React基礎
- babelJS
2015年6月， ES2015（即 ECMAScript 6、ES6） 正式發布。雖然 ES6 提出了許多激動人心的新特性，但那時許多瀏覽器不支持或者支持不好，沒有普遍地推廣起來。
而 Babel 的出現，讓我們可以現在就使用最新的 JavaScript 語法，而不用等待瀏覽器提供支持。
Babel 是一個轉換編譯器，它能將 ES6 轉換成可以在瀏覽器中運行的代碼。Babel 可以處理 ES6 的所有新語法，并且內置了 React JSX 擴展及 Flow 類型注解支持。
在線語法轉換
- babel-standalone
由于 Babel 本身的設計是基于 node.js 環境下運行使用的，而這個名為 babel-standalone 的開源項目，則支持非 node.js 環境下使用 Babel。
babel-standalone 已經包含了 Babel 所有的插件，其體積還是很大的（目前版本 6.26.0，未壓縮的 js 文件 1.78MB，壓縮了則為 772kb）。
使用這個類庫，可以讓我們實時在線轉換 es6 為 js，同時支持 babel 提供的各種插件，而且最關鍵的是全特性支持，包括 amd 包裹，將 import 轉換為 amd 的 require 等等。
- 安裝react模塊
1.安裝nodeJS
? ? ? ?去官網下載
? ? ? ?node -v
? ? ? ?npm -v 包管理工具 國外的，下載極其慢
2.全局安裝cnpm，并設置淘寶鏡像
? ? ? ?國內的包管理工具，很快
? ? ? ?npm install -g cnpm --registry=https://registry.npm.taobao.org
3.卸載模塊
? ? ? ?npm uninstall Name
? ? ? ?cnpm uninstall Name
4.安裝react依賴模塊（測試環境，快速上手）
? ? ? ?cnpm init -y 定義項目所需要的各種模塊及配置信息
? ? ? ?cnpm i react react-dom babel-standalone -S
? ? ? ?-S => --save 表示生產環境也需要使用的模塊
? ? ? ?-D => --save-dev 表示只在開發環境用到的模塊
<script src="./node_modules/babel-standalone/babel.js"></script>
<script>
//手動使用babel轉換
// let es6 = 'const fn = () => "Hello World"';
// let es5 = Babel.transform(es6, {presets:['es2015']}).code;
// console.log(es5);
// let es6 = `let {name, age} = {
// name : '張三',
// age : 18
// }`;
// let es5 = Babel.transform(es6, {presets:['es2015']}).code;
// console.log(es5);
</script>
<script type="text/babel">
//瀏覽器能夠識別react語法是要在基于babel
let {name, age} = {
name:'張三',
age:18
}
console.log(name, age)
</script>
<!-- 入口-->
<div id="app"></div>
<script src="./node_modules/babel-standalone/babel.js"></script>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
//console.log( ReactDOM )
// 利用 babel 把h1標簽 渲染到 #app標簽里面
// 在講react腳手架前 都是利用此種方法 學習 react基本語法
ReactDOM.render(<h1>hello world</h1>,document.querySelector('#app'));
</script>
