小白如何搭建react

安装 Node.js 和 npm

React 开发需要 Node.js 环境，用于运行 JavaScript 和安装依赖包。访问 Node.js 官网 下载并安装最新 LTS 版本。安装完成后，在终端运行以下命令验证是否安装成功：

node -v
npm -v

创建 React 项目

使用官方工具 create-react-app 快速初始化项目。在终端运行以下命令：

npx create-react-app my-react-app
cd my-react-app

my-react-app 是项目名称，可自定义。此命令会生成一个基础的 React 项目结构。

启动开发服务器

进入项目目录后，运行以下命令启动开发服务器：

npm start

默认情况下，浏览器会自动打开 http://localhost:3000 并显示 React 欢迎页面。修改代码后页面会实时刷新。

项目结构说明

关键文件和目录：

• src/App.js：主组件文件，可在此编写页面逻辑。
• src/index.js：项目入口文件，渲染根组件。
• public/index.html：HTML 模板文件。
• package.json：项目配置和依赖管理文件。

编写第一个组件

在 src/App.js 中修改代码，创建一个简单的组件：

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

保存后，浏览器会自动更新显示内容。

安装必要依赖（可选）

根据项目需求安装额外库，例如路由管理 react-router-dom：

npm install react-router-dom

构建生产版本

完成开发后，运行以下命令生成优化后的生产环境代码：

npm run build

构建结果会保存在 build 目录中，可直接部署到服务器。

学习资源推荐

• React 官方文档
• 在线练习平台如 CodeSandbox 或 CodePen。
• 社区教程（如 freeCodeCamp、YouTube 教程）。