如何创建react

创建 React 项目的步骤

使用官方工具 Create React App (CRA) 可以快速搭建 React 项目。确保已安装 Node.js（版本 14 或更高）和 npm/yarn。

安装 Create React App 工具：

npx create-react-app my-app

进入项目目录：

cd my-app

启动开发服务器：

npm start

项目结构说明

创建的项目包含以下核心文件和目录：

• src/：存放源代码，包括主入口文件 index.js 和组件文件 App.js
• public/：存放静态文件如 HTML 模板
• node_modules/：存放项目依赖
• package.json：定义项目配置和依赖

编写第一个组件

在 src/App.js 中修改默认组件代码：

function App() {
  return (
    <div>
      <h1>Hello React</h1>
    </div>
  );
}
export default App;

添加新组件

创建新文件 src/MyComponent.js：

function MyComponent() {
  return <p>This is my component</p>;
}
export default MyComponent;

在 App.js 中导入和使用：

import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <MyComponent />
    </div>
  );
}

构建生产版本

运行构建命令生成优化后的生产代码：

npm run build

构建结果将输出到 build/ 目录，可直接部署到服务器。

其他创建方式

对于更复杂的项目，可以考虑：

• Vite：更快的构建工具

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

• Next.js：服务端渲染框架

  

  npx create-next-app@latest