一个简单的react界面例子，单网页的
编辑时间：2021-10-13
作者：金满斗
浏览量：1490
来源：原创
在这个网站https://chinese.freecodecamp.org/学着玩，发现还有一些不懂得。
搞个简单的完整例子吧。
哎。本来是想儿子学的，也不晓得我学这个有啥用，哈哈哈，有始有终吧。react应该也是编译在部署吧，不然这样相当于直接发布源码，有点亏哦。
说实话，uniapp就够用了，主要我不需要专业。
这个例子涵盖的知识点有事件绑定啊，props传输啊，style绑定啊之类吧。
就是玩。
说实话3个js拉下来，整个react框架也不小了。我喜欢小巧的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<title>react简单完成例子</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const inputStyle = {width: 235, height:30, margin: 5};
class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
messages: []
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
submitMessage() {
this.setState((state) => {
const currentMessage = state.input;
return (currentMessage!='') && {
input: '',
messages: state.messages.concat(currentMessage)
};
});
}
handleKeyPress(event) {
if (event.keyCode === 13) {
this.submitMessage();
}
}
// 添加事件监听器
componentDidMount() {
document.addEventListener("keydown", this.handleKeyPress);
}
//移除
componentWillUnmount() {
document.removeEventListener("keydown", this.handleKeyPress);
}
render() {
return (
<div>
<h2>react的简单完整例子</h2>
<h3>这里记录输入:按钮提交或者回车均可</h3>
<input
value={this.state.input}
onChange={this.handleChange} style={inputStyle} /><br/>
<button onClick={this.submitMessage}>提交</button>
<ul>
{this.state.messages.map( (message, idx) => {
return (
<li key={idx}>{message}</li>
)
})
}
</ul>
</div>
);
}
};
ReactDOM.render(
React.createElement(Presentational),
document.getElementById('root')
);
</script>
</body>
</html>
这个只是做演示，当然真实的不会这样，看了下网站，有个jsx的自动监听编译环境。在src文件夹里写jsx，能自动监听并直接编译成js
将 JSX 添加到项目
将 JSX 添加到项目中并不需要诸如打包工具或开发服务器那样复杂的工具。本质上，添加 JSX 就像添加 CSS 预处理器一样。唯一的要求是你在计算机上安装了 Node.js。
在终端上跳转到你的项目文件夹，然后粘贴这两个命令：
- 步骤 1： 执行 npm init -y （如果失败，这是修复办法）
- 步骤 2： 执行 npm install babel-cli@6 babel-preset-react-app@3
-
创建一个名为 src 的文件夹并执行这个终端命令：npx babel --watch src --out-dir . --presets react-app/prod
这样的话，上面的例子把那段jsx提取出来，放到src文件夹改名为1.js，会自动在本地生成一个1.js。刚才的例子可以改成这样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<title>react简单完成例子</title>
</head>
<body>
<div id="root"></div>
<script src="./1.js"></script>
</body>
</html>
好用记账软件、聚宝盆记账易
热文排行
最近分享
拼多多优惠卷合集
