react创建新项目教程（超简单，一看就会，最新详细）

步骤一：安装node环境，我这里是18.16.1版本

步骤二：安装create-react-app工具

• 输入 

  npm install -g create-react-app 
  

   然后按回车。
• -g 参数表示全局安装，这样你就可以在任何地方使用此命令

步骤三：输入

create-react-app exercise

然后按回车，exercise是你需要创建的文件名（自定义，必须小写字母开头，npm的命名限制规定名字不能包含大写字母），创建成功后cd 进入刚刚创建的目录

 cd exercise

步骤四：安装react-router-dom模块 

react啥都没有，你需要下载react-router-dom，用pnpm 或者npm yarn都行

pnpm add react-router-dom

报错：（如果不报错请忽略，直接进入步骤5）

 pnpm add react-router-dom
node:fs:2580
      handleErrorFromBinding(ctx);
      ^

Error: ENOENT: no such file or directory, lstat 'C:\TEMP'
    at Object.realpathSync (node:fs:2580:7)
    at ../node_modules/.pnpm/temp-dir@2.0.0/node_modules/temp-dir/index.js (D:\NodeJs\node_globel\node_modules\pnpm\dist\pnpm.cjs:106904:19)
    at __require (D:\NodeJs\node_globel\node_modules\pnpm\dist\pnpm.cjs:12:50)
    at ../node_modules/.pnpm/tempy@1.0.1/node_modules/tempy/index.js (D:\NodeJs\node_globel\node_modules\pnpm\dist\pnpm.cjs:110180:19)      
    at __require (D:\NodeJs\node_globel\node_modules\pnpm\dist\pnpm.cjs:12:50)
    at ../env/node.fetcher/lib/index.js (D:\NodeJs\node_globel\node_modules\pnpm\dist\pnpm.cjs:110300:36)
    at __require (D:\NodeJs\node_globel\node_modules\pnpm\dist\pnpm.cjs:12:50)
    at ../env/plugin-commands-env/lib/node.js (D:\NodeJs\node_globel\node_modules\pnpm\dist\pnpm.cjs:111470:26)
    at __require (D:\NodeJs\node_globel\node_modules\pnpm\dist\pnpm.cjs:12:50)
    at ../env/plugin-commands-env/lib/downloadNodeVersion.js (D:\NodeJs\node_globel\node_modules\pnpm\dist\pnpm.cjs:111592:18) {
  errno: -4058,
  syscall: 'lstat',
  code: 'ENOENT',
  path: 'C:\\TEMP'
}

Node.js v18.16.1

原因：错误信息显示在尝试使用 pnpm 添加 react-router-dom 包时，pnpm 遇到了一个关于找不到指定目录（C:\TEMP）的问题。这个问题可能是因为 TEMP 环境变量不正确或者临时目录被删除导致的。

解决：在命令行中输入以下命令来找到TEMP和TMP环境变量的值：

mkdir /c/TEMP
mkdir /c/tmp

再输入：

pnpm add react-router-dom

 步骤5：安装这个插件

输入启动

pnpm run start

启动成功页面：

到这里React项目创建成功，如果额外的项目初始化可以往下操作

步骤6：删掉src目录，重新创建src目录/index.tsx，App.tsx

重新创建src目录/index.tsx

// 导入 createRoot
import { createRoot } from 'react-dom/client';

// 导入 App根组件
import App from './App'; 

import React from 'react';

// 创建 root
const root = createRoot(document.querySelector('#root') as HTMLElement) ;

// 调用 root 的render方法渲染
root.render(<App />);

重新创建src目录/index.tsx

import { FC } from "react";

interface Props {}
const Index: FC<Props> = () => {
  return (
    <fieldset>
      <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>写代码</li>
        <li>打游戏</li>
        <li>旅行</li>
        <hr />
      </ul>
    </fieldset>
  );
};

export default Index;

报错找不到模块“./App”或其相应的类型声明。是因为没有tsconfig.json文件，确保TypeScript可以解析 .tsx 文件。在tsconfig.json的compilerOptions中应包含如下设置

{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "lib": ["dom", "dom.iterable", "esnext"],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx"
    },
    "include": ["src"],
    "exclude": ["node_modules"]
  }

步骤7：效果

如果涉及路由跳转，请看这个答案组件基础，觉得有用请点个赞