【React】React入门--React的创建、Jsx语法与组件以及状态(state)

import React from 'react';
import ReactDOM from 'react-dom';
 
// 创建一个名为App的组件
function App() {
  // 使用Hooks API中的useState钩子来管理组件的状态
  const [count, setCount] = React.useState(0);
 
  // 每次调用increment函数，计数器count会增加
  function increment() {
    setCount(count + 1);
  }
 
  // 这是JSX语法，它是React中的可选特性，用于在JS中编写HTML样式的代码
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}
 
// 将App组件挂载到id为root的DOM元素上
ReactDOM.render(<App />, document.getElementById('root'));

这段代码展示了如何在React中创建一个简单的计数器应用程序。它使用了函数组件和Hooks API中的useState钩子来管理组件的状态，并通过JSX语法定义了组件的输出。最后，它使用ReactDOM.render函数将应用程序挂载到页面上的某个DOM元素上。