React演练场，在线编辑，实时预览、在线运行。

index.html

style.css

tsx

main.tsx

tsx

app.tsx

package.json

README.md

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12

            
            <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React App</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>

style.css

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

            
            body {
  padding: 0;
  margin: 0;
  background-color: #fefefe;
  text-align: center;
}
.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

h1 {
  font-family: Inter, sans-serif;
}

i {
  color: #777;
}

main.tsx

            
                1
2
3
4
5
6
7
8
9

            
            import { createRoot } from "react-dom/client"
import App from "./app.tsx"

const root = createRoot(document.getElementById("root"))
root.render(<App />)

console.log(["Hello 笔.COOL 控制台"])

app.tsx

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

            
            import { type MouseEvent } from "react"
import confetti from "canvas-confetti"

const App = () => {
  function onMouseMove(e: MouseEvent) {
    confetti({
      particleCount: 5,
      origin: {
        x: e.pageX / window.innerWidth,
        y: (e.pageY + 20) / window.innerHeight,
      }
    })
  }

  return (
    <div className="main" onMouseMove={onMouseMove}>
      <h1>Hello 笔.COOL</h1>
      <p><i>一笔一划，绘就人生；一码一境，酷创未来。</i></p>

      <img width="48" height="48"src="https://bi.cool/static/case-materials/icons/react.svg"/>
    </div>
  )
}

export default App

package.json

注意：新添加的依赖包首次加载可能会报错，稍后再次刷新即可

            
                1
2
3
4
5
6
7

            
            {
  "dependencies": {
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "canvas-confetti": "1.9.3"
  }
}

README.md

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

            
            # React TypeScript 项目模板

笔COOL提供的基础 React 项目

## 用途

- 适合想要简单练习 React

## 文件

- **index.html**: 网页入口文件（笔COOL目前会编译并运行 index.html 以及它所引用的文件）
    - 内容包含 React 实例所挂载的 root 节点 `<div id="root"></div>`
- **main.tsx**: React 主入口文件，负责初始化 React 实例，通过 `index.html` 引入
- **style.css**: 全局样式文件，通过 `main.tsx` 引入
- **app.tsx**: App 组件
- **package.json**: npm 包管理文件，你可以继续添加其他依赖包 **【注意：首次引入新依赖可能会报错，稍后再次刷新即可】**
    
    - 目前已引入了三个包：

        - `"react": "18.3.1"`
        - `"react-dom": "18.3.1"`
        - `"canvas-confetti": "1.9.3"` 彩色纸屑特效

## 内容

- 标题 "Hello 笔.COOL"，副标题 "一笔一划，绘就人生；一码一境，酷创未来。"，一个 React 图标，移动鼠标会有彩色纸屑飞舞效果
- 控制台输出 `["Hello 笔.COOL 控制台"]`，用于展示控制台能力

## 使用

- 首页点击 **创建项目**，选择 **新建 React TypeScript 项目** 即可使用该模板

- 或访问 https://bi.cool/project?template=react_18_ts 即可快速进入此模板

预览

控制台

清空