搭建一个react项目

搭建react整体框架

1、电脑里新建文件夹，用vscode打开文件夹
2、npm create react-app 项目名称    如 npm create react-app huihuidemo / yarn create react-app huihuidemo
3、cd 项目名称    如 cd huihuidemo
4、npm run start
5、安装antd    cnpm i antd -S / yarn add antd 
6、在css文件中最顶部引入  @import '~antd/dist/antd.css';   //分号不能丢
    (也可在js文件里直接引入，  import 'antd/dist/antd.css';  )
7、在js jsx文件中引入需要使用的组件   import {Button,Icon...} from 'antd';
8、(以后必要,见下方)安装路由和ajax请求插件

具体可见antd官网   https://ant.design/docs/react/use-with-create-react-app-cn

解决react脚手架不支持less的问题

1、安装less相关包    cnpm i less less-loader -S / yarn add less less-loader 
2、暴露webpack    npm run eject / yarn eject   (此语句执行后会有config和scripts文件夹生成)   
      若出现以下错误: (Remove untracked files, stash or commit any changes, and try again.)
      是因为我们使用脚手架创建一个项目的时候，自动给我们增加了一个.gitignore文件，而我们本地却没有文件仓库
      这样解决： 先输入  git add .      再输入  git commit -m 'up' 之后再yarn eject即可
3、查找到config/webpack.config.js的const cssRegex = /\.css$/;  做出如下改动
    - const cssRegex = /\.css$/;
    + const cssRegex = /\.(css|less)$/;
4、找到webpack.config.js的const loaders ，在里面最后一组后面添加
    { loader: require.resolve('less-loader') },
添加之后是这样的：

const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {...
       },
      {...
      },
      {...
      },
      {
        loader: require.resolve('less-loader')
      },
    ].filter(Boolean);

然后重启项目即可(记得要重启项目，否则不生效)
5、下载必须的安装包：npm i axios -S      npm i react-router-dom -S     npm i react-cookies -S
6、npm run start 开启项目吧

ps:若npm start失败，出现这个问题(Build fails after eject: Cannot find module '@babel/plugin-transform-react-jsx' )
则可以
1、删除 node_modules 文件夹
2、运行 yarn
3、cnpm i less less-loader -S / yarn add less less-loader
3、重新 npm start / yarn start

react项目文件层次架构

config
public
  |__static
       |__ueditor  //百度编辑器
scripts
src
|__utils    //封装的公共机制，共用组件 
     |__iconfont.js  //配置iconfont的链接   
|__api   //配置接口的地方
     |__config.js  //配置服务器地址
     |__index.js  //引入接口并暴露
     |__statecode.js  //错误提醒状态码模块
     |__login.js  //登录模块接口
|__image 
|__pages   //用于存放项目的各个模块页面
     |__usercenter  //用户中心模块
           |__userlogin.js   
           |__userchange.js
           |__usercenter.less   //用户中心模块less
           |__usercenterRouter.js  //用户中心模块的路由
     |__order  //订单模块
           |__details.js
           |__userorder.js
           |__order.less  
           |__orderRouter.js
     |__commodity
           |__commodityList.js
           |__commodityPrice.js
           |__commodity.less
           |__commodityRouter.js  
     |__common.less  //用于存放公共样式
     |__index.js    //首页，Link一般在此页
     |__index.less   //首页的less
|__index.js
|__index.css
|__router.js  //总路由部分
|__app.js   //设置最顶级路由

src/utils/iconfont.js

module.exports={
        iconUrl:"//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"   //注意这里是js后缀的链接，不要用css后缀的那个链接
    }

src/api/config.js

module.exports={
    base:"http://demo.huihui.net:8000"
}

src/api/index.js

import codes from './statecode.js';  //状态码页面
import login from './login.js';  //登录页面相关
import userCenter from './userCenter.js';  //用户中心

export default {
    stateCode:codes,
    ...login,
    ...userCenter,
}

src/api/statecode.js

export default{
    "-1":"服务异常",
    "0":"成功",
    "1001":"参数错误",
    "1002":"用户名或密码错误",
    "1003":"验证码错误",
    "1004":"两次密码不一致",
    "1005":"账号已存在",
}

src/api/login.js

import axios from 'axios';
import { base } from "./config.js";
import { message  } from 'antd';
import cookie from 'react-cookies'

export default {
  //用户登陆
  async login(params){
    return  await axios.post(`${base}/User/login`,params).then((res)=>{
      return res.data;
    }).catch((error)=>{
      message.error('服务器出错')
    });
  },
}

src/app.js

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

src/pages/order/order.js

import React from 'react';
import './order.less';
import '../common.less';

import {Card} from 'antd';

export default class QuickOrder extends React.Component{

    render(){

        return(
            <div className="quickOrder">
                <div className="container">
                    <div className="content">
                        <Card title="快速打单">

                        </Card>
                    </div>
                </div>
            </div>
        );
    }
}

src/pages/order/orderRouter.js

import React from 'react';
import {Route,Switch,Redirect} from 'react-router-dom';

//快速打单
import QuickOrder from './quickOrder';
//退款维权
import RefundRights from './refundRights';
//评价管理
import ReviewManage from './reviewManage';
//订单详情
import OrderDetails from './orderDetails';

export default class OrderRouter extends React.Component{

    render(){

        return(
            <div>
                <main>
                    <Switch>
                        <Route path="/store/order/quickOrder" component={QuickOrder} />
                        <Route path="/store/order/refundRights" component={RefundRights} />
                        <Route path="/store/order/reviewManage" component={ReviewManage} />
                        <Route path="/store/order/orderDetails/:id" component={OrderDetails} />
                        <Redirect to="/store/order" />
                    </Switch>
                </main>
            </div>
        );
    }
}