如何使用自定义模板创建Create React App及无Hello World的React应用？

下面两种方法可以帮你快速得到没有默认Hello World示例的React项目：

方法一：用社区空模板一键生成 #

直接在创建命令里指定官方生态里的空模板，一步到位：

npx create-react-app my-shop --template empty

这个模板只会生成最基础的项目结构和必要的配置文件，没有任何示例代码，你可以直接在上面写自己的业务逻辑。

方法二：手动清理默认项目 #

如果不想依赖第三方模板，也可以先创建默认项目，再删掉示例代码：

1. 先创建默认应用：

npx create-react-app my-shop

2. 进入项目文件夹：

cd my-shop

3. 清空src目录里的所有示例文件：

rm -rf src/*

4. 创建最基础的入口文件：
   新建src/index.js，内容如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

新建src/App.js，内容如下：

function App() {
  return (
    <div className="App">
      {/* 在这里写你的自定义内容就行 */}
    </div>
  );
}

export default App;

如果默认模板和社区模板都满足不了你的需求，可以自己制作并使用自定义模板，步骤如下：

1. 搭建模板项目结构
   模板必须遵循CRA的规范，基本结构如下：

cra-template-my-custom/
├── template/
│   ├── public/       # 静态资源目录，放index.html等文件
│   └── src/          # 源码目录，放你的自定义入口、组件等
├── package.json
└── README.md

• template目录里的内容就是创建新项目时会复制过去的文件，把你想要的基础结构和代码放进去就行。
• package.json里的名称必须以cra-template-开头（比如cra-template-my-custom），这样CRA才能识别它是模板。

2. 发布模板（可选）
   如果想让其他人也能用你的模板，把它发布到npm：

• 先登录npm账号：

npm login

• 进入模板目录，执行发布命令：

npm publish

3. 使用自定义模板
   不管是本地的模板还是已经发布到npm的模板，都能用下面的命令创建应用：

• 已发布到npm的模板：

npx create-react-app my-app --template my-custom

• 本地模板（比如模板在../cra-template-my-custom路径下）：

npx create-react-app my-app --template file:../cra-template-my-custom

内容的提问来源于stack exchange，提问作者geoni ogando