你的第一个 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()函数首先会渲染一个<p>元素，并将代码开头定义的color变量赋值为这个<p>元素的color属性，同时将object变量赋值为这个元素的内容。
- 接下来，“render()”函数将渲染“更改颜色”按钮，该按钮的 onClick 事件将触发“changeColor”函数，从而改变“color”变量，进而改变先前渲染的 <p> 元素的颜色。
- 最后，“render()”函数会类似地渲染“Change object”按钮，该按钮的onClick事件会触发“changeObject”函数，从而改变“object”变量，进而改变之前渲染的<p>元素所显示的对象。
此时，您的代码应如下所示：
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 服务器，您应该就能看到您的网页了。
现在，如果您点击按钮，您将看到它们会改变所显示的 < p > 元素的颜色，以及 < p > 元素所显示的对象。
恭喜！你已经构建了你的第一个 React 项目！
如果您在使用代码时遇到问题，请发表评论，我会看看如何解决。