同构MVC框架——React-IMVC的简单上手

---

React-IMVC是什么

react-imvc 是 Isomorphic(同构) mvc 的 react 实现，它是一个 Web 框架。通过 react-imvc，我们可以更便利地实现同构 Web 应用的开发

作为同构应用，它可以

• 一条命令启动完整的开发环境
• 一条命令编译和构建源代码
• 一份代码，既可以在 node.js 做服务端渲染(SSR)，也可以在浏览器端复用后继续渲染(CSR & SPA)
• …

react-imvc 里的 MVC 三个部分都是 Isomorphic 的，所以它可以做到：只编写一份代码，在 Node.js 里做 Server-Side-Rendering 服务端渲染，在 Browser 里做 Client-Side-Rendering 客户端渲染。

React-IMVC的安装和启动

npm install --save react react-dom@16.8.0 react-imvc@16.8.0

在 package.json 中添加启动命令

{
   
    "scripts": {
   
        "start": "react-imvc start"
    }
}

使用React-IMVC实现简单的Todo List

react-imvc项目文件的基本结构为

project
├─ imvc.config.js
└─ src
   ├─ index.js
   └─ page
      └─ Todo
         ├─ Controller.js
         ├─ Model.js
         └─ View.js

src 目录下的 index.js 即为路由入口，每个page为一个文件夹

// index.js
export default [
    {
   
        path: '/',
        controller: () => import('./page/Todo/Controller')