如何快速从vue过渡到react(续更状态)

还是想点做点记点吧，不然太忙真容易谎

跑起来再说

一时半会的 不用脚手架 还有点手忙脚乱的，得益于vue-cli清晰的构建结构，稍加更改就能跑react了

vue-cli更改清单

卸载vue及vue-loader相关loader

• 依赖包变更 package.json

  
  Paste_Image.png

• 构建文件变更 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(最快的方法就是看人家怎么写的^_) 当然你可以自己写个临时的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

开发私服.png

就这么简单的没心没肺的跑起来了

list组件示例.png

题外话总结一下 如果你要使用一个现代"框架"搭建一个可开发、可维护、可扩展、可实用的任何 web程序 大致需要做到以下（圈红的只是说明我上面改动的文件位置）

不用动结构.png

• 构建模块 --- webpack
• 开发模块 --- dev调试私服
• mock模块 --- 本例子中没加 fms可选
• 规范模块 === 本例子中没加 eslint可选
• 测试模块 === 本例子中没加 mocha可选
• 源码包 --- src (assets,components,template,main.js)
• 非编译资源包 --- static 会直接打包到发布路径 可选
• 版本管理 --- 本例子中没加 git (推荐下gitup)

快速过渡的准备

1. 先把react的原理抛一边去,任何想有发展的类库都是为了工业化生产的,被广泛快速的使用是它的第一个目标，so 它一定文档够分量。很多朋友都喜欢<strong>一言不合掀源码</strong>。确实，能快速的深入核心，了解实现原理对性能优化、避坑、填坑有很大的帮助，然而时间紧任务重，先用着。
2. 之前用过类似东东,比如vuejs。从react的官网一眼就明白这哥们也是基于组件理念，那还说什么了……掌握封装组件😊就掌握了大头

ps:“Learn Once Write Anywhere” 这句话听着耳熟-_-#

Paste_Image.png

3.需要一份思路
无论是什么鬼，跑不出去三大件

• 数据绑定
• 组件封装

• 交互通信
  (当然状态管理也很重要 可惜是后话了)
  JSX(泥巴) Components(泥板子) 重点攻入 其他的优先级不高（别吃太多 容易吐🐰）

  
  Paste_Image.png

Docs中的Guides和Reference非常重要,教程帮助你入坑理解，指南告诉你怎么在坑里呆的舒服

Paste_Image.png Paste_Image.png

行了开始吧

文件结构，构建有了；文档也在手边了；可以开始了！
为毛不用vue 和 react一起对比写呢ˊ>ˋ 嗯就这样Y(^^)Y
一个简单的官网示例 用vue和react分别来写，注意在官网中react时间改变是通过定时render，为了和vue做对比 将其改为组件内部行为 也体现了两者的些许不同。

Paste_Image.png

vue2.0 改进了组件生命周期移除了 ready 新增了mounted

效果

是的 先睡……明天还有事 周末更一更～

TODO 组件生命周期 和 交互通信的差异