小白如何搭建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 组件将挂载到其中的rootdiv。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 列表、天气应用等小型项目。
