实战演练

通过这些练习题帮你熟悉 React 常见概念和语法使用

1. 创建一个简单的 JSX 元素

const JSX = <h1>Hello JSX!</h1>

2. 创建一个复杂的 JSX 元素

const JSX = (
  <div>
    <h1>Hello JSX!</h1>
    <ul>
      <li>List one</li>
      <li>List two</li>
    </ul>
  </div>
)

3. 如何在 JSX 代码中添加注释

const JSX = (
  <div>
    <h1>This is a block of JSX</h1>
    {/*
      <p>Here's a subtitle</p>
    */}
  </div>
);

4. 渲染 HTML 元素到 DOM 上

ReactDOM.createRoot(document.getElementById('root')).render(
  <MyApp />
);

5. 在 JSX 中为 HTML 元素定义类

const JSX = <h1 className='title'>This is a block of JSX</h1>

6. 学习 JSX 中自关闭标签的使用

7. 创建一个无状态函数式组件

8. 创建一个 React 组件

9. 创建一个组合的复杂组件