React编程之脚手架开发

React应用

React脚手架

create-react-app创建

npm i -g create-react-app // 下载工具
create-react-app react_staging // 创建react
cd react-staging // 进入项目
npm start // 启动项目
npm run build // 发布项目
npm test // 测试（不用）
npm run eject // 生成配置文件（不用）

    // 组件后缀名： src/compnents/XXX/index.jsx
    // React入口文件：
        // 第一种写法(了解)
        // import ReactDOM from 'react-dom';
        // ReactDOM.render(<App />,document.getElementById('root'));

        // 第二种写法
        import ReactDOM from 'react-dom/client';
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(
            <React.StrictMode>
                <App />
            </React.StrictMode>
        );

React ajax

网络请求axios

服务端【server/test_agent_server npm start】
配置代理服务器2种方式

    // 1、package.json配置proxy属性
    { "proxy": url } // 代理地址

    // 2、src目录创建setupProxy.js文件
    const { createProxyMiddleware } = require('http-proxy-middleware')
    module.exports = function(app){
        app.use(
            createProxyMiddleware('api1',{
                target: url, // 地理地址
                changeOrigin: true, // 服务器host值显示
                pathRewrite: {'^/api1':''} // 路径替换
            })
        )
    }

React路由

html通过a标签跳转，react通过路由改变切换组件

1.路由分类：一般组件(components) 路径组件(pages)
2.样式丢失：绝对路径（webpack参数路径），不要使用相对路径

    // 路由安装 npm i react-router-dom@5（最新版本6）

    // 文件：src/index.js、路由模式：浏览器与哈希模式 BrowserRouter|HashRouter
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>
    // 匹配路由 activeClassName：激活样式、to：路径、className：未激活样式
    <Link className="noActive" to="/about">About</Link>
    <NavLink activeClassName="active" className="noActive" to="/about">About</NavLink>
    <NavLink {...props}>About</NavLink>
    // 注册路由 Switch：单一模式 Route：路由 Redirect：重定向
    <Switch>
        // ecact：精确匹配、path：路径、component: 跳转组件
        <Route exact path="/home" component={Demo}/>
        // 重定向
        <Redirect to="home" />
    </Switch>

** 路由传递参数**

    // 1、params参数  
    <Link to={`/home/params/detail/${id}/${desc}`}>{desc}</Link>
    <Route path="/home/params/detail/:id/:desc" component={Detail} />
    this.props.match.params; // map | find

    // 2、search参数  
    <Link to={`/home/search/detail?id=${id}&desc=${desc}`}>{desc}</Link>    
    <Route path="/home/search/detail" component={Detail} />
    this.props.location; // map | qs.parse(arr.slice(1)) | find

    // 3、state参数  
    <Link to={{pathname:'/home/state/detail',state:{id:id,desc:desc}}}>{desc}</Link>  
    <Route path="/home/state/detail" component={Detail} />
    this.props.location.state || {}; // map | find

编程式路由导航 withRouter

    // 一般路由转换编程路由
    export default withRedirect(一般路由名称)
    this.props.history.goForward
    this.props.history.goBack
    this.props.history.go(n) // n 可正可负
    // 路由模式 push | replace
    this.props.history.push
    this.props.history.replace
    this.props.history.push(`/xxx/${id}/${title}`) // params模式
    this.props.history.push(`/xxx?id=${id}&title=${title}`) // search模式
    this.props.history.push(`/xxx`,{id,title}) // state模式

ReactUI组件库

[官网](https://ant-design.gitee.io/index-cn)

ReactUI组件库 material-ui、ant-design

    // 安装antd  npm i antd
    // 主题色配置 src/App.js
    <ConfigProvider
        theme={{
            token: {
                colorPrimary: '#00b96b',
            },
        }}
    >
        <App />
    </ConfigProvider>