一、目标：

摆脱繁琐的react-create-app 方式搭建脚手架，为开发测试提供简化环境。

二、过程：

1. 创建项目结构及安装package：

~ $ mkdir -p johnDev/public && mkdir -p johnDev/src && cd johnDev 
johnDev $ npm init -y
johnDev $ yarn add -D typescript
johnDev $ yarn add react-scripts react react-dom antd @ant-design/icons

1. 编辑 public/index.html
  johnDev $ vim public/index.html
  内容如下：

<!DOCTYPE html>
<html>
  <body>
    <div id="container"/>
  </body>
</html>

1. 编辑 src/index.js
  johnDev $ vim src/index.js
  内容如下：

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Button } from 'antd';

ReactDOM.render(
  <>
    <Button type="primary">Primary Button</Button>
  </>,
  document.getElementById('container'),
);

1. 运行
  npx react-scripts start，此时屏幕会出现如下提示（目的是加入浏览器兼容选项，选Y即可）

johnDev $ npx react-scripts start
? We're unable to detect target browsers.

Would you like to add the defaults to your package.json? › (Y/n)

最后提示如下：

Compiled successfully!

You can now view johnDev in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.16.50.48:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

1. 附: 项目结构和package.json

johnDev $ tree -L  2
.
├── node_modules
├── package.json
├── public
│   └── index.html
├── src
│   └── index.js
└── yarn.lock

{
  "name": "johnDev",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.1.3"
  },
  "dependencies": {
    "@ant-design/icons": "^4.4.0",
    "antd": "^4.10.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "^4.0.1"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}