React 实践

1. 实现一个支持受控与非受控的组件。

import { useState } from 'react';

function NumberInput() {
  const [value, setValue] = useState('');
  const handleChange = (event) => { // 输入 event
    setValue(event.target.value);
  };
  return (
    <>
      <p>Input Value: { value }</p>
      <input value={value} onChange={handleChange} /> 
    </>
  );
}

2. 计数器：实现一个可以自增的组件。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
      setCount(count + 1);
  }
  return (
      <button onClick={handleClick}>
          You clicked {count} times
      </button>
  );
}

3. 实现一个 modal 弹窗组件

   考察点：基本的组件知识，css 布局知识，滚动穿透。

4. 首单享受<highLight>50</highLight>元福利 转换成 首单享受<span class="highLight">50</span>元福利。