# react 入门语法

# 组件写法

1
2
3

const App = function (props) {
  return <h1> Hello, world!</h1>;
};

# hook : useState 用法

定义状态：

1
2
3

import { useState } from "react";

const [index, setIndex] = useState(0);

需要修改时：

1
2
3

const add = () => {
    setIndex(index + 1);
 };

# 事件写法

在组件中添加事件时，要小驼峰式命名，函数要用 {} 括起来，一个根据点击次数逐渐增加自身数字的按钮示例：

const Add = function () {
  const [index, setIndex] = useState(0);

  const addThis = () => {
    setIndex(index + 1);
  };

  return <button onClick={addThis}>{index}</button>;
};

# props 用法

将 props 作为函数组件的参数输入，并通过 prop 的属性获取值， props 不可被修改，一般通过一个新的状态复制 props 值。这是一个示例：

// hello组件
const Hello = function (props) {
  return <h1>Hello, world!{props.name}</h1>;
};

// react渲染
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    {
      <>
        <Hello name="zhangsan" />
      </>
    }
  </React.StrictMode>
);

在该例子中，hello 组件会根据 props.name 获取到输入的 prop 值。