Come and join us!

“The Newbies of Little Wo Shan” provides front-end developers with technical information and a series of basic articles. For a better user experience, please go to xhs-rookies.com/ to learn the latest articles.

“Code Tailor “, if you are interested in our article, or would like to make some suggestions, please follow the official account of “Rookie of Xiaohe Mountain” on wechat and contact us. You can also view our article on wechat. Every suggestion or approval is a great encouragement to us!

Actual combat case (1) : Message function

We have learned that we can use HTML code to create a simple message page.

Simple presentation:

Create an HTML file and import the React dependency

Now you can use React and write code using JSX

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Message function HTML version</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>
Copy the code

Create a class called App

  • createclass 类
class App extends React.Component {
  // Class internal contents
}
Copy the code
  • Create a constructorconstructor
constructor() {
  super(a);this.state = {
    message: "Did you know there was such a group? They have a dream, hard work, as a group of college students rookie, gave up the usual entertainment time, choose to learn together, grow together, the usual learning notes, summed up into the article, the purpose is very simple, I hope to help the rookie like them? Would you like to know more? Quick search wechat official account: newbies of Xiaohe Mountain, join them!".evaluateList: [{imgUrl: "https://xhs-rookies.com/img/rookie-icon.png".nickName: "Rookie One.".sendTime: "2021.05.14".evaluate: "This is a team that's coming up with a series of articles. Let's look forward to their work!"],},inputMess: ""}; }Copy the code
  • writerenderfunction
render() {
  return (
    <div className="root">
      <div className="title">Hello React</div>
      <p className="content">{this.state.message}</p>
      <div className="evaluateBox">
        <div className="titleText">Comments from everyone</div>{/ * traverse the message list * /} {this. State. EvaluateList. The 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>{/* Message input box */}<div className="sendEvaluate">
        <img
          className="headImg"
          src="https://xhs-rookies.com/img/rookie-icon.png"
          />
        <div className="inputBox">
          <textarea
            className="inputText"
            placeholder="Please enter comments..."
            value={this.state.inputMess}
            onChange={(e)= > this.getEvaluate(e)}
            />
          <div className="sendSubmit" onClick={()= >Enclosing sendSubmit ()} ></div>
        </div>
      </div>
    </div>
  );
}
Copy the code
  • Other click event functions
        // Get input
        getEvaluate(e) {
          console.log(e.target.value);
          this.setState({
            inputMess: e.target.value,
          });
        }
        // Send a message and clear the input box
        sendSubmit() {
          let data = [
            {
              imgUrl: "https://xhs-rookies.com/img/rookie-icon.png".nickName: "Rookie One.".sendTime: "2021.05.14".evaluate: this.state.inputMess,
            },
          ];
          this.setState({
            // Insert old data and new data into the message list
            evaluateList: [...data, ...this.state.evaluateList],
            inputMess: ""}); }}Copy the code
  • Load the app
ReactDOM.render(<App />.document.getElementById('app'))
Copy the code

The source address

Github address of the project

Next day forecast

In the next section, we will introduce you to React scaffolding and quickly build a React project using scaffolding!