An Isomorphic MVC Framework supports both SSR and CSR
MVC 三者都是 Isomorphic,既是服务端 MVC,也是浏览器端 MVC。
react-imvc 是 isomorphic mvc 的 react 实现,它是一个 Web 框架。通过 react-imvc,我们可以更便利地实现同构 Web 应用的开发。
用法示例:
react-imvc 是一个整体解决方案,包括服务端和客户端,所以必须从 npm 或 yarn 里下载到 package.json 里。
npm install --save react@^17 react-dom@^17 react-imvc@^2 @babel/runtime@^7
在你的 package.json 里添加 npm scripts 如下命令:
{
"scripts": {
"start": "react-imvc start",
"build": "react-imvc build",
"test": "react-imvc test"
}
}
在 package.json 所在的目录下,新建一个文件夹,名称为 src
在 src 文件夹里新增 index.js 入口文件,添加一组 {path, controller} 的路由配置
// src/index.js
export default [
{
path: '/',
controller: () => import('./home/Controller')
}
]
每个页面必须是一个包含 controller.js 的文件夹,其中 controller.js 是页面的入口文件
// src/home/Controller
import Controller from 'react-imvc/controller' // 加载 react-imvc controller 控制器
import React from 'react'
export default class Home extends Controller { // 继承它,编写你的控制器逻辑
View = View // 将 react 组件赋值给控制器的 View 属性
}
function View() {
return (
<h1>Hello React-IMVC</h1>
)
}
在命令行输入 npm start,然后打开 http://localhost:3000
,将看到 Hello React-IMVC
查看页面源代码,可以看到服务端渲染的内容。