如何新建react项目

使用 Create React App 创建项目

安装 Create React App 工具，运行以下命令创建一个新的 React 项目：

npx create-react-app my-app

my-app 是项目名称，可根据需要修改。

进入项目目录并启动开发服务器：

cd my-app
npm start

使用 Vite 创建项目

Vite 是一个快速的构建工具，适用于现代前端框架。安装 Vite 并创建 React 项目：

npm create vite@latest my-react-app --template react

进入项目目录并安装依赖：

cd my-react-app
npm install
npm run dev

使用 Next.js 创建项目

Next.js 是一个 React 框架，适合构建服务器渲染的应用。创建 Next.js 项目：

npx create-next-app@latest

按照提示选择项目配置，完成后启动开发服务器：

npm run dev

手动配置 Webpack 和 Babel

对于需要自定义配置的高级用户，可以手动设置 Webpack 和 Babel： 初始化项目并安装必要的依赖：

mkdir my-react-project
cd my-react-project
npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react

创建 webpack.config.js 和 .babelrc 文件进行配置。

使用 TypeScript 模板

对于需要 TypeScript 支持的项目，可以使用以下命令创建：

npx create-react-app my-app --template typescript

或使用 Vite：

npm create vite@latest my-ts-app --template react-ts

项目结构说明

典型的 React 项目结构包含以下目录和文件：

• src/：存放源代码，包括组件、样式和逻辑。
• public/：存放静态资源如 HTML 模板和图片。
• package.json：项目依赖和脚本配置。
• node_modules/：安装的依赖包。