react如何快速入门

安装开发环境

确保已安装Node.js（建议LTS版本），使用官方工具create-react-app快速搭建项目：

npx create-react-app my-app
cd my-app
npm start

运行后默认在http://localhost:3000启动开发服务器。

核心概念学习

组件：React应用的基本单元，分为函数组件和类组件。函数组件示例：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

状态管理：使用useState钩子管理组件内部状态：

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

项目结构理解

默认生成的文件中：

• src/App.js：主组件入口
• src/index.js：渲染根组件到DOM
• public/index.html：HTML模板

常用工具链

• 路由：使用react-router-dom实现页面导航：

  npm install react-router-dom

• 状态管理：复杂应用可引入Redux或Context API。

实践建议

通过修改App.js尝试动态渲染列表：

function App() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

学习资源推荐

• 官方文档：React官方教程
• 社区资源：CodeSandbox在线编辑、Stack Overflow问题排查。

从简单组件开始逐步扩展功能，结合实际项目练习能加速掌握。