React-cli

安装

cnpm i create-react-app@3.2.0 -g  
全局安装
create-react-app -V
查看版本
create-react-app xxxx_xxx
创建项目
npm run start
启动项目

目录

node_modules //第三方依赖的包
public　　　　//资源目录
favicon.ico　　 　//左上角的图标
index.html　　    //项目首页模板
manifast.json   　//定义 app 的图标 网址 主题颜色等
robots.txt        //robots协议  User-agent: * 允许所有 #注释协议网址

src　　　　　　//项目所有的源代码
index.js　　    　 //整个程序的入口 (react 的理念 all in js)
index.css　　      //初始化样式,存放于网站根目
App.js　　　  　　　//项目通用部分
App.test.js　      //自动化测试文件
App.css　　   　　  //项目的样式
logo.svg　　  　　  //首页 logo
serviceWorker.js   //将网页存储在浏览器内 如果突然断网了 可以继续访问该网页　
.gitignore　　　　　　　　//设置禁止传到 git 文件
package.json　　 　　　  //模块清单 和项目介绍 （ 命令行 命令 ） 等
README.md　　  　　　    //项目的说明文件
yarn.lock　　　　      　//依赖的安装包 （一般不用动）   

配置别名

```javascript
cnpm install react-app-rewired customize-cra --save-dev

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

//在根目录创建
/* config-overrides.js */
const path = require('path');
const { override,addWebpackAlias } = require('customize-cra');
//customize-cra  在不弹射情况下 复写 webpack 配置
module.exports = override(
         addWebpackAlias({        
            "@": path.resolve(__dirname, "src")
        })
)

ROUTER

```javascript
import { HashRouter as Router } from "react-router-dom"; 
<Router>
    <App />
</Router>
export default withRouter(App)

router->index.js

import React, { Component, Fragment } from "react"
import { Route, Redirect } from "react-router-dom";
import Info from "@/components/main/Info/Info.jsx"
import News from "@/components/main/News/News.jsx"
import Mine from "@/components/main/Mine/Mine.jsx"
export default class extends Component {
    render() {
         <Fragment>
                <Route path="/info" component={Info} />
                <Route path="/news" component={News} />
                <Route path="/test" component={Test} />
                <Redirect path="/" to="/info"/>
        </Fragment>           
    }
}  

入口文件

```javascript
import { HashRouter as Router } from "react-router-dom"; 
<Router>
    <App />
</Router>
export default withRouter(App)

app.jsx

```javascript
import React from 'react';
import Routers from "@/router"
import Header from "@/components/layout/header.jsx"
export default class extends React.Component{
    render(){
        return (
            <div>
                <Routers/> //路由跳转
                <Header/>  //导航
            </div>

        )
    }
}

代理

在 src下面直接创建 setupProxy.js 名字固定写法

//模块直接有,不需要下载
var proxy = require("http-proxy-middleware");
module.exports = function(app) {
  app.use(
    proxy("/apis", {
      //    我要代理的主机
      target: "https://cnodejs.org",
      changeOrigin: true,
      pathRewrite: {
        "^/apis": ""
      }
    })
  );
};