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

2016-08-05 本文已影响742人懒先森

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

跑起来再说

一时半会的不用脚手架还有点手忙脚乱的，得益于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)

快速过渡的准备

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