作为业余爱好者，我喜欢能弥合音乐与技术之间差距的编程项目。 声音矩阵是一系列方块，如果启用，将在节拍循环中播放声音。 让我们使用React构建一个！
首先，我们将依靠create-react-app 。 如果尚未安装，请运行：
npm install -g create-react-app
这将在全局安装create-react-app ，这是一个工具，可协助React项目的初始配置。 使用下面的命令创建一个新的应用程序并cd到新目录。
创建反应应用声音矩阵--use-npm
cd声音矩阵
家政
Create-react-app非常方便，但提供了创建声矩阵所需的更多功能。 删除src目录的内容，并创建一个新的空白index.js文件。
rm -f src / * &&触摸src / index.js
对于样式，我们将使用Bootstrap CSS。 可以在此处找到Bootstrap的CDN链接，并将其添加到public / index.html的标题中。
要确认整理工作已成功完成，请将以下内容添加到src / index.js中 。 这仅输出一个Hello World按钮，但确保React正确构建并应用Bootstrap样式。
在React中，大多数交互是由状态驱动的。 当状态改变时，React再次渲染以显示更新。 考虑以下：
有状态的组件（如上面的示例）将状态包含在组件的范围内，并根据需要修改状态。
另一方面， 无状态组件希望通过props提供只读值。 道具通常包含要显示的数据或对处理操作（例如单击）的功能的引用。
对于我们的Sound Matrix，状态将存在于有状态的 SoundMatrix组件中。 但是， 无状态 SoundSquare组件将用于仅显示通过道具传递的当前状态版本。
由于无状态 组件仅依靠通过道具获得的值，它们的构造可以轻便。 以下是SoundSquare函数组件，应将其添加到现有SoundMatrix组件之外的src / index.js中 。 这将根据提供的道具渲染一个风格化的正方形。
现在，正方形可以渲染了，让我们通过包含状态使它们动态化。 使用以下代码将构造函数添加到SoundMatrix 。
尽管状态中现在存在方形细节，但当前未渲染状态。
下面是一对在行中建立正方形的递归函数。 rowBuilder生成行并调用squareBuilder来构建正方形。 在squareBuilder中，使用必要的道具创建SoundSquare组件。
这两个函数应在构造函数之后和渲染之前添加到SoundMatrix组件中。
现在正在渲染正方形，但是单击时不会发生任何动作。
由squareBuilder创建SoundSquare组件时，将包含this.handleClick的handleClick道具。 但是，由于SoundMatrix中尚不存在this.handleClick ，因此SoundSquare中的props.handleClick是未定义的 。 定义this.handleClick之后 ， SoundSquare将知道如何处理点击动作。
另外，取消注释SoundMatrix的构造函数中的this.handleClick行。 这样做可以绑定此范围，从而允许handleClick函数正确引用状态。
为了增加声音矩阵的生命，我们需要一个不断重复的节拍。
下面， togglePlaying函数确定是否启用了播放。 如果是这样，则会创建一个间隔，并且拍子会无限循环，在适用时增加或重置。 如果不是，则清除间隔并重设节拍。
应该在构造函数之后和渲染之前将其添加到SoundMatrix组件。 this.togglePlaying行也应取消注释。
最后一步是连接声音。
此演示中使用的声音可以在此处找到。 下载后，将它们保存到您的src /文件夹中，并通过在React导入后将以下内容添加到index.js文件的顶部来导入它们。
如果您的矩阵有问题，请追溯本指南中的步骤，检查React错误，或者在我的GitHub上查看完整的源代码。
希望您喜欢构建Sound Matrix，并在此过程中进一步了解了React。
喜欢这些帖子吗？ 在Twitter上关注我@ andepaulj
