问题

Here's the translated content:

<h3>如何在 CodePen 中使用 React 函数？</h3>

我在 CodePen 中编写了一个 React 函数来测试 React hooks，但它不断报错：`Uncaught ReferenceError: require is not defined.`


**我的代码：**

```javascript
import {useState, useEffect, useRef } from 'react';

function Test() {
  const [count, setCount] = useState(0);
  const prevRef = useRef();
  
  useEffect(() => {
    // const ref = useRef();
    console.log('ref----', prevRef.current);
    prevRef.current = count;
  })
  
  return (
    <div>
      <div onClick={() => setCount(count+1)}>+1</div>
      <div>{`count: ${count}`}</div>
      <div>{`precount: ${prevRef.current}`}</div>
    </div>
  )
}

ReactDOM.render(<Test />, document.getElementById("app"));

<details>
<summary>英文:</summary>

&lt;h3&gt;How to use React functions in CodePen?&lt;/h3&gt;

I wrote a react function in CodePem to test React hooks, however it constantly keeps reporting errors: `Uncaught ReferenceError: require is not defined.`


**My Code:**

import {useState, useEffect,useRef } from 'react';

function Test() {
const [count, setCount] = useState(0);
const prevRef = useRef();

useEffect(() => {
// const ref = useRef();
console.log('ref----', prevRef.current);
prevRef.current = count;
})

return (
<div>
<div onClick={() => setCount(count+1)}>+1</div>
<div>{count: ${count}}</div>
<div>{precount: ${prevRef.current}}</div>
</div>
)
}

ReactDOM.render(<Test />, document.getElementById("app"));

</details>


# 答案1
**得分**: 0

你可以通过调整你的 Pen 中的设置来添加一个包。

请参考下面的图片：

[![在这里输入图片描述][1]][1]

通过这样做，它将自动生成必要的导入语句：

```jsx
import React, { useState, useEffect, useRef } from 'https://esm.sh/react@18.2.0';
import ReactDOM from 'https://esm.sh/react-dom@18.2.0';

为了帮助你理解这个过程，我已经在 CodePen 上创建了一个示例代码。你可以参考这个示例来自己实现它。

这里是示例代码的 CodePen 链接：https://codepen.io/camel2243/pen/ExdBRar

import React, { useState, useEffect, useRef } from 'https://esm.sh/react@18.2.0';
import ReactDOM from 'https://esm.sh/react-dom@18.2.0';