React + Lambda本地开发

最近，学习并开发了基于React的应用，后端是AWS的lambda服务。React写UI还是很快的，不用过多的考虑交互的问题。此处总结一些开发过程中遇到的“坑”和心得，仅供参考。

AWS 本地开发环境（dynamodb）

由于后端是AWS，首先需要搭建local开发环境。本地能够关联到AWS上，需要设置对应的IAM，然后将aws_access_key_id和aws_secret_access_key的值拷到本地。写到当前用户目录下.aws/credentials中，如下：

    [default]
    aws_access_key_id=******************
    aws_secret_access_key=********************************

然后可以在控制台中运行serverless info（sls info）可以看到服务能够顺利的关联。单单写自己的function lambda还是稍微简单点，官网上有例子。如果涉及数据的操作，那么我们还需要db。AWS提供给开发者的是dynamodb，dynamodb的各种操作都可以看做是http(s)请求。我们可以通过PUT、GET、POST、DELETE...方式来发送rest请求来操作数据。本地开启lambda 以及dynamodb offline 服务的时候，需要在cmd窗口处理，在开发工具的console中启动会有问题。直接安装有问题（我遇到的是包拉不下来，路径有问题等）我们也可以通过手动安装，先去官网download下DynamoDBLocal.jar，然后在console里执行下面命令，暴露8000端口服务。

java -Djava.library.path=C:\jaymz\AWS\DynamoDBLocal_lib -jar C:\jaymz\AWS\DynamoDBLocal.jar -sharedDb --port 8000

当db起来后，我们执行sls offline start，就可以将本地的AWS lambda本地开发环境启动起来了。非常方便，可见的好处就是加快调试写代码，然后也解决跨域的问题。基本上在执行POST或者DELETE等遇到mode：on-cors的warning的问题，就是跨域。也可以参考下面的文章本地部署个express。
https://serverless.com/blog/serverless-express-rest-api/

第三方库使用的问题：

MUIDataTable

https://github.com/gregnb/mui-datatables，此处有相关的用例和api，可以定制。

MUIDatatable.png

显示控件还是比较好看的，然后默认的功能有查找，导出csv，打印，过滤column等，但是没有新增和编辑，需要定制toolbar。

CustomToolbar:

<React.Fragment>
    <Tooltip title={"custom icon"}>
      <IconButton className={classes.iconButton} onClick={this.handleClick}>
        <AddIcon className={classes.deleteIcon} />
      </IconButton>
    </Tooltip>
  </React.Fragment>

如何自定义table的theme：

    getMuiTheme = () => createMuiTheme({
    overrides: {
        MUIDataTable:{
            responsiveScroll: {
                maxHeight: '230px',
                height:'230px'
            }
        } 
    }
  });
    <MuiThemeProvider theme={this.getMuiTheme()}>
      <MUIDataTable title="Search"  data={data} columns={columns} options={options} />
    </MuiThemeProvider>

如下图：

toolbar.png

有个issue，https://github.com/gregnb/mui-datatables/issues/595

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `Tooltip`.
in ViewColumnIcon (created by Tooltip)
in Tooltip (created by WithStyles(Tooltip))
in WithStyles(Tooltip) (created by l)
in span (created by ForwardRef(IconButton))
in button (created by ButtonBase)
in ButtonBase (created by ForwardRef(ButtonBase))
in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(IconButton))
in ForwardRef(IconButton) (created by WithStyles(ForwardRef(IconButton)))
in WithStyles(ForwardRef(IconButton)) (created by l)
in l (created by l)
in div (created by l)
in div (created by ForwardRef(Toolbar))
in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
in WithStyles(ForwardRef(Toolbar)) (created by l)
in l (created by t)
in t (created by WithStyles(t))
in WithStyles(t) (created by t)
in t (created by t)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by t)
in t (created by WithStyles(t))

基本上在引用的时候打开F12，浏览器里面就会出现这个warning，但是不影响功能。目前这个issue还没有被修复。

antd

https://ant.design/components/form/

主要用这个库来画form表单，它的校验以及样式都挺丰富的。

    <Form.Item hasFeedback label="Subject" htmlFor='subject'>
      {getFieldDecorator('subject',{
         rules: [{ required: true, message: 'subject is required!' },
        {max:50,message:'subject must be lower than 50 characters'}],
       })(<Input placeholder='enter subject' />)}
     </Form.Item>

WeChat Screenshot_20190716094739.png

moment 时间函数

这个函数的功能还是很强大，格式化时间，比较时间差等等，moment(timeDate).format('YYYY-MM-DD HH:mm:ss')