共计 2538 个字符，预计需要花费 7 分钟才能阅读完成。
快来退出咱们吧！
“ 小和山的菜鸟们 ”，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (https://xhs-rookies.com/) 进行学习，及时获取最新文章。
“Code tailor”，如果您对咱们文章感兴趣、或是想提一些倡议，微信关注 “小和山的菜鸟们” 公众号，与咱们取的分割，您也能够在微信上观看咱们的文章。每一个倡议或是同意都是对咱们极大的激励！
实战案例(一)：留言性能
咱们学到这里，就能够简略的应用 HTML 的代码实现一个简略的留言页面。
简略展现：
创立 HTML 文件而后导入 React 依赖
这样就能够应用 React 了，应用 jsx 编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> 留言性能 HTML 版 </title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// write class here
</script>
</body>
</html>创立名为 App 的 class 类
- 创立
class类
class App extends React.Component {// class 外部内容}- 创立构造函数
constructor
constructor() {super();
this.state = {
message: "你晓得有这么一个团队吗？他们怀揣幻想，艰苦奋斗，作为一群大学生菜鸟，放弃了平时娱乐的工夫，抉择一起学习，一起成长，将平时学习的笔记，心得总结为文章，目标很简略，心愿能够帮忙向他们一样的菜鸟们？你想理解更多吗？快搜寻微信公众号：小和山的菜鸟们，退出他们吧！",
evaluateList:
[
{
imgUrl: "https://xhs-rookies.com/img/rookie-icon.png",
nickName: "菜鸟一号",
sendTime: "2021.05.14",
evaluate: "这是一个行将推出系列文章的团队，咱们一起期待他们的作品吧！",
},
],
inputMess: "",
};
}- 编写
render函数
render() {
return (
<div className="root">
<div className="title">Hello React</div>
<p className="content">{this.state.message}</p>
<div className="evaluateBox">
<div className="titleText"> 大伙的评论 </div>
{/* 遍历留言列表 */}
{this.state.evaluateList.map((item) => {
return (
<div className="evaluateItem">
<img className="headImg" src={item.imgUrl} />
<div className="senderProfile">
<div className="nickNameBox">
<div className="nickName">{item.nickName}</div>
<div className="sendTime">{item.sendTime}</div>
</div>
<div className="evaluate">{item.evaluate}</div>
</div>
</div>
);
})}
</div>
{/* 留言输入框 */}
<div className="sendEvaluate">
<img
className="headImg"
src="https://xhs-rookies.com/img/rookie-icon.png"
/>
<div className="inputBox">
<textarea
className="inputText"
placeholder="请输出评论..."
value={this.state.inputMess}
onChange={(e) => this.getEvaluate(e)}
/>
<div className="sendSubmit" onClick={() => this.sendSubmit()}>
发表
</div>
</div>
</div>
</div>
);
}- 其余点击事件函数
// 获取输出内容
getEvaluate(e) {console.log(e.target.value);
this.setState({inputMess: e.target.value,});
}
// 发送留言并清空输入框
sendSubmit() {
let data = [
{
imgUrl: "https://xhs-rookies.com/img/rookie-icon.png",
nickName: "菜鸟一号",
sendTime: "2021.05.14",
evaluate: this.state.inputMess,
},
];
this.setState({
// 将原数据和新数据插入 留言列表
evaluateList: [...data, ...this.state.evaluateList],
inputMess: "",
});
}
}- 加载 app
ReactDOM.render(<App />, document.getElementById('app'))源码地址
我的项目 github 地址
下节预报
在这一节咱们将之前学习的常识串联起来做了一个实战小 Demo，坚固了大家的常识，在下一节中，咱们将给大家介绍React 的脚手架常识，应用脚手架疾速搭建一个 React 我的项目！
正文完