你的第一个 React 项目

如果您正在考虑使用 React 但不知道从哪里开始，那么您来对地方了！

首先，对于那些不熟悉 React 功能的人来说，这里有一个简短的描述：

React 是一个用于构建用户界面的灵活的 JavaScript 库。
它允许您使用称为“组件”的小型独立代码片段来组成复杂的 UI。
它非常适合构建交互式网页。

让我们开始吧！

首先，您需要通过运行以下命令来创建构建 React 应用程序的环境：

npx create-react-app react-project

您将看到此命令将创建一个名为“react-project”的文件夹：

要启动要在其上开发 React 项目的本地服务器，请在“react-project”中打开一个终端窗口，然后运行npm start。
然后，您将被重定向到本地服务器，并显示启动 React 网页：

接下来，您将创建自己的反应项目！

首先，转到 /src/index.js 并删除除前两行之外的所有内容，以便 index.js 文件中只剩下以下代码行：

import React from 'react';
import ReactDOM from 'react-dom';

接下来，您将创建一个名为“Car”的反应组件，其中将包含我们的主要代码：

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      object: "Car",
      color: "red"
    };

  }
}

该组件将包含“对象”和“颜色”变量，用户将通过您的反应网页进行更改。

接下来，您要将这两个函数放入 Car 组件中：

  changeColor = () => {
    var col = ["blue", "turquoise", "purple", "green", "pink", "brown", "red", "orange"]
    var rand = Math.floor(Math.random() * 8 + 0);
    this.setState({color: col[rand]});
  }
  changeObject = () => {
    var ob = ["car", "phone", "table", "bike", "chair", "computer", "coat", "guitar"]
    var rand2 = Math.floor(Math.random() * 8 + 0);
    this.setState({object: ob[rand2]});
  }

让我解释一下：

“changeColor”函数将：

创建一个颜色数组，以便让用户更改“颜色”变量。
创建一个介于 0 到 8 之间的随机整数。
使用之前生成的随机整数从数组中随机选取一种颜色来重置“颜色”变量的值。

“changeObject”函数类似地：

创建一个对象数组，以便让用户更改“对象”变量。
创建一个介于 0 到 8 之间的随机整数。
使用之前生成的随机整数从数组中随机选择一个对象来重置“对象”变量的值。

接下来，您将显示 html 并使用“render()”函数实现我们之前讨论过的功能：

  render() {
    return (
      <div>
      <p style={{color: this.state.color}}>
      {this.state.object}
      </p>
      <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
        <button
          type="button"
          onClick={this.changeObject}
      >Change object</button>
      </div>
    );
  }

让我解释一下

render()函数首先会渲染一个元素，并将代码开头定义的color变量赋值为这个元素的color属性，同时将object变量赋值为这个元素的内容。
接下来，“render()”函数将渲染“更改颜色”按钮，该按钮的 onClick 事件将触发“changeColor”函数，从而改变“color”变量，进而改变先前渲染的 元素的颜色。
最后，“render()”函数会类似地渲染“Change object”按钮，该按钮的onClick事件会触发“changeObject”函数，从而改变“object”变量，进而改变之前渲染的元素所显示的对象。

此时，您的代码应如下所示：

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  constructor(props) {
    super(props);
    var timestamp = Date.now();
    this.state = {
      brand: "Ford",
      object: "Mustang",
      time: timestamp,
      year: 1964
    };

  }

  changeColor = () => {
    var col = ["blue", "turquoise", "purple", "green", "pink", "brown", "red", "orange"]
    var rand = Math.floor(Math.random() * 8 + 0);
    this.setState({color: col[rand]});
  }
  changeObject = () => {
    var ob = ["car", "phone", "table", "bike", "chair", "computer", "coat", "guitar"]
    var rand2 = Math.floor(Math.random() * 8 + 0);
    this.setState({object: ob[rand2]});
  }
  render() {
    return (
      <div>
      <p style={{color: this.state.color}}>
      {this.state.object}
      </p>
      <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
        <button
          type="button"
          onClick={this.changeObject}
      >Change object</button>
      </div>
    );
  }
}

在最终测试代码之前，请将以下代码行添加到文件末尾：

ReactDOM.render(<Car />, document.getElementById('root'));

这将呈现您所编写的代码。

现在，如果您刷新 React 服务器，您应该就能看到您的网页了。
现在，如果您点击按钮，您将看到它们会改变所显示的 元素的颜色，以及 元素所显示的对象。

恭喜！你已经构建了你的第一个 React 项目！

如果您在使用代码时遇到问题，请发表评论，我会看看如何解决。

再见👋

鏂囩珷鏉ユ簮锛�https://dev.to/code_jedi/your-first-react-project-206n