小白如何搭建react

安装 Node.js 和 npm

确保系统已安装 Node.js（包含 npm）。可通过官网下载安装包（https://nodejs.org/），选择 LTS 版本。安装完成后，终端运行以下命令验证版本：

node -v
npm -v

创建 React 项目

使用官方工具 create-react-app 快速初始化项目。运行以下命令生成项目目录（如 my-app）：

npx create-react-app my-app

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

cd my-app
npm start

此时浏览器会自动打开 http://localhost:3000 显示默认页面。

项目结构解析

生成的项目目录包含以下核心文件：

• src/index.js：应用入口文件，渲染根组件。
• src/App.js：默认根组件，可修改为自定义内容。
• public/index.html：HTML 模板，React 组件将挂载到其中的 root div。
• package.json：依赖和脚本配置。

编写第一个组件

在 src 目录下新建文件 Hello.js，编写函数组件：

import React from 'react';

function Hello() {
  return <h1>Hello, React!</h1>;
}

export default Hello;

在 App.js 中引入并使用该组件：

import Hello from './Hello';

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

添加样式

React 支持内联样式或 CSS 文件。创建 src/Hello.css：

h1 {
  color: blue;
}

在 Hello.js 中导入样式：

import './Hello.css';

构建与部署

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

npm run build

生成的 build 目录可直接部署到静态服务器（如 Netlify、Vercel 或 Nginx）。

常用扩展工具

• 状态管理：Redux 或 Context API。
• 路由：react-router-dom。
• UI 库：Material-UI 或 Ant Design。
• 调试工具：安装 React Developer Tools 浏览器扩展。

学习资源推荐

• 官方文档（https://react.dev/）
• 实践项目：Todo 列表、天气应用等小型项目。