快来退出咱们吧！

"小和山的菜鸟们"，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 ( 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我的项目！