从零开始的react

从零开始的react工程

来了来了，react来了，它带着各种“问题”朝我走过来了 （瑟瑟发抖.jpg）

目标：从零开始做一个集成基本功能（UI、路由、axios…）简单的架子吧 (:з」∠)

安装

第一步的正常操作

npx create-react-app my-app

安装成功后，进入工程，让它跑起来

cd my-app
npm start

ok，完成，走人

这个脚手架生成的react工程非常简洁，什么都没有，好的吧，开始加东西了…..

添加插件

路由

选择使用react-router-dom

 npm install react-route --save
 npm install react-router-dom --save
 npm install @types/react-router-dom --save-dev

这里为了满足需求，再增加一个history插件

npm install --save history

安装完后把路由抽成配置，还要有自动注册渲染

路由文件的目录

定义Route接口

interface.ts

export interface IRoute {
    // 图标
    icon?: string;
    // 菜单名
    name?: string;
    // 路由
    path?: string;
    // 组件
    component?: any;
    // 子路由
    routes?: IRoute[];
    // 精确匹配
    exact?: boolean;
    // 重定向地址
    redirect?: string;
    // 不作为节点显示在菜单
    hideInMenu?: boolean;
    // 子路由不作为节点显示在菜单上
    hideChildrenInMenu?: boolean;
}

注册路由

RenderRoutes.tsx

import * as React from 'react';
import {Location} from 'history';
import {Switch, Route, Redirect} from 'react-router-dom';
import { IRoute } from './interface';

interface IRouteWithProps {
    path: string;
    exact?: boolean;
    strict?: boolean;
    render: (props: any) => any;
    location?: Location;
    rest?: [];
}

// Support pass props from layout to child routes
class RouteWithProps extends React.Component<IRouteWithProps, {}> {
    public render() {
        const {path, exact, strict, render, location} = this.props;
        return (
            <Route
                path={path}
                exact={exact}
                strict={strict}
                location={location}
                render={props => render({...props})}
            />
        );
    }
}

/**
 * render routes according to route config.
 *
 * route will be pass to component as a children:
 * <BasicLayout {...props}>
 *     <Switch>
 *         <Redirect from="/" to="/a" />
 *         <Route path="/a" component=Login />
 *         <Route path="/b" component=Register />
 *         <Route component=NotFound />
 *     </Switch>
 * </BasicLayout>
 *
 * @param routes router defined by user
 * @param extraProps extra props pass to component
 * @param switchProps props pass to Switch
 */
export default function renderRoutes(routes: IRoute[], extraProps = {}, switchProps = {}) {
    return routes ? (
        <Switch {...switchProps}>
            {routes.map((route: any, i: number) => {
                if (route.redirect) {
                    return (
                        <Redirect
                            key={route.key || i}
                            from={route.path}
                            to={route.redirect}
                            exact={route.exact}
                            strict={route.strict}
                        />
                    );
                }
                return (
                    <RouteWithProps
                        key={route.key || i}
                        path={route.path}
                        exact={route.exact}
                        strict={route.strict}
                        render={props => {
                            const childRoutes = renderRoutes(
                                route.routes,
                                {},
                                {
                                    location: props.location,
                                }
                            );
                            if (route.component) {
                                // pass location && history object into sub component's props
                                const newProps = {
                                    ...props,
                                    ...extraProps,
                                };
                                return (
                                    <route.component {...newProps} route={route}>
                                        {childRoutes}
                                    </route.component>
                                );
                            } else {
                                return childRoutes;
                            }
                        }}
                    />
                );
            })}
        </Switch>
    ) : null;
}

路由配置文件

route.config.ts

import {IRoute} from './interface';
import NotFound from '../pages/404';

let routes: IRoute[] = [
    {
        path: '/',
        routes: [
            {
                path: '/',
                redirect: '/container/service',
            },
            {
                icon: 'reconciliation',
                name: '服务管理',
                path: '/container/service',
                component: require('../containers/container/service/List'),

            },
        ],
    },
];

/**
 * add exact = true to each leaf node, if not, / will always be match.
 * @param routeConfig routeConfig router defined by user
 */
function addExactToRoute(routeConfig: IRoute[]) {
    routeConfig.map(route => {
        if (route.routes) {
            addExactToRoute(route.routes);
        } else {
            route.exact = true;
        }
    });
}

const notFoundRoute: IRoute = {
    component: NotFound,
};

/**
 * add 404 component to each routes[] as a fallback route.
 * if no route hits, the fallback route will be used.
 * every routes[] will be wrap by <Switch/> just as follow
 * <Switch>
 *     <Redirect from="/" to="/a" />
 *     <Route path="/a" component=Login />
 *     <Route path="/b" component=Register />
 *     <Route component=NotFound />
 * </Switch>
 * @param routeConfig router defined by user
 */
function addNotFoundAsFallbackRoute(routeConfig: IRoute[]) {
    routeConfig.map(route => {
        if (route.routes) {
            addNotFoundAsFallbackRoute(route.routes);
            route.routes.push(notFoundRoute);
        }
    });
}

addExactToRoute(routes);
addNotFoundAsFallbackRoute(routes);
// root level also need 404 component
routes.push(notFoundRoute);

export default routes;

react-router-dom一些相关链接：

react-router-dom的基本组件

history的用法

异步请求

axios

ts路径别名识别

拦截器

跨域问题

oauth请求的问题

引入scss

npm install node-sass --save

简单记录一下，后面要细写

react工程部署的坑：路径问题（解决：homepage），二级目录的路由跳转问题（BrowerHistory的配置，basename），history记录问题

待补…

---

Ps: 不补了，这个不符合现在的业务需求了，而且太重了，溜了溜了哈哈哈哈