执行npx create-react-app失败，求修复方案及ReactJS其他使用方式

一、解决npx create-react-app my-app的报错问题 #

1. 清除npx缓存 #

缓存异常可能导致命令执行卡顿，先执行缓存清理命令：

npx clear-npx-cache

清理完成后重新运行创建命令。

2. 切换npm镜像源 #

国内访问官方npm源大概率存在网络延迟，切换到国内镜像源：

npm config set registry https://registry.npmmirror.com

设置完成后再次执行npx create-react-app my-app。若后续需要换回官方源，执行：

npm config set registry https://registry.npmjs.org

3. 指定create-react-app稳定版本 #

最新版本可能存在兼容问题，尝试指定成熟稳定版本：

npx create-react-app@5.0.1 my-app

4. 检查Node.js版本兼容性 #

React官方要求Node.js版本≥14.0.0，执行node -v查看当前版本，若版本过低，前往Node.js官网下载LTS版本安装。

5. 取消代理配置（若有） #

如果之前配置过代理，先清除相关设置：

npm config delete proxy
npm config delete https-proxy

二、其他使用React的方式 #

1. 用Vite创建React项目 #

Vite的初始化速度远快于create-react-app，适合快速启动项目：

# npm
npm create vite@latest my-react-app -- --template react
# yarn
yarn create vite my-react-app --template react
# pnpm
pnpm create vite my-react-app --template react

创建完成后进入目录，安装依赖并启动：

cd my-react-app
npm install
npm run dev

2. 使用Next.js（全栈React框架） #

Next.js支持服务端渲染、静态生成等特性，适合搭建全栈React应用：

npx create-next-app@latest my-next-app

按照终端提示完成配置后，启动项目：

cd my-next-app
npm run dev

3. 直接通过CDN引入React（无构建工具） #

适合快速体验React或制作小型原型，无需本地构建环境，在HTML文件中写入以下代码，直接打开即可运行：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Demo</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function App() {
        return <h1>Hello, React!</h1>;
      }
      ReactDOM.createRoot(document.getElementById('root')).render(<App />);
    </script>
  </body>
</html>

4. 使用Remix（现代全栈React框架） #

Remix专注于路由与数据加载，适合构建高性能全栈应用：

npx create-remix@latest my-remix-app

按照提示完成配置后启动项目即可。

内容的提问来源于stack exchange，提问作者Ryze Cdr