1

const element = <h1 className="title">Hello, JSX!</h1>

1
2
3
4
5

const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello, JSX!'
)

1
2
3

<div class="container">
  <h1 class="title">Hello</h1>
</div>

1
2
3

<div className="container">
  <h1 className="title">Hello</h1>
</div>

1
2

<label for="username">用户名</label>
<input id="username" type="text" />

1
2

<label htmlFor="username">用户名</label>
<input id="username" type="text" />

1
2
3
4

<!-- HTML 允许这样写 -->
<img src="cat.jpg">
<br>
<input type="text">

1
2
3
4

<img src="cat.jpg" alt="一只胖猫" />
<br />
<input type="text" />
<hr />

1
2

<img src="cat.jpg">        // ❌ 报错！
<input type="text">       // ❌ 报错！

1
2
3
4
5

<div>
  <h1>
    <span>嵌套内容</span>
  </h1>
</div>

1
2
3
4
5

<div>
  <h1>
    <span>嵌套内容</span>
  <!-- h1 没有关闭！ -->
</div>

1

<input maxlength="50" tabindex="1" onclick="handleClick()" />

1

<input maxLength={50} tabIndex={1} onClick={handleClick} />

1

<div style="color: red; font-size: 20px;">红色大字</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const myStyle = {
  color: 'red',           // 注意：这里是字符串，不是 red
  fontSize: '20px',        // CSS 属性名用 camelCase：font-size → fontSize
  backgroundColor: '#f0f0f0',  // background-color → backgroundColor
  marginTop: '10px',       // margin-top → marginTop
}

return <div style={myStyle}>红色大字</div>

// 也可以直接写内联对象
return <div style={{ color: 'red', fontSize: '20px' }}>红色大字</div>

1

return <div style="color: red;">红色大字</div>  // ❌ 字符串不行！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

function MyComponent() {
  return (
    <div>
      {/* 这是单行注释 */}

      {/*
       * 这是多行注释
       * 可以写很多很多内容
       * 就像这样
       */}

      <h1>标题</h1>

      {/* 条件注释：只在开发环境显示 */}
      {process.env.NODE_ENV === 'development' && (
        <div>🔧 开发模式调试工具</div>
      )}
    </div>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function App() {
  const name = '小明'
  const age = 25

  return (
    <div>
      {/* 用 {} 包裹变量名，变量值就会被渲染出来 */}
      <p>姓名：{name}</p>
      <p>年龄：{age}</p>
    </div>
  )
}

1
2
3
4

<div>
  <p>姓名：小明</p>
  <p>年龄：25</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

function Demo() {
  const a = 10
  const b = 3
  const isLoggedIn = true
  const user = { name: '张三', age: 30 }

  return (
    <div>
      {/* 算术运算 */}
      <p>{a} + {b} = {a + b}</p>  {/* 打印结果：10 + 3 = 13 */}

      {/* 三元运算符 */}
      <p>{isLoggedIn ? '欢迎回来！' : '请登录'}</p>  {/* 打印结果：欢迎回来！ */}

      {/* 模板字符串 */}
      <p>{`我叫${user.name}，今年${user.age}岁`}</p>
      {/* 打印结果：我叫张三，今年30岁 */}

      {/* 调用函数 */}
      <p>{user.name.toUpperCase()}</p>  {/* 打印结果：张三 */}

      {/* 数组方法 */}
      <ul>
        {[1, 2, 3].map(n => (
          <li key={n}>{n * 2}</li>  {/* 打印结果：2, 4, 6 */}
        ))}
      </ul>
    </div>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// ❌ 错误写法：if 语句不能直接放在 {} 里
return (
  <div>
    {if (isLoggedIn) { return <p>已登录</p> }}  // 语法错误！
  </div>
)

// ✅ 正确写法一：三元运算符（适合简单的条件）
return (
  <div>
    {isLoggedIn ? <p>已登录</p> : <p>未登录</p>}
  </div>
)

// ✅ 正确写法二：逻辑运算符（适合只显示/不显示）
return (
  <div>
    {isLoggedIn && <p>已登录</p>}
  </div>
)

// ✅ 正确写法三：IIFE（立即调用函数表达式，适合复杂逻辑）
return (
  <div>
    {(() => {
      if (isLoggedIn) return <p>已登录</p>
      if (isPending) return <p>加载中...</p>
      return <p>未登录</p>
    })()}
  </div>
)

// ✅ 正确写法四：在组件外部判断（适合复杂的条件分支）
function Welcome({ user, isPending }) {
  if (isPending) return <p>加载中...</p>
  if (!user) return <p>请登录</p>
  return <p>欢迎，{user.name}！</p>
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function UserStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>欢迎回来！🎉</p>
      ) : (
        <p>请登录 🔐</p>
      )}
    </div>
  )
}

1

<div><p>欢迎回来！🎉</p></div>

1

<div><p>请登录 🔐</p></div>

1
2
3
4
5
6
7
8
9

function Notification({ count }) {
  return (
    <div>
      {/* 有新消息时显示红点 */}
      {count > 0 && <span className="badge">{count}</span>}
      {/* 没有新消息时，什么都不显示 */}
    </div>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// ❌ 错误示例：0 是 falsy 值，会导致页面显示一个 0！
const messageCount = 0
return (
  <div>
    {messageCount && <span>你有 {messageCount} 条新消息</span>}
    {/* 结果：页面显示 "0"，而不是什么都不显示！ */}
  </div>
)

// ✅ 正确写法：把判断条件放在前面，渲染内容放在后面
const messageCount = 0
return (
  <div>
    {messageCount > 0 && <span>你有 {messageCount} 条新消息</span>}
    {/* 结果：什么都不显示 ✅ */}
  </div>
)

// ✅ 另一个正确写法：用三元运算符兜底
return (
  <div>
    {messageCount ? <span>你有 {messageCount} 条新消息</span> : null}
  </div>
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function Greeting({ name }) {
  return (
    <div>
      <p>欢迎，{name || '陌生人'}！</p>
      {/* 如果 name 是 undefined/null/空字符串，就显示"陌生人" */}
    </div>
  )
}

// Greeting({ name: '张三' }) -> 打印结果：欢迎，张三！
// Greeting({ name: '' }) -> 打印结果：欢迎，陌生人！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

function OrderStatus({ status }) {
  return (
    <div>
      {(() => {
        switch (status) {
          case 'pending':
            return <span>⏳ 待处理</span>
          case 'processing':
            return <span>🔄 处理中</span>
          case 'shipped':
            return <span>🚚 已发货</span>
          case 'delivered':
            return <span>✅ 已送达</span>
          case 'cancelled':
            return <span>❌ 已取消</span>
          default:
            return <span>❓ 未知状态</span>
        }
      })()}
    </div>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function ToggleComponent() {
  const [isVisible, setIsVisible] = React.useState(true)

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? '隐藏' : '显示'}
      </button>

      {/* 方式一：条件渲染（组件会从 DOM 中完全移除） */}
      {isVisible && <div className="content">我会消失和出现</div>}

      {/* 方式二：display:none（组件始终在 DOM 中，只是隐藏了） */}
      <div style={{ display: isVisible ? 'block' : 'none' }} className="content">
        我只是隐藏，没有消失（DOM 里还有我）
      </div>
    </div>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function ColorList() {
  const colors = ['红色', '蓝色', '绿色', '黄色']

  return (
    <ul>
      {colors.map(color => (
        <li>{color}</li>
      ))}
    </ul>
  )
}

// 渲染结果：
// <ul>
//   <li>红色</li>
//   <li>蓝色</li>
//   <li>绿色</li>
//   <li>黄色</li>
// </ul>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

const fruits = ['苹果', '香蕉', '橙子']

// ❌ 错误：没有 key
fruits.map(fruit => <li>{fruit}</li>)
// 控制台会报警告：Warning: Each child in a list should have a unique "key" prop.

// ✅ 正确：添加 key
fruits.map((fruit, index) => (
  <li key={index}>{fruit}</li>
))

// ✅ 更好的方式：用数据本身的唯一 ID 作为 key
const users = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
]

users.map(user => (
  <li key={user.id}>{user.name}</li>  // 用 id 作为 key ✅
))

1
2
3

// ✅ 可以用 index 的场景：静态列表，不会增删
const staticLabels = ['首页', '关于我们', '联系我们']
staticLabels.map((label, index) => <span key={index}>{label}</span>)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// ❌ 错误场景：列表会增删，用 index 做 key 会导致渲染错乱
function TodoList() {
  const [todos, setTodos] = React.useState([
    { id: 1, text: '吃饭' },
    { id: 2, text: '睡觉' },
    { id: 3, text: '写代码' },
  ])

  const deleteTodo = (id) => {
    setTodos(todos.filter(t => t.id !== id))
  }

  return (
    <ul>
      {todos.map((todo, index) => (
        // ❌ 用 index 当 key！删除中间项时会导致渲染错误
        <li key={index}>
          {todo.text}
          <button onClick={() => deleteTodo(todo.id)}>删除</button>
        </li>
      ))}
    </ul>
  )
}

// ✅ 正确写法：用 id 当 key
{todos.map(todo => (
  <li key={todo.id}>  {/* ✅ 用数据 id 当 key */}
    {todo.text}
    <button onClick={() => deleteTodo(todo.id)}>删除</button>
  </li>
))}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

function CategoryList() {
  const categories = [
    {
      id: 1,
      name: '水果',
      items: ['苹果', '香蕉', '橙子']
    },
    {
      id: 2,
      name: '蔬菜',
      items: ['白菜', '萝卜', '黄瓜']
    }
  ]

  return (
    <div>
      {categories.map(category => (
        <div key={category.id} className="category">
          <h3>{category.name}</h3>
          <ul>
            {category.items.map((item, index) => (
              <li key={index}>{item}</li>  // 同一分类下的 item 用 index 是可以的
            ))}
          </ul>
        </div>
      ))}
    </div>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const numbers = [1, 2, 3]

// 方式一：括号写法（推荐，简洁）
numbers.map(n => (
  <span key={n}>{n * 2}</span>
))

// 方式二：花括号写法（需要 return）
numbers.map(n => {
  return <span key={n}>{n * 2}</span>
})

// 方式三：花括号 + 箭头函数隐式 return（ES6 特性）
numbers.map(n => n * 2)  // 直接返回数字，不是 JSX！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// ❌ 错误：组件返回了两个并列的根元素
function BadComponent() {
  return (
    <h1>标题</h1>
    <p>内容</p>
  )
  // 编译错误：JSX 表达式必须有一个父元素！
}

// ❌ 不好：用 div 包裹（但 div 可能会破坏 CSS 布局）
function BadComponent() {
  return (
    <div>
      <h1>标题</h1>
      <p>内容</p>
    </div>
  )
}

// ✅ 好：用 Fragment 包裹（不产生额外的 DOM 节点）
import { Fragment } from 'react'

function GoodComponent() {
  return (
    <Fragment>
      <h1>标题</h1>
      <p>内容</p>
    </Fragment>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import { Fragment } from 'react'

function TagList({ tags }) {
  return (
    <>
      {tags.map(tag => (
        // ❌ 错误：<> 简写不支持 key
        // <span key={tag.id}>{tag.name}</span>
      ))}
    </>
  )
}

function TagListFixed({ tags }) {
  return (
    <>
      {tags.map(tag => (
        // ✅ 正确：需要 key 时，用完整的 <Fragment key={...}>
        <Fragment key={tag.id}>
          <span>{tag.name}</span>
          <span>、</span>
        </Fragment>
      ))}
    </>
  )
}