一、插件或框架的好處
? ? ? ?從久遠(yuǎn)的時代到現(xiàn)在友瘤，我們的網(wǎng)頁更加動態(tài)化與強(qiáng)大翠肘，大家在學(xué)習(xí)的過程中，發(fā)現(xiàn)或了解過很多很多的插件或框架商佑，用過的都知道锯茄，方便、快速茶没、簡單上手快肌幽、重用性高、維護(hù)成本低抓半、兼容性好喂急、穩(wěn)定性強(qiáng)
? ? ? ?這些插件或框架的出現(xiàn)，是因為JavaScript的越來越強(qiáng)大笛求，都成為服務(wù)端語言了廊移。在之前我們開發(fā)大型的項目，由于業(yè)務(wù)邏輯非常復(fù)雜探入，html結(jié)構(gòu)累贅狡孔，css樣式龐大，造成了資源的浪費(fèi)蜂嗽，性能低下苗膝，速度慢體驗差，開發(fā)維護(hù)迭代成本大植旧，沒有正規(guī)的項目組織形式辱揭，所以大佬們?yōu)榱私鉀Q傳統(tǒng)開發(fā)項目導(dǎo)致的一系列問題离唐，我們所熟知的這些框架就應(yīng)運(yùn)而生了，例如前端三大框架 angularJS问窃，vueJS亥鬓，reactJS等
二、React版本
- Facebook對市場上所有 JavaScript MVC 框架域庇，都不滿意嵌戈，就決定自己寫一套，用來架設(shè)Instagram 網(wǎng)站
- 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核心架構(gòu)重寫 - 截止到目前：2018年10月9日
v16.5.2
三听皿、前端三大框架對比
1.angularJS
- 是一個比較完善的前端MV*框架咕别，后為Google所收購
- 包含模板，數(shù)據(jù)雙向綁定写穴，路由，模塊化雌贱，服務(wù)啊送，過濾器，依賴注入等等所有功能欣孤，依賴注入和自定義directive非常靈活馋没，功能強(qiáng)大
- 框架【偏重】，太龐大了降传，學(xué)習(xí)路線長
- 主要提供更多的是一整套解決方案篷朵，vue和react更像是一個生態(tài)
2.reactJS和VueJS
有很多的相似之處：
使用 Virtual DOM
提供了響應(yīng)式 (Reactive) 和組件化 (Composable) 的視圖組件
將注意力集中保持在核心庫，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫
react采用的JSX語法婆排，angular推崇使用typescript声旺，也可以直接用js寫。配合上ts還是很爽段只，后端的也能很快習(xí)慣ts的開發(fā)腮猖。react更注重的是在【view ui】層，用state的改變?nèi)e-render頁面赞枕。angular是雙向綁定澈缺，更加注重的是【model 數(shù)據(jù)】層，更加擅長對數(shù)據(jù)的處理和業(yè)務(wù)邏輯炕婶。
React和Vue都有
props的概念姐赡，props在組件中是一個特殊的屬性，允許父組件往子組件傳送數(shù)據(jù)React和Vue都有自己的構(gòu)建工具柠掂，你可以使用它快速搭建開發(fā)環(huán)境
SSR(server side render) 服務(wù)器端渲染
VueJS：
- 都是組件化思想
- 模板的使用和數(shù)據(jù)渲染非常靈活项滑，層次結(jié)構(gòu)鮮明
- 簡單的語法并能夠簡單快速構(gòu)建一個項目
- 輕量級，體積小渲染速度更快
- Vue采用的腳手架工具是：【vue-cli】 2.x版本陪踩，現(xiàn)在已經(jīng)是3.x版本了杖们，2.x和3.x構(gòu)建項目的方式也不同了
cnpm i webpack webpack-cli -gcnpm i vue-cli -gvue init webpack projectNamenpm run dev- 初期是尤雨溪大神維護(hù)悉抵，現(xiàn)在有加入的團(tuán)隊組織個人提供技術(shù)一同維護(hù)迭代更新
- Vue中指令和組件分得更清晰。指令只封裝 DOM 操作摘完，而組件代表一個自給自足的獨(dú)立單元 —— 有自己的視圖樣式和數(shù)據(jù)邏輯
- 跨平臺：windows姥饰、android、IOS
安卓開發(fā) IOS開發(fā) 原生APP (動畫流暢)
軟件打包APP
react-native開的APP 接近于原生APP
ReactJS：
React 是一個用于構(gòu)建用戶界面的漸進(jìn)式 JavaScript 庫孝治，也可以說是 是一個采用聲明式列粪，高效而且靈活的用來構(gòu)建用戶界面的框架。
可以和你的其它技術(shù)棧組合到一起來使用谈飒，主要用于構(gòu)建Ui岂座，不用關(guān)注內(nèi)在的實現(xiàn)原理，只要提供數(shù)據(jù)就可杭措，也就是數(shù)據(jù)驅(qū)動視圖费什，不關(guān)注路由，不處理數(shù)據(jù)請求.說白了就是手素，React 提供了模板語法以及一些函數(shù)鉤子用于基本的 HTML 渲染第一個真正意義上把組件化思想移植到前端開發(fā)領(lǐng)域鸳址，angular 1.x是模塊化思想，從2.x開始也用組件化思想泉懦，但angular 一個版本一個樣稿黍。學(xué)習(xí)成本大！ 后來vue也借鑒了react 和angular的思想和優(yōu)點(diǎn)并簡化了崩哩，學(xué)習(xí)成本非常低
由于react設(shè)計思想獨(dú)特巡球，性能出眾，靠近后端語言的面向?qū)ο缶幊趟枷霃?qiáng)烈邓嘹，并且從最早的ui引擎逐漸變成了一套前后端都能滿足的web App解決方案酣栈，所以越來越多的人使用。最后孵化出了 react native框架汹押，目標(biāo)很偉大钉嘹，就算沒學(xué)android開發(fā)或ios開發(fā)，也能用開發(fā)web app的方式去寫 Native(原生的) app鲸阻。這將是顛覆半個互聯(lián)網(wǎng)行業(yè)生態(tài)跋涣，那到時，只要寫一次ui鸟悴，就能同時運(yùn)行在瀏覽器陈辱，服務(wù)器，手機(jī)端细诸。
龐大的生態(tài)系統(tǒng)沛贪，背后是強(qiáng)大的FB團(tuán)隊，野心更大，angularJS和react是競爭對手利赋，都想取代對方
但學(xué)了 react 就可以上react native框架 開發(fā)跨平臺app了水评，所以我看好react
組件有兩個核心概念：props,state。 一個組件就是通過這兩個屬性的值在 render 方法里面生成這個組件對應(yīng)的 HTML 結(jié)構(gòu)
數(shù)據(jù)流單向媚送，為啥不是雙向呢中燥？是因為技術(shù)不行嗎？NO!塘偎，存在即有意義疗涉！
react采用的是自己開發(fā)的腳手架：create-react-app，全局安裝
cnpm i create-react-app -gnpm run startnpm run eject生成webpack的配置文件react推廣了Virtual DOM吟秩，并創(chuàng)造了新的語法——JSX咱扣，JSX允許開發(fā)者在JavaScript中書寫HTML
react 認(rèn)為組件才是王道，而組件是和模板緊密關(guān)聯(lián)的涵防，組件模板和組件邏輯分離讓問題復(fù)雜化了闹伪。所以就有了 JSX 這種語法，就是為了把 HTML 模板直接嵌入到 JS 代碼里面壮池，這樣就做到了模板和組件關(guān)聯(lián)祭往，但是 JS 不支持這種包含 HTML 的語法，所以需要通過工具將 JSX 編譯輸出成 JS 代碼才能使用（可以進(jìn)行跨平臺開發(fā)的依據(jù)火窒，通過不同的解釋器解釋成不同平臺上運(yùn)行的代碼，由此才有RNAPP和React開發(fā)桌面客戶端）
特點(diǎn)：一切皆組件化思想
基于虛擬DOM性能高效
漸進(jìn)式驮肉，專注ui熏矿，可以和其它的技術(shù)棧結(jié)合開發(fā)，很靈活
聲明式程序設(shè)計編程
-
JSX語法离钝，允許JavaScript和XML混搭票编，類似于node 的模板引擎 jade ejs swig handl.. pug...
- JSX語法的誕生
都是組件間傳值通信，都是單向數(shù)據(jù)流
vue是一個mvvm框架卵渴，即數(shù)據(jù)雙向綁定慧域，即當(dāng)數(shù)據(jù)發(fā)生變化的時候，視圖也就發(fā)生變化浪读，當(dāng)視圖發(fā)生變化的時候昔榴，數(shù)據(jù)也會跟著同步變化。這也算是vue的精髓之處了碘橘。值得注意的是互订，我們所說的數(shù)據(jù)雙向綁定，一定是對于UI控件來說的痘拆，非UI控件不會涉及到數(shù)據(jù)雙向綁定仰禽。 單向數(shù)據(jù)綁定是使用狀態(tài)管理工具（如redux）的前提。如果我們使用vuex，那么數(shù)據(jù)流也是單向的
兩者并不互斥吐葵， 在全局性數(shù)據(jù)流使用單向规揪，方便跟蹤
局部性數(shù)據(jù)流使用雙向，簡單易操作温峭。處理表單猛铅，vue的雙向數(shù)據(jù)綁定用起來就特別舒服了
四、ReactJS學(xué)習(xí)
React基礎(chǔ)
- babelJS
2015年6月诚镰， ES2015（即 ECMAScript 6奕坟、ES6） 正式發(fā)布。雖然 ES6 提出了許多激動人心的新特性清笨，但那時許多瀏覽器不支持或者支持不好月杉，沒有普遍地推廣起來。
而 Babel 的出現(xiàn)抠艾，讓我們可以現(xiàn)在就使用最新的 JavaScript 語法苛萎，而不用等待瀏覽器提供支持。
Babel 是一個轉(zhuǎn)換編譯器检号，它能將 ES6 轉(zhuǎn)換成可以在瀏覽器中運(yùn)行的代碼腌歉。Babel 可以處理 ES6 的所有新語法，并且內(nèi)置了 React JSX 擴(kuò)展及 Flow 類型注解支持齐苛。
在線語法轉(zhuǎn)換
- babel-standalone
由于 Babel 本身的設(shè)計是基于 node.js 環(huán)境下運(yùn)行使用的翘盖，而這個名為 babel-standalone 的開源項目，則支持非 node.js 環(huán)境下使用 Babel凹蜂。
babel-standalone 已經(jīng)包含了 Babel 所有的插件馍驯，其體積還是很大的（目前版本 6.26.0，未壓縮的 js 文件 1.78MB玛痊，壓縮了則為 772kb）汰瘫。
使用這個類庫，可以讓我們實時在線轉(zhuǎn)換 es6 為 js擂煞，同時支持 babel 提供的各種插件混弥，而且最關(guān)鍵的是全特性支持，包括 amd 包裹对省，將 import 轉(zhuǎn)換為 amd 的 require 等等蝗拿。
- 安裝react模塊
1.安裝nodeJS
? ? ? ?去官網(wǎng)下載
? ? ? ?node -v
? ? ? ?npm -v 包管理工具 國外的，下載極其慢
2.全局安裝cnpm蒿涎，并設(shè)置淘寶鏡像
? ? ? ?國內(nèi)的包管理工具蛹磺，很快
? ? ? ?npm install -g cnpm --registry=https://registry.npm.taobao.org
3.卸載模塊
? ? ? ?npm uninstall Name
? ? ? ?cnpm uninstall Name
4.安裝react依賴模塊（測試環(huán)境，快速上手）
? ? ? ?cnpm init -y 定義項目所需要的各種模塊及配置信息
? ? ? ?cnpm i react react-dom babel-standalone -S
? ? ? ?-S => --save 表示生產(chǎn)環(huán)境也需要使用的模塊
? ? ? ?-D => --save-dev 表示只在開發(fā)環(huán)境用到的模塊
<script src="./node_modules/babel-standalone/babel.js"></script>
<script>
//手動使用babel轉(zhuǎn)換
// 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標(biāo)簽 渲染到 #app標(biāo)簽里面
// 在講react腳手架前 都是利用此種方法 學(xué)習(xí) react基本語法
ReactDOM.render(<h1>hello world</h1>,document.querySelector('#app'));
</script>
