react 入门教程1

🔧 一、环境搭建（必做）

1. ‌安装 Node.js 和 npm‌

• 官网下载 LTS 版 Node.js（推荐 v18.x+），安装时勾选“自动安装 npm”

• 终端验证安装：

node -v  # 检查 Node.js 版本
npm -v   # 检查 npm 版本

创建 React 项目‌

• 使用官方脚手架工具：

npx create-react-app my-app  # my-app 为项目名
cd my-app
npm start                   # 启动开发服务器（默认端口 3000）

• 浏览器访问 http://localhost:3000 查看初始化页面

🗂️ 二、项目结构解析（关键文件）

my-app/
├── public/
│   └── index.html         # HTML 入口（含 `<div id="root">` 挂载点）
├── src/
│   ├── App.js             # 根组件（核心开发文件）
│   ├── index.js           # 应用入口（渲染根组件到 DOM）
│   └── App.css            # 组件样式
└── package.json           # 项目依赖配置

‌修改流程‌：编辑 App.js 中的组件代码 → 自动更新页面

⚛️ 三、核心概念与实践

1. ‌组件开发‌

• ‌函数组件‌（推荐）：

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

JSX 语法规则‌：

• 标签必须闭合（如 <br />）

• 多元素需用 <div> 或 <> 片段包裹

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>JSX 比 HTML 更严格</p>
    </>
  );
}

样式添加‌

• 使用 className 替代 CSS 的 class：

<div className="container">内容</div>

数据传递‌

• 父组件 → 子组件：通过 props 单向传递

<Welcome name="React" />  // 子组件通过 props.name 获取