如何直接使用react框架
安装 React 项目
使用官方工具 create-react-app 快速初始化项目。确保已安装 Node.js（建议版本 14+），在终端运行以下命令：
npx create-react-app my-app
cd my-app
npm start此命令会创建一个名为 my-app 的 React 项目并启动开发服务器（默认端口 3000）。
项目结构说明
生成的项目核心文件如下：
src/index.js：应用入口文件，渲染根组件。src/App.js：默认根组件，可在此修改主界面。public/index.html：HTML 模板，React 组件会挂载到<div id="root"></div>。
编写基础组件
创建一个函数组件示例（保存为 src/Hello.js）：
function Hello() {
return <h1>Hello, React!</h1>;
}
export default Hello;在 App.js 中引入并使用：
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
</div>
);
}添加交互与状态
使用 useState Hook 实现动态数据：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}样式处理
可直接在组件中通过 className 使用 CSS：
// App.js
import './App.css';
function App() {
return <div className="container">Content</div>;
}对应 CSS 文件（App.css）：
.container {
margin: 20px;
}构建与部署
运行生产环境构建：
npm run build生成的静态文件位于 build 目录，可部署到任何静态服务器（如 Netlify、Vercel 或 Nginx）。
关键依赖说明
react和react-dom：核心库。react-scripts：封装了 Webpack、Babel 等工具链。- 如需路由，可额外安装
react-router-dom：npm install react-router-dom
