开始搭建第一个React项目吧～

React基础（一）

废话不多说，直接开始进行项目搭建，先有个大概的框架。目前React来到React19。

项目搭建

官网有很多构建项目的方式，这边直接使用一种框架都通用的方式进行构建。

第一步：初始化

npm init -y构建出package.json文件，添加需要用到的依赖，这里需要依赖这些内容以及需要执行的脚本：

json 复制代码

{
"type": "module",
 "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "react": "19.2.3", 
    "react-dom": "19.2.3"
  },
  "devDependencies": {
    "vite": "7.2.7",
    "typescript": "5.9.3", // ts 项目必须 ！
    "@types/react": "19.2.7", // ts 项目必须 ！
    "@types/react-dom": "19.2.3" // ts 项目必须 ！
  }
}

第二步：安装依赖

pnpm i安装所有需要用到的依赖，安装完依赖后的项目文件结构是这样子的：

第三步：初始化ts配置

npx tsc --init创建tsconfig.json文件。这里使用npx是使用了安装下来的ts依赖------带有react配置的，所以出来的文件中具有React所需要的一些配置。出来的内容如下图：

json 复制代码

{
  // Visit https://aka.ms/tsconfig to read more about this file
  "compilerOptions": {
    // File Layout
    // "rootDir": "./src",
    // "outDir": "./dist",

    // Environment Settings
    // See also https://aka.ms/tsconfig/module
    "module": "nodenext",
    "target": "esnext",
    "types": [],
    // For nodejs:
    // "lib": ["esnext"],
    // "types": ["node"],
    // and npm install -D @types/node

    // Other Outputs
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,

    // Stricter Typechecking Options
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    // Style Options
    // "noImplicitReturns": true,
    // "noImplicitOverride": true,
    // "noUnusedLocals": true,
    // "noUnusedParameters": true,
    // "noFallthroughCasesInSwitch": true,
    // "noPropertyAccessFromIndexSignature": true,

    // Recommended Options
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
  }
}

第四步：搭建根文件

这里的根文件包括index.html和 main.tsx。tsx是ts版本的jsx，jsx是什么后面会知道，往后继续搭建吧～

index.html

需要引入main.tsx以及设置导入导出方式为esModule的方式引入。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React</title>
</head>
<body>
    <div id="app"></div>
	<script src="./main.tsx" type="module"></script>
</body>
</html>

main.tsx

tsx 复制代码

import { createRoot } from "react-dom/client";

const app = createRoot(document.getElementById("app")!);

app.render(
  <div>
    <h1>Hello React</h1>
  </div>
);

至此，执行脚本npm run dev，打开开发地址，就能惊喜的发现，你和 Hello React 见上面了。那么恭喜你，完成了一个最最最基础的React项目。

这时候，你会想到，css哪去了，要去哪里添加css？

通过模块化的概念，我们会把css文件单独引入到项目中，main.tsx又是我们的根文件，所以在这里引入全局css是最适合不过的。

tsx 复制代码

import "./main.css"

后面会出现这样的报错：

这个时候，是因为vite构建的ts项目，还需要做一个声明文件vite-env.d.ts，这是vite中规定的类型声明文件。

d.ts 复制代码

/// <reference types="vite/client" />

添加上后，全局css就能正常使用啦。

到这里，我想会有不少有疑惑的地方，比如为什么在js文件中写标签他没有报错？createRoot和render都做了什么？等等。后面我们一一解开面纱，了解React的核心。

最后，我们的项目结构是这个样子的：