基于 React、Mobx、Webpack 和 React-Router 的轻量级前端框架。

Tristana

基于 Mobx、Webpack 和 React-Router 的轻量级前端框架。

---

特性

• 快速上手，没有其它cli这么多概念，只要会React、Mobx、Webpack、React-Router，快速搭建中后台管理平台。
• 路由匹配，包含url输入、js跳转、菜单切换。
• 封装组件Loading，不需要重复写组件Loading判断。
• 完全自定义的cli，内置mobx、webpack、react-router、classnames、dayjs、eslint等。

例子

• Order System: 简单的订单系统
• Count: 简单计数器

是否可用于生产环境？

当然！公司内用于生产环境的项目估计已经有 5+ 。

是否支持 IE8 ？

不支持。

快速上手

创建新应用

$ git clone https://github.com/Cherry-Team/tristana.git

$ cd tristana

$ npm install

$ npm start

几秒之后，你将会看到以下输出

使用 antd

import React, { Component } from 'react';
import { Button } from 'antd';
class Index extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            Button
        );
    }
}

export default Index;

定义路由

我们要写个应用来显示列表，首先是创建路由。

新建 route component pages/List.js，内容如下：

import React from 'react';

const List= (props) => (
  
List
);

export default List;

添加路由信息到路由表，编辑 routeConfig.js

const List = lazy(() => import(/* webpackChunkName: "List"*/'./pages/List/index'));
const routes = [
    {
        path: '/list',
        component: List
    }
];

编写 UI Component

随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，根目录下新建components/LayoutHeader/index.jsx

import React, { Component } from 'react';
import { Avatar, Dropdown, Menu } from 'antd';

const menu = (
    
        
            
                退出
            
        
    
);

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            

                

                    订单系统
                
                

                    消息
                    
                        

                            
                            Faker
                        
                    
                
            
        );
    }
}

export default Index;

使用 Mobx 完成计数器

新建pages/Counter/index.jsx

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import './index.less';
@inject('counterStore')
@observer
class Index extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { counterStore: { obj }, counterStore } = this.props;
        return (
            

                 counterStore.add()}>+
                count is: {obj.count}
                 counterStore.reduce()}>-
            
        );
    }
}

export default Index;

创建counterStore/store.js

import { observable, action } from 'mobx';
class CounterStore {
    @observable obj = {
        count: 0
    };

    @action
    add() {
        this.obj.count++;
    }

    @action
    reduce() {
        this.obj.count--;
    }
}

export default CounterStore;

然后在/mobx/rootStore.js下引入：

import CounterStore from './CounterStore/store';

import CounterStore from './CounterStore/store';
class Store {
    constructor() {
        this.counterStore = new CounterStore();
    }
}
export default new Store();

构建应用

完成开发并且在开发环境验证之后，就需要部署给我们的用户了。先执行下面的命令：

$ npm run build

几秒后，输出以下内容：

build 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。然后你可以在 dist/ 目录下找到这些文件。

源码

Tristana

未来

• jsx升级TypeScript
• ant-design 5.0.0
• webpack 5.0.0
• React 17.0.0