ReAct 入门常用语法

来源：互联网发布：淘宝桔子表行靠谱不编辑：程序博客网时间：2024/06/05 17:11

<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>

0 0