将 vanilla JavaScript 翻译成 React 组件

Question

im试图理解如何将一个非常简单的javascript程序翻译成ReactJS。我有限的前端经验是使用 React，其中的东西被包装在组件或函数中以渲染输出。

这个简单的程序有 3 个组件，我想将它们放入 React 类或函数中：

1、一个用于音符音高的 JavaScript 对象。

TWINKLE_TWINKLE = {
notes: [
{pitch: 60, startTime: 0.0, endTime: 0.5},
{pitch: 60, startTime: 0.5, endTime: 1.0},
... 
],
totalTime: 5
};

2、导入，可输出备注：

player = new mm.Player();

3、流道，哪个应该输出它们。

player.start(TWINKLE_TWINKLE);
player.stop();

我想将其包装在一个反应类中，然后我可以导出。我知道这可能是一个非常简单的问题，但理解起来会很有帮助。

Answer 1

首先，安装正确的依赖项：

npm install @magenta/music

然后，在React代码中执行以下操作：

import React from "react";
import * as mm from "@magenta/music/es6";
class App extends React.Component {
constructor(props) {
super(props);
this.TWINKLE_TWINKLE = {
notes: [
{ pitch: 60, startTime: 0.0, endTime: 0.5 },
{ pitch: 60, startTime: 0.5, endTime: 1.0 },
{ pitch: 67, startTime: 1.0, endTime: 1.5 },
{ pitch: 67, startTime: 1.5, endTime: 2.0 },
{ pitch: 69, startTime: 2.0, endTime: 2.5 },
{ pitch: 69, startTime: 2.5, endTime: 3.0 },
{ pitch: 67, startTime: 3.0, endTime: 4.0 },
{ pitch: 65, startTime: 4.0, endTime: 4.5 },
{ pitch: 65, startTime: 4.5, endTime: 5.0 },
{ pitch: 64, startTime: 5.0, endTime: 5.5 },
{ pitch: 64, startTime: 5.5, endTime: 6.0 },
{ pitch: 62, startTime: 6.0, endTime: 6.5 },
{ pitch: 62, startTime: 6.5, endTime: 7.0 },
{ pitch: 60, startTime: 7.0, endTime: 8.0 },
],
totalTime: 8,
};
this.player = new mm.Player();
}
play = () => {
if (this.player.isPlaying()) {
return;
}
this.player.start(this.TWINKLE_TWINKLE);
};
render() {
return (
<div>
<button type="button" onClick={this.play}>
Play!
</button>
</div>
);
}
}