标签react下的文章

admin 发布于 09月01, 2019

react在线编辑代码

很多时候,我们写了一个UI库,但是别人在用的过程中会出现问题。那么这个问题,可能是我们的,也可以是他们的,所以往往需要一个类似codesandbox的网站。

那个网站似乎没法用内网的npm包,所以这点比较蛋疼。

好在像react-live能够简单地支持上面的功能,即在线编辑代码。

那么来演示一下吧。

import React from 'react';
import ReactDOM from 'react-dom';

import * as dpl from 'dpl-react';

import "dpl-react/dist/dpl.css";

import {
  LiveProvider,
  LiveEditor,
  LiveError,
  LivePreview
} from 'react-live';

const scope = { dpl };

const importRegex = /import(?:["'\s]*([\w*{}\n, ]+)from\s*)["'\s]*([@\w/_-]+)["'\s]*;?/gm;

const imports = {
    "dpl-react": "dpl",
    "moment": "moment"
}

const transformCode = (code) => {
  return code.replace(importRegex, (match, p1, p2) => {
    const matchingImport = imports[p2];
    if (!matchingImport) {
      return match;
    }
    return 'const ' + p1 + ' = ' + matchingImport + ';';
  });
}

const code = `
  import { Button } from 'dpl-react';

  render(<Button>123</Button>)
`;

const App = () => {
  return (
    <LiveProvider transformCode={transformCode} code={code} scope={scope} noInline={true}>
      <LiveEditor />
      <LiveError />
      <LivePreview />
    </LiveProvider>
  )
};

ReactDOM.render(<App />, document.getElementById("root"));

效果如下:

alt

接下去无非是样式的美化而已。

阅读全文 »

admin 发布于 06月22, 2019

UI组件按需加载实战

之前有分享过关于UI组件按需加载的思路,但个人还没怎么实战过,上周实战了一把。

可能有些人会觉得这不是很容易么,但看结合怎样的背景了,像我司的那个react ui库,结合了:

  • antd2.x的ui
  • element ui的table组件
  • 自研的一套

构建用的是webpack。(我在考虑后期改成rollup似乎更合适一些)

阅读全文 »

admin 发布于 06月09, 2019

admin模板(2)

这周终于把剩下的admin模板写的差不多了,所以继续来记录一下写代码中碰到的一些问题,算是一些总结吧!

阅读全文 »