React 入门

什么是 React？

React 是由 Meta（Facebook）开发的用于构建用户界面的 JavaScript 库。它采用组件化的开发方式，让你可以将 UI 拆分为独立、可复用的组件。

核心概念

JSX

JSX 是 JavaScript 的语法扩展，让你可以在 JS 中写类似 HTML 的代码：

function Hello({ name }) {
  return <h1>你好，{name}！</h1>
}

组件

React 中一切皆组件。函数组件是最常用的写法：

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  )
}

Hooks

Hooks 让函数组件也能使用状态和副作用：

import { useState, useEffect } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    document.title = `点击了 ${count} 次`
  }, [count])

  return (
    <button onClick={() => setCount(count + 1)}>
      点击了 {count} 次
    </button>
  )
}

建议

先掌握 useState 和 useEffect，这两个 Hook 能覆盖 80% 的场景。