如何使用 ReactJS 创建掷骰子应用程序？

ReactJS 是一种非常流行的 JavaScript 框架，它可以用于创建 Web 应用程序、单页面应用程序和移动应用程序。在本教程中，我们将使用 ReactJS 来创建一个简单的掷骰子应用程序。

准备工作

在开始之前，您需要确保已经安装了 Node.js 环境。如果尚未安装，请访问 https://nodejs.org/ 下载并安装。

安装 Node.js 后，您可以使用以下命令检查版本：

node -v

使用 Create React App 创建项目

ReactJS 社区提供了一个名为 Create React App 的脚手架工具，它使得创建和启动 React 应用程序变得非常容易。在本教程中，我们将使用 Create React App 来创建掷骰子应用程序。

以如下命令创建一个新的掷骰子应用程序：

npx create-react-app dice-roller

此命令会创建名为 dice-roller 的新项目，在项目目录中运行以下命令，以启动本地开发服务器并在浏览器中查看应用程序：

cd dice-roller
npm start

打开浏览器，访问 http://localhost:3000/ ，您应该能看到类似如下界面：

现在，我们已经成功地创建了一个基本的 React 应用程序。

设置应用程序布局

在我们开始编写掷骰子的代码之前，我们需要设置应用程序的布局。在本教程中，我们将创建一个简单的布局，其中有一个标题和一个按钮，当用户点击按钮时，将显示随机的点数。

打开 App.js 文件，并将内容替换为以下内容：

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <div className="App">
        <h1>掷骰子应用程序</h1>
        <button>掷骰子</button>
        <p>{this.state.value}</p>
      </div>
    )
  }
}

export default App;

在上面的代码中，我们将 App 组件转换为一个类组件，并提供一个状态对象，用于存储骰子点数。我们还在页面上添加了一个按钮，当用户点击按钮时，将会更新点数值。

请注意，在 JSX 代码中使用样式表和 HTML 元素的属性与普通 HTML 非常相似。

实现掷骰子功能

接下来，我们将编写代码来模拟掷骰子，并将随机数字显示在屏幕上。

在 App 组件中添加以下方法：

  rollDice() {
    const value = Math.floor(Math.random() * 6) + 1;
    this.setState({ value });
  }

在上面的代码中，我们使用 Math.random() 方法生成从0到1之间的随机数，并将其乘以6以将其范围转换为0到6。然后，我们使用 Math.floor() 方法将结果向下取整为整数，并添加1以创建一个1到6的数字。最后，我们使用 setState() 方法将点数更新为新值。

现在，我们需要将 rollDice() 方法绑定到按钮的单击事件。将以下代码添加到按钮元素：

<button onClick={() => this.rollDice()}>

在点击按钮时，将调用 rollDice() 方法并更新屏幕上的点数。

最后，我们需要为应用程序添加一些样式。打开 App.css 文件，并将内容替换为以下内容：

.App {
  text-align: center;
  margin-top: 50px;
}

button {
  font-size: 1.5em;
  margin-top: 20px;
  padding: 10px;
  cursor: pointer;
  background-color: #1abc9c;
  color: white;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #148f77;
}

在上面的 CSS 代码中，我们定义了应用程序的布局和样式，并使用 CSS 3 中的 hover 伪类来添加按钮的悬停效果。

最后，我们已经完成了掷骰子应用的开发。您可以在本地计算机中查看结果，也可以将代码部署到实际的 Web 服务器上，以与世界分享您的应用。

完整代码

以下是完整的掷骰子应用的代码：

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  rollDice() {
    const value = Math.floor(Math.random() * 6) + 1;
    this.setState({ value });
  }

  render() {
    return (
      <div className="App">
        <h1>掷骰子应用程序</h1>
        <button onClick={() => this.rollDice()}>掷骰子</button>
        <p>{this.state.value}</p>
      </div>
    )
  }
}

export default App;

.App {
  text-align: center;
  margin-top: 50px;
}

button {
  font-size: 1.5em;
  margin-top: 20px;
  padding: 10px;
  cursor: pointer;
  background-color: #1abc9c;
  color: white;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #148f77;
}