text React和JSX入门

Posted 2021-04-29

Getting Started with React and JSX
----------------------------------
This is a demo accompanying an article on the React view system and JSX templating language.

URL: http://www.sitepoint.com/getting-started-react-jsx/

A [Pen](https://codepen.io/SitePoint/pen/bpaxvJ) by [SitePoint](https://codepen.io/SitePoint) on [CodePen](https://codepen.io).

[License](https://codepen.io/SitePoint/pen/bpaxvJ/license).

<div id="greeting-div"></div>

var RandomMessage = React.createClass({
  getInitialState: function() {
    return { message: 'Hello, Universe' };
  },
  onClick: function() {
    var messages = ['Hello, World', 'Hello, Planet', 'Hello, Universe'];
    var randomMessage = messages[Math.floor((Math.random() * 3))];

    this.setState({ message: randomMessage });
  },
  render: function() {
    return (
      <div>
        <MessageView message={ this.state.message }/>
        <p><input type="button" onClick={ this.onClick } value="Change Message"/></p>
      </div>
    );
  }
});

var MessageView = React.createClass({
  render: function() {
    return (
      <p>{ this.props.message }</p>
    );
  }
});

ReactDOM.render(
  <RandomMessage />,
  document.getElementById('greeting-div')
);

<script src="https://fb.me/react-15.0.0.js"></script>
<script src="https://fb.me/react-dom-15.0.0.js"></script>