// このファイルは webpack の増分構成用です。これは nodejs で実行される commonjs です
const { 解決 } = require('path')
// このプロジェクトの webpack 構成の操作クラスを段階的に変更して追加します const { addDecoratorsLegacy, override } = require('customize-cra')
// webpack 設定をカスタマイズする const customize = () => config => {
  // コードを書くときにインポートパスを容易にするために、現在のプロジェクトに @ 文字列を追加します config.resolve.alias['@'] = resolve('src')
  設定を返す
}
// エクスポート module.exports = override(
  // デコレータのサポートを追加する addDecoratorsLegacy(),
  // カスタム Webpack 構成を追加する customize()
） 

  「スクリプト」: {
    "start": "BROWSER=NONE に設定 && react-app-rewired を開始",
    "ビルド": "react-app-rewired ビルド",
    "テスト": "react-scripts テスト",
    "eject": "react-scripts eject"
  }

// create-react-app スクリプト ツールは、nodejs を実行するためのプロキシ設定専用のファイルを提供します // モジュール化では commonjs 仕様を使用します // create-react-app スクリプト ツールはこのエントリのみを提供しますが、プロキシ操作は完了しません // プロキシを実装するには、サードパーティ パッケージを手動でインストールする必要があります // npm i -D http-proxy-middleware
// このファイルを変更した後は、必ず => サービスを再起動してください const { createProxyMiddleware: proxy } = require('http-proxy-middleware');
// アプリオブジェクトはエクスプレスオブジェクトです module.exports = app => {
  アプリを使用する(
    '/api',
    プロキシ（{
        ターゲット: 'https://api.iynn.cn/film',
        変更元:true、
  }))
}
 

// config-overrides.js はデフォルトの構成を変更するために使用されます const { override, fixBabelImports } = require('customize-cra')
モジュール.エクスポート = オーバーライド(
   BabelImportsを修正('import', {
     ライブラリ名: 'antd-mobile',
     スタイル: 'css',
   })
）

React をインポートします。{ コンポーネント } から "react" をインポートします。
// `antd-mobile` のボタン コンポーネントをインポートします。import { Button } from "antd-mobile";
クラスAppはComponentを拡張します{
    与える（） {
        戻る （
            <>
                <Button type="primary">私は普通のボタンです</Button>
            </>
        );
    }
}
デフォルトのアプリをエクスポートします。

高さ: .4rem;
行の高さ: .4rem;
背景: #FF6C0C;
フォントサイズ: .18rem;
テキスト配置: 中央;
色:#fff;

npm i -g json-server === yarn グローバル json-server を追加します
//json-server のデフォルト ルーティング モード // get / post / put / delete をサポートし、ファイルの書き込みもサポートします。クロスドメインです // data.json
// http リクエストアドレス http://xxx/data
{
  "データ"： {
    "id": 1,
    "名前": "aaa",
    「年齢」: 20
  }
}
json-server データ.json

エクスポート const SearchBox = styled.div`
  幅：90vw;
  高さ: .46rem;
  ディスプレイ: フレックス;
  境界線: 1px 実線 #ff6c0c;
  マージン: .15rem 自動;
  境界線の半径: 5px;
  ボックスの影: 1px 1px 5px #ccc;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  画像{
    幅: .2rem;
    高さ: .2rem;
  }
  スパン{
    色:#555;
    左マージン: .1rem;
  }
`

エクスポート const HotCateBox = styled.div`
  背景: #fff;
  。タイトル{
    パディング: .15rem;
    色:#949494;
  }
`
<グリッドデータ={hotcate}
              列番号={3}
              アイテムスタイル={{ 高さ: '.5rem' }}
              onClick={(行, インデックス) => {
                console.log(インデックス、this.props.history.push)
              }}
              レンダリングアイテム={データアイテム => (
                <div>{データ項目.タイトル}</div>
              )}
            />

<div>
	<h1>素晴らしい食事</h1>
	<div>
		<ダウンロード>
			<dt>
				<img src="http://www.mobiletrain.org/images/index/new_logo.png" />
			</dt>
			<dd>
				<h3>ピーマンの干し豆腐</h3>
				<p>1000 回閲覧、2000 件のお気に入り</p>
			</dd>
		</dl>
	</div>
</div>

div {
	左パディング: .1rem;
	>h1 {
		高さ: .5rem;
		行の高さ: .6rem;
		左パディング: .15rem;
		色: #666;
		左パディング: 0;
	}
	>div {
		ディスプレイ: フレックス;
		flex-wrap: ラップ;
		>ダウンロード{
			幅: calc(50% - 0.1rem);
			背景: #fff;
			右マージン: .1rem;
			マージン下部: .1rem;
			dt {
				画像 {
					幅: 100%;
				}
			}
			dd {
				ディスプレイ: フレックス;
				flex-direction: 列;
				アイテムの位置を中央揃えにします。
				パディング: .1rem;
				h3 {
					フォントサイズ: .16rem;
				}
				ｐ {
					フォントサイズ: .12rem;
					色: #666;
				}
			}
		}
	}

<ul>
	<li>カテゴリー</li>
	<li className="active">材料</li>
	<li className="スライダー右"></li>
</ul>

高さ:.44rem;
背景:#ee742f;
ディスプレイ:フレックス;
アイテムを中央揃えにします。
コンテンツを中央揃えにする。
ul {
	幅：1.4rem;
	高さ: .3rem;
	ディスプレイ: フレックス;
	位置: 相対的;
	境界線: 1px 実線 #fff;
	zインデックス: 0;
	境界線の半径: .15rem;
	li {
		フレックス: 1;
		行の高さ: .3rem;
		テキスト配置: 中央;
		色: #fff;
		&:最後の子 {
			位置: 絶対;
			幅: 50%;
			高さ: .3rem;
			背景: #fff;
			Zインデックス: -1;
			境界線の半径: .15rem;
			変換: translate(0, 0);
			遷移: すべて 0.4 秒のイーズイン。
			＆。右 {
				変換: translate(100%, 0);
			}
		}
		＆。アクティブ {
			色: #ee742f;
		}
	}

<div>
	<div>
		<ul>
			<li class="active"><span>カテゴリ</span></li>
		</ul>
	</div>
	<div>
		<ul>
			<li>目次</li>
		</ul>
	</div>
</div>

.div {
	高さ: 100%;
	ディスプレイ: フレックス;
	>div:最初の子{
		幅: .9rem;
		>ul {
			高さ: 100%;
			overflow-y: スクロール;
			li {
				高さ: .5rem;
				テキスト配置: 中央;
				行の高さ: .5rem;
				背景: #f3f3f3;
				＆。アクティブ {
					背景: #fff;
					スパン {
						表示: インラインブロック;
						高さ: 100%;
						下境界線: 1px 実線 #ee742f;
					}
				}
			}
		}
	}
	>div:最後の子{
		フレックス: 1;
		背景: #fff;
		パディング: .2rem .1rem;
		>ul {
			ディスプレイ: フレックス;
			flex-wrap: ラップ;
			overflow-y: スクロール;
			高さ: 100%;
			align-content: flex-start;
			li {
				幅: 33.3333%;
				テキスト配置: 中央;
				高さ: .5rem;
				行の高さ: .5rem;
				色: #666;
			}
		}
	}