# qyb-react-umd
  qyb-react-umd是一个集成React框架以及一些组件库（比如antd）的一个umd包。提供传统前端下使用组件化前端框架组件的一种方式，作为前端转型过渡方案。
  如下是集成antd库表格示例
  ![示例](docs/images/shili.png)
## 集成
### 把dist文件夹下qybreactumd.js拷贝到项目资源目录
  目前qybreactumd.js 包含[React](https://zh-hans.reactjs.org/)基础框架和[Antd](https://ant.design/components/table-cn/#components-table-demo-grouping-columns)组件库
  
### 在index页面引入qybreactumd.js
  另外如果想用其他React组件库，并且其他组件库提供了umd打包，可以在下面继续引入对应的js。（如果需要一起打包到qybreactumd.js中，可联系公共组件重新打包或提供不同的umd文件）
```
	<!-- 加载 React-->
    <script src="assets/qybreactumd.js"></script>
    <script src="assets/otherReactcomponentslib.umd.js"></script>
```

## 使用
#### 定义容器div
```html
  <div id="content_ant_table" />
```
#### 新建与渲染组件
```js
  // 如下就是上面示例图片中表格的全部基础代码
  
  // 拿到React 和 ReactDOM 等框架相关对象。
	var React = QybReactUmd.React
    var ReactDOM = QybReactUmd.ReactDOM
    const e = React.createElement;
  // 拿到基础组件对象 antd对象下为所有antd的所有组件对象，使用方法参考antd文档
	var AntTable = QybReactUmd.antd.Table
	
	const columns = $params.columns
	const datas = $scope.datas
  
  // 根据基础组件新建业务组件（需要熟悉React框架函数组件使用）
	var MyTable = function() {
		const [state, setState] = React.useState({ text: "", checked: false })
		return e(AntTable, {
		  columns: columns,
		  dataSource: data,
		  bordered: true,
		  size: "middle",
		  scroll: {
		    x: 'calc(700px + 50%)',
		    y: 240
		  }
		});
	}
	ReactDOM.render(
	  e(MyTable),
	  document.getElementById('content_ant_table')
	);	
```

## 其他

1. 目前打包了整个antd库，体积较大，gzip后依然达到700k左右。生产环境需开启gzip。如需减少体积，可以通过只打包使用到了的组件实现。
2. 可以提取通用组件集成到库中来
3. [tsx转换成js工具](https://babeljs.io/repl/#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=ATA8BUEMCMBsFMBQIQGMD2sCuBbAdgM4C8A3htvgQL7IoAmkALpAMrpYBOq8pDzNKYNHQc68DvDq0QBAJYAvHgCIcsunQRLpwAqg6ZYpEsAAeALmAByVJFioAFAHYADM4AOJ4AGpgAVmcApACUlgA0wACeFgBMACzOwFQCwAD0AHxAA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react&prettier=false&targets=&version=7.7.5&externalPlugins=)
4. [Antd文档](https://ant.design/components/table-cn/#components-table-demo-grouping-columns) 
5. [React文档](https://zh-hans.reactjs.org/)

## IE 下注意事项
1. 兼容IE9+
2. IE下不支持箭头函数，const 关键字，在写组件时应注意。