Giter VIP home page Giter VIP logo

react-imvc's Introduction

react-imvc v2.0

Build Status dependencies Status PRs-welcome

NPM

MVC 三者都是 Isomorphic,既是服务端 MVC,也是浏览器端 MVC。

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

用法示例:

点击访问详细文档地址:Documents

react-imvc 的作用和特性

  • 一条命令启动完整的开发环境
  • 一条命令编译和构建源代码
  • 一份代码,既可以在 node.js 做服务端渲染(SSR),也可以在浏览器端复用后继续渲染(CSR & SPA)
  • 既是多页应用,也是单页应用,还可以通过配置自由切换两种模式,用「同构应用」打破「单页 VS 多页」的两难抉择
  • 构建时可以生成一份 hash history 模式的静态文件,当做普通单页应用的入口文件(如 DEMO 所示)
  • 构建时可以根据路由切割代码,按需加载 js 文件
  • 支持在 IE9 及更高版本浏览器里,使用包括 async/await 在内的 ES2015+ 语言新特性
  • 丰富的生命周期,让业务代码有更清晰的功能划分
  • 内部自动解决在浏览器端复用服务端渲染的 html 和数据,无缝过渡
  • 好用的同构方法 fetch、redirect 和 cookie 等,贯通前后端的请求、重定向和 cookie 等操作
  • 还有更多隐藏特性,在等待你去发掘……

安装 react-imvc

react-imvc 是一个整体解决方案,包括服务端和客户端,所以必须从 npm 或 yarn 里下载到 package.json 里。

npm install --save react@^17 react-dom@^17 react-imvc@^2 @babel/runtime@^7

使用 react-imvc 开发 Hello World

第一步:添加 npm scripts 任务

在你的 package.json 里添加 npm scripts 如下命令:

{
    "scripts": {
        "start": "react-imvc start",
        "build": "react-imvc build",
        "test": "react-imvc test"
    }
}

第二步:添加源代码目录 src/ 和路由文件 index.js

在 package.json 所在的目录下,新建一个文件夹,名称为 src

在 src 文件夹里新增 index.js 入口文件,添加一组 {path, controller} 的路由配置

// src/index.js
export default [
    {
        path: '/',
        controller: () => import('./home/Controller')
    }
]

第三步:编写每个页面的 MVC 结构

每个页面必须是一个包含 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 启动应用

在命令行输入 npm start,然后打开 http://localhost:3000,将看到 Hello React-IMVC

查看页面源代码,可以看到服务端渲染的内容。

欢迎提 Issue 和 Pull Request

react-imvc's People

Contributors

dependabot[bot] avatar liyikun avatar lucienthink avatar lucifier129 avatar mike-zhu avatar safarishi avatar tqma113 avatar undozen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-imvc's Issues

controller/index.js中 能否支持自定义fetch

  • 类型: 需求/建议
  • 问题描述:目前 controller/index.js 中的fetch: 客户端为window.fetch, 服务端为node-fetch。无法使用自己的custom-fetch替换现有的fetch
  • 期望:给controller/index.js的fetch方法的options中增加参数
    fetch(url, options) {
     let fetch = typeof options.fetch === 'function' ? options.fetch :  fetch
     delete options.fetch
     return fetch(url, options)
    }

component/Input组件的value数据结构不一致

  • 类型:改进
  • 问题描述:目前Input组件中, 根据check字段确定value的数据结构。 let path = check ? `${name}.value` : name 某个需求如下:
    1. 初始化时input为需要提示warn(check为true)
    2. 更新input内容
    3. input由于另一个字段导致不需要check。此时,value为[object object]
  • 期望:value的数据结构应当始终保持一致
       interface Value {
           value: string
           isWarn?: boolean 
       }
    

align

外部config配置alias选项传入
比如 "@main: path.resolve(__dirname, 'src/main')"
组件引用main路径 import Main from “@main
会提示@main找不到 报错的问题

Controller类中的handler方法模块化

Hi,工业聚:
是否可以让handlers也可以模块化呢?

export default class extends Controller {
    View = View
    initialState = {
        count: 0,
    }
    actions = {
        INCREMENT: state => ({ ...state, count: state.count + 1 }),
        DECREMENT: state => ({ ...state, count: state.count - 1 }),
        CHANGE_BY_NUM: (state, num) => ({ ...state, count: state.count + Number(num) })
    }
    // 事件处理器必须使用 arrow function 箭头函数的语法
    handleIncre = () => {
        let { INCREMENT } = this.store.actions
        INCREMENT()
    }
    // 事件处理器里使用 action 更新 global state
    handleDecre = () => {
        let { DECREMENT } = this.store.actions
        DECREMENT()
    }
    // 将特殊的索引如 index, id 或者其他信息,缓存在 DOM attribute 里
    // 在事件处理器里,从 DOM attribute 里取回
    handleCustomNum = event => {
        let { CHANGE_BY_NUM } = this.store.actions
        let num = event.currentTarget.getAttribute('data-num')
        CHANGE_BY_NUM(num)
    }
}

代码中actions支持了模块化,可以将actions模块化:

//actions.js
export default {
        INCREMENT: state => ({ ...state, count: state.count + 1 }),
        DECREMENT: state => ({ ...state, count: state.count - 1 }),
        CHANGE_BY_NUM: (state, num) => ({ ...state, count: state.count + Number(num) })
}
//controller.js

import actions from './actions'

export default class extends Controller {
   actions = {...actions}
}

类似的,我想要抽出handlers,组成一个新模块。现在,似乎只能这么做:

//   handlers.js

export default {
handleGetUserInfo : ()=>{},
handleXXX : () => {}
}
//controller.js

import actions from './actions'
import handlers from './handlers'

let {handleGetUserInfo,  handleXXX } = handlers

export default class extends Controller {
actions = {...actions},
handleGetUserInfo : handleGetUserInfo,
handleXXX : handleXXX ,
}

以后可以支持这样吗?

//controller.js

import actions from './actions'
import handlers from './handlers'

export default class extends Controller {
  actions = {...actions},
  handlers = {...handlers}
}

编译的时候比较慢,是不是可以把部分dependencies放到devDependencies

react-imvc的package.json有这么多,是不是可以把部分写到开发依赖里面,发布就会快很多

  "dependencies": {
    "babel-cli": "^6.14.0",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-polyfill": "^6.13.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.14.0",
    "body-parser": "~1.13.2",
    "bundle-loader": "^0.5.4",
    "chalk": "^1.1.3",
    "classnames": "^2.2.5",
    "compression": "^1.6.2",
    "cookie-parser": "~1.3.5",
    "create-app": "^0.6.0",
    "cross-spawn": "^5.1.0",
    "debug": "~2.2.0",
    "del": "^3.0.0",
    "expect": "^1.20.2",
    "express": "~4.14.0",
    "express-react-views": "^0.10.2",
    "fetch-ie8": "^1.5.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-clean-css": "^3.0.3",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.1.1",
    "gulp-plumber": "^1.1.0",
    "gulp-uglify": "^2.1.0",
    "gulp-util": "^3.0.8",
    "helmet": "^3.1.0",
    "js-cookie": "^2.1.4",
    "memory-fs": "^0.4.1",
    "mocha": "^3.0.2",
    "morgan": "~1.6.1",
    "node-fetch": "^1.6.3",
    "node-notifier": "^5.2.1",
    "optimize-js-plugin": "^0.0.4",
    "querystring": "^0.2.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "relite": "^1.0.5",
    "serve-favicon": "^2.3.0",
    "webpack": "1.13.2",
    "webpack-bundle-analyzer": "^2.3.1",
    "webpack-dev-middleware": "^1.9.0",
    "webpack-hot-middleware": "^2.22.2",
    "whatwg-fetch": "^2.0.3",
    "yargs": "^8.0.2"
  },

增加initialstate 保护性复制功能 是否能自定义开启还是关闭

  • 类型: 改进
  • 问题描述:之前部分团队成员在initialState中放了函数,某个版本新增了增加initialstate 保护性复制功能之后,方法丢失,影响了正常的功能。造成无法更新版本
  • 期望:希望可以增加开关,用户自定义是否开启这个保护性复制功能

alias

外部config配置alias选项传入
比如 "@main: path.resolve(__dirname, 'src/main')"
组件引用main路径 import Main from “@main
会提示@main找不到 报错的问题

创建的项目控制台有个错误

Target node has markup rendered by React, but there are unrelated nodes as well. This is most commonly caused by white-space inserted around server-rendered markup.

不影响使用,我准备抄一下react-imvc-template,发现里面也有这个情况,有空帮忙看看

如何引入antd呢

使用了两种方式引入antd样式,但是样式都没有成功引入,请问有没有合适的解决方法

  1. 本地css文件中加入@import '~antd/dist/antd.css';报错如下
  • Error: Did not match any route with path:/~antd/dist/antd.css
    at new ReqError (D:\workPlace\react-imvc-repo\node_modules_create-app@2.1.0@create-app\lib\share\util.js:20:28)
    at fetchController (D:\workPlace\react-imvc-repo\node_modules_create-app@2.1.0@create-app\lib\server\createApp.js:115:25)
    at Object.render (D:\workPlace\react-imvc-repo\node_modules_create-app@2.1.0@create-app\lib\server\createApp.js:68:30)
    at Object. (D:\workPlace\react-imvc-repo\node_modules_react-imvc@3.0.11@react-imvc\dist\page\createPageRouter.js:228:46)
    at step (D:\workPlace\react-imvc-repo\node_modules_react-imvc@3.0.11@react-imvc\dist\page\createPageRouter.js:44:23)
    at Object.next (D:\workPlace\react-imvc-repo\node_modules_react-imvc@3.0.11@react-imvc\dist\page\createPageRouter.js:25:53)
    at D:\workPlace\react-imvc-repo\node_modules_react-imvc@3.0.11@react-imvc\dist\page\createPageRouter.js:19:71
    at new Promise ()
    at __awaiter (D:\workPlace\react-imvc-repo\node_modules_react-imvc@3.0.11@react-imvc\dist\page\createPageRouter.js:15:12)
    at D:\workPlace\react-imvc-repo\node_modules_react-imvc@3.0.11@react-imvc\dist\page\createPageRouter.js:215:56 status: 404
  1. 在imvc.config.ts中配置bable以及webpack

依赖版本如下:
"babel-plugin-import": "^1.13.3",
"css-loader": "^5.0.1",
"style-loader": "^2.0.0",
"less": "^3.12.2",
"less-loader": "^7.1.0",

babel: () => {
let babelOptions = getBabelConfig();
babelOptions.plugins.push(['import', { libraryName: 'antd', style: true }]); // 添加 plugins 配置
return babelOptions;
}

webpack: (webpackConfig) => {
webpackConfig.module.rules.push(
{
//CSS处理
test: /.(le|c)ss$/,
loader: 'style-loader!css-loader!less-loader',
exclude: /node_modules/,
},
{
//antd样式处理
test: /.(le|c)ss$/,
exclude: /src/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: { lessOptions: { javascriptEnabled: true } },
},
],
}
);
编译时没有报错,但是运行时报错如下

  • D:\workPlace\react-imvc-repo\node_modules_antd@4.8.5@antd\lib\style\index.less:1
    @import './themes/index';
    ^
    SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.newLoader [as .js] (D:\workPlace\react-imvc-repo\node_modules_pirates@4.0.1@pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object. (D:\workPlace\react-imvc-repo\node_modules_antd@4.8.5@antd\lib\menu\style\index.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)

请问图片怎么引入呢

试过

import logo from './logo.svg';
<img src={logo} className="App-logo" alt="logo" />
 <img src="/home/logo.svg" className="App-logo" alt="logo" />
 preload = {
        app: "/home/css/app.css",
        logo:"/home/logo.svg"
    };
<img src="logo" className="App-logo" alt="logo" />

build/setup-dev-env.js 中 setupServer 读取的配置文件是client端

exports.setupServer = function setupServer(config, options) { let serverConfig = createWebpackConfig(config)

这里第二个 参数不传 里面isserver就是false

/build/createWebpackConfig.js

最下面 return config.webpack ? config.webpack(result, isServer) : result 这里就不对啊

文档需要更新,创建项目时,除了安装 react、react-dom、还要安装 @babel/runtime

问题描述

@babel/runtime 是 react-imvc 的 peer-dependencies, 需要在项目里装上依赖。 否则可能启动报错

报错复现路径

代码:https://github.com/AskY6/isomorphic-cnode(项目的 src/index.js 中使用了扩展运算符,间接依赖了 @babel/runtime 的 toConsumableArray)
stackblitz 项目: https://stackblitz.com/github/AskY6/isomorphic-cnode

  1. npm i
  2. npm start

解决方案

  1. 项目的 dependencies 中添加 "@babel/runtime": "^7.22.10"
  2. npm i
  3. npm start

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.