[英]How do I create a number guessing game using javascript and react?
所以,我需要创建一个包含 2 个视图的 React Web 应用程序,其中一个是一个简单的猜数字游戏。 我在我的计算机上安装了 npx 并创建了一个包含所有默认文件(app.js、index.js 等)的 react 应用程序,但是,我不知道如何在没有 html 文件的情况下进行编码。
我得到了一些这样的代码
索引.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link re="stylesheet" href="App.css">
<title>Document</title>
</head>
<body>
<div id="container">
<p>Guess a number between 1 - 100.</p>
<p id="outputtext">Enter a number below</p>
<input type= "text" id="userInput"><button id="btn">Enter</button>
</div>
<script src="App.js"></script>
</body>
</html>
样式文件
background-color: #0E2431;
border: 5px solid #F5E4C3;
height: 275px;
width: 750px;
margin: auto;
text-align: center;
}
p{
color: white;
font-size: 24px;
}
#input {
width: 100px;
margin: 25px auto;
}
#btn {
margin: 25px auto auto 5px;
}```
game.js
``` let btn = document.getElementById('btn');
let output = document.getElementById('outputtext');
let number = [Math.floor(Math.random()*100)]
btn.addEventListener('click', function(){
let input = document.getElementById('userInput').value;
if (input == number){
output.innerHTML = 'You guessed right, your number was ${number}'
} else if (input < number){
output.innerHTML = "You guessed too low!"
};
if (input > number){
output.innerHTML = "You guessed too high!"
}
});```
But i don't know how i am able to recreate this in react, as there is no html file. Need help with this!
在 ReactJs 中,我们使用一种类似于 HTML 的语法,称为 JSX。 在 JSX 中,您与 HTML 有一些区别,但它们很小。
您必须将 jsx 代码包装在父组件中(如 div)
在 App.js 文件中,您声明一个将作为组件的类:
//in App.js
import React from 'react'
import './style.css'
class App extends React.Component{
constructor(props){
super(props) //overrides the default props
this.state = {
number: 0,
output: "Enter a number below",
input: "",
}//the so-called state is just all the variables you document needs
}
//Here is your game.js logic
game = () => {
this.setState({number: Math.floor(Math.random()*100)})
if (input == number){
this.setState({output:String('You guessed right, your number was ${number}')})
}
else if (input < number){
this.setState({output: "You guessed too low!"})
}
if (input > number){
this.setState({output: "You guessed too high!"})
}
}
handleChange = event => {
this.setState({[event.target.name]: event.target.value})
}
render(){
return(
<div>
<p>Guess a number between 1 - 100.</p>
<p id="outputtext" value = {this.state.output} name = "output">{this.state.output}</p>
<input type= "text" id="userInput" name = "input" onChange = {this.handleChange} value = {this.state.input}>
<button id="btn" onClick = {this.game}>Enter</button>
</div>
)
}
}
export default App;
如您所见,构建和逻辑都集中在一个地方,从而可以轻松地在您的应用程序中实现逻辑。 您可以将样式添加到 style.css 文件中,然后像我一样导入它。 只需为您的标签提供一个className
即可在 css 中访问它们。 我希望我能帮助你。 如果您有任何其他问题,请回复:)
如您所见,在 jsx 中引用函数时不需要花括号。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.