// This file is for incremental configuration of webpack. It is commonjs running in nodejs
const { resolve } = require('path')
// Incrementally modify and add operation classes for the webpack configuration in this project const { addDecoratorsLegacy, override } = require('customize-cra')
// Customize webpack configuration const customize = () => config => {
  // Add an @ string to the current project to facilitate the import path when writing code config.resolve.alias['@'] = resolve('src')
  return config
}
// Export module.exports = override(
  // Add decorator support addDecoratorsLegacy(),
  // Add custom webpack configuration customize()
) 

  "scripts": {
    "start": "set BROWSER=NONE && react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

// The create-react-app script tool provides a file specifically for proxy configuration, which is for nodejs running // Modularization uses commonjs specifications // The create-react-app script tool only provides this entry, but the proxy operation is not completed for you // You need to manually install a third-party package to implement the proxy // npm i -D http-proxy-middleware
// After modifying this file, be sure to => restart the service const { createProxyMiddleware: proxy } = require('http-proxy-middleware');
// app object is the express object module.exports = app => {
  app.use(
    '/api',
    proxy({
        target:'https://api.iynn.cn/film',
        changeOrigin:true,
  }))
}
 

// config-overrides.js is used to modify the default configuration const { override, fixBabelImports } = require('customize-cra')
module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd-mobile',
     style: 'css',
   })
)

import React, { Component } from "react";
// Import the button component of `antd-mobile`import { Button } from "antd-mobile";
class App extends Component {
    render() {
        return (
            <>
                <Button type="primary">I am a regular button</Button>
            </>
        );
    }
}
export default App;

height: .4rem;
line-height: .4rem;
background: #FF6C0C;
font-size: .18rem;
text-align: center;
color:#fff;

npm i -g json-server === yarn add global json-server
//json-server default routing mode // supports get / post / put / delete and also supports file writing. It is cross-domain // data.json
// http request address http://xxx/data
{
  "data": {
    "id": 1,
    "name": "aaa",
    "age": 20
  }
}
json-server data.json

export const SearchBox = styled.div`
  width: 90vw;
  height: .46rem;
  display: flex;
  border: 1px solid #ff6c0c;
  margin: .15rem auto;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #ccc;
  justify-content: center;
  align-items: center;
  img{
    width: .2rem;
    height: .2rem;
  }
  span{
    color:#555;
    margin-left: .1rem;
  }
`

export const HotCateBox = styled.div`
  background: #fff;
  .title{
    padding: .15rem;
    color:#949494;
  }
`
<Grid data={hotcate}
              columnNum={3}
              itemStyle={{ height: '.5rem' }}
              onClick={(row, index) => {
                console.log(index, this.props.history.push)
              }}
              renderItem={dataItem => (
                <div>{dataItem.title}</div>
              )}
            />

<div>
	<h1>Excellent food</h1>
	<div>
		<dl>
			<dt>
				<img src="http://www.mobiletrain.org/images/index/new_logo.png" />
			</dt>
			<dd>
				<h3>Green pepper dried tofu</h3>
				<p>1000 views 2000 favorites</p>
			</dd>
		</dl>
	</div>
</div>

div {
	padding-left: .1rem;
	>h1 {
		height: .5rem;
		line-height: .6rem;
		padding-left: .15rem;
		color: #666;
		padding-left: 0;
	}
	>div {
		display: flex;
		flex-wrap: wrap;
		>dl {
			width: calc(50% - 0.1rem);
			background: #fff;
			margin-right: .1rem;
			margin-bottom: .1rem;
			dt {
				img {
					width: 100%;
				}
			}
			dd {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: .1rem;
				h3 {
					font-size: .16rem;
				}
				p {
					font-size: .12rem;
					color: #666;
				}
			}
		}
	}

<ul>
	<li>Category</li>
	<li className="active">Ingredients</li>
	<li className="slider right"></li>
</ul>

height:.44rem;
background:#ee742f;
display:flex;
align-items:center;
justify-content:center;
ul {
	width: 1.4rem;
	height: .3rem;
	display: flex;
	position: relative;
	border: 1px solid #fff;
	z-index: 0;
	border-radius: .15rem;
	li {
		flex: 1;
		line-height: .3rem;
		text-align: center;
		color: #fff;
		&:last-child {
			position: absolute;
			width: 50%;
			height: .3rem;
			background: #fff;
			z-index: -1;
			border-radius: .15rem;
			transform: translate(0, 0);
			transition: all 0.4s ease-in;
			&.right {
				transform: translate(100%, 0);
			}
		}
		&.active {
			color: #ee742f;
		}
	}

<div>
	<div>
		<ul>
			<li class="active"><span>Category</span></li>
		</ul>
	</div>
	<div>
		<ul>
			<li>Contents</li>
		</ul>
	</div>
</div>

.div {
	height: 100%;
	display: flex;
	>div:first-child {
		width: .9rem;
		>ul {
			height: 100%;
			overflow-y: scroll;
			li {
				height: .5rem;
				text-align: center;
				line-height: .5rem;
				background: #f3f3f3;
				&.active {
					background: #fff;
					span {
						display: inline-block;
						height: 100%;
						border-bottom: 1px solid #ee742f;
					}
				}
			}
		}
	}
	>div:last-child {
		flex: 1;
		background: #fff;
		padding: .2rem .1rem;
		>ul {
			display: flex;
			flex-wrap: wrap;
			overflow-y: scroll;
			height: 100%;
			align-content: flex-start;
			li {
				width: 33.3333%;
				text-align: center;
				height: .5rem;
				line-height: .5rem;
				color: #666;
			}
		}
	}