還是想點做點記點吧糙麦，不然太忙真容易謊
跑起來再說
一時半會的 不用腳手架 還有點手忙腳亂的喻粹，得益于vue-cli清晰的構(gòu)建結(jié)構(gòu)幻赚，稍加更改就能跑react了
vue-cli更改清單
卸載vue及vue-loader相關(guān)loader
-
依賴包變更 package.json
Paste_Image.png 構(gòu)建文件變更 base.conf.js和prod.conf.js
//base.conf.js
vue: {
loaders: utils.cssLoaders()
}//刪掉
//prod.conf.js
vue: {
loaders: utils.cssLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
}//刪掉
- 程序變更
- 頁面 index.html 建一個掛載點 <div id="app">
- 入口 使用了material-ui(最快的方法就是看人家怎么寫的_) 當(dāng)然你可以自己寫個臨時的HelloWorld型組件
import React from "react"
import ReactDOM from "react-dom"
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import injectTapEventPlugin from "react-tap-event-plugin"
import ThreadList from "./components/ThreadList"
injectTapEventPlugin();
const App = () => (
<MuiThemeProvider>
<ThreadList />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('app')
);
npm run dev
開發(fā)私服.png
就這么簡單的沒心沒肺的跑起來了
list組件示例.png
題外話總結(jié)一下 如果你要使用一個現(xiàn)代"框架"搭建一個可開發(fā)、可維護(hù)凯旋、可擴(kuò)展择诈、可實用的任何 web程序 大致需要做到以下（圈紅的只是說明我上面改動的文件位置）
不用動結(jié)構(gòu).png
- 構(gòu)建模塊 --- webpack
- 開發(fā)模塊 --- dev調(diào)試私服
- mock模塊 --- 本例子中沒加 fms可選
- 規(guī)范模塊 === 本例子中沒加 eslint可選
- 測試模塊 === 本例子中沒加 mocha可選
- 源碼包 --- src (assets,components,template,main.js)
- 非編譯資源包 --- static 會直接打包到發(fā)布路徑 可選
- 版本管理 --- 本例子中沒加 git (推薦下gitup)
快速過渡的準(zhǔn)備
- 先把react的原理拋一邊去,任何想有發(fā)展的類庫都是為了工業(yè)化生產(chǎn)的,被廣泛快速的使用是它的第一個目標(biāo)，so 它一定文檔夠分量俏竞。很多朋友都喜歡<strong>一言不合掀源碼</strong>绸硕。確實，能快速的深入核心魂毁，了解實現(xiàn)原理對性能優(yōu)化玻佩、避坑、填坑有很大的幫助席楚，然而時間緊任務(wù)重咬崔，先用著。
- 之前用過類似東東,比如vuejs烦秩。從react的官網(wǎng)一眼就明白這哥們也是基于組件理念垮斯，那還說什么了……掌握封裝組件??就掌握了大頭
ps:“Learn Once Write Anywhere” 這句話聽著耳熟-_-#
Paste_Image.png
3.需要一份思路
無論是什么鬼，跑不出去三大件
- 數(shù)據(jù)綁定
- 組件封裝
-
交互通信
(當(dāng)然狀態(tài)管理也很重要 可惜是后話了)
JSX(泥巴) Components(泥板子) 重點攻入 其他的優(yōu)先級不高（別吃太多 容易吐??）
Paste_Image.png
Docs中的Guides和Reference非常重要,教程幫助你入坑理解只祠，指南告訴你怎么在坑里呆的舒服
Paste_Image.png
Paste_Image.png
行了開始吧
文件結(jié)構(gòu)兜蠕，構(gòu)建有了；文檔也在手邊了铆农；可以開始了牺氨！
為毛不用vue 和 react一起對比寫呢ˊ>ˋ 嗯就這樣Y(^^)Y
一個簡單的官網(wǎng)示例 用vue和react分別來寫，注意在官網(wǎng)中react時間改變是通過定時render墩剖，為了和vue做對比 將其改為組件內(nèi)部行為 也體現(xiàn)了兩者的些許不同猴凹。
Paste_Image.png
vue2.0 改進(jìn)了組件生命周期移除了 ready 新增了mounted
效果
是的 先睡……明天還有事 周末更一更～
