ReAct 入门常用语法

<body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello,world!</h1>,document.getElementById('example')
      );
    </script>
  </body>

<body>
    <div id="example"></div>
    <script type="text/babel">
      var names = ['Alice','Emily','Kate'];

      ReactDOM.render(
        <div>
        {
          names.map(function (name) {
            return <div>Hello,{name}!</div>
          })
        }
        </div>,document.getElementById('example')
      );
    </script>
  </body>

 <body>
    <div id="example"></div>
    <script type="text/babel">
      var arr = [
        <h1>Hello world!</h1>,<h2>React is awesome</h2>,];
      ReactDOM.render(
        <div>{arr}</div>,document.getElementById('example')
      );
    </script>
  </body>

 <body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });

      ReactDOM.render(
        <HelloMessage name="John" />,document.getElementById('example')
      );
    </script>
  </body>

<body>
    <script type="text/babel">
      var NotesList = React.createClass({
        render: function() {
          return (
            <ol>
              {
                this.props.children.map(function (child) {
                  return <li>{child}</li>
                })
              }
            </ol>
          );
        }
      });

      ReactDOM.render(
        <NotesList>
          <span>hello</span>
          <span>world</span>
        </NotesList>,document.body
      );
    </script>
  </body>

<body>
    <script type="text/babel">

      var data = 123;

      var MyTitle = React.createClass({
        propTypes: {
          title: React.PropTypes.string.isrequired,},render: function() {
          return <h1> {this.props.title} </h1>;
        }
      });

      ReactDOM.render(
        <MyTitle title={data} />,document.body
      );

    </script>
  </body>

<body>
    <div id="example"></div>
    <script type="text/babel">

var MyComponent = React.createClass({
  handleClick: function() {
    ReactDOM.findDOMNode(this.refs.myTextInput).focus(); alert(ReactDOM.findDOMNode(this.refs.myTextInput).value);
	
  },render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,document.getElementById('example')
);
    </script>
  </body>

<body>
    <div id="example"></div>
    <script type="text/babel">
var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,document.getElementById('example')
);
    </script>
  </body>

<body>
    <script type="text/babel">
      var Input = React.createClass({
        getInitialState: function() {
          return {value: 'Hello!'};
        },handleChange: function(event) {
          this.setState({value: event.target.value});
        },render: function () {
          var value = this.state.value;
          return (
            <div>
              <input type="text" value={value} onChange={this.handleChange} />
              <p>{value}</p>
            </div>
          );
        }
      });

      ReactDOM.render(<Input/>,document.body);
    </script>
  </body>

 <body>
    <script type="text/babel">
      var Hello = React.createClass({
        getInitialState: function () {
          return {
            opacity: 1.0
          };
        },componentDidMount: function () {
          this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
              opacity = 1.0;
            }
            this.setState({
              opacity: opacity
            });
          }.bind(this),100);
        },render: function () {
          return (
            <div style={{opacity: this.state.opacity}}>
              Hello {this.props.name}
            </div>
          );
        }
      });

      ReactDOM.render(
        <Hello name="world"/>,document.body
      );
    </script>
  </body>

<body>
    <script type="text/babel">
var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',lastGistUrl: ''
    };
  },componentDidMount: function() {
    $.get(this.props.source,function(result) {
      var lastGist = result[0];
      if (this.isMounted()) {
        this.setState({
          username: lastGist.owner.login,lastGistUrl: lastGist.html_url
        });
      }
    }.bind(this));
  },render: function() {
    return (
      <div>
        {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,document.body
);
    </script>
  </body>

ReAct 入门常用语法

猜你在找的React相关文章