heinetz: react, node, angular ...

Beitrag lesen

SELF-Forum

react, node, angular ...

heinetz
– Informationen zu den Bewertungsregeln

Hallo Forum,

Ein älteres React Tutorial (von jQuery nach React):

http://chibicode.com/react-js-introduction-for-people-who-know-just-enough-jquery-to-get-by/

Das war ein sehr sehr guter Tipp. Es beschreibt nicht nur, wie mit react.js umzugehen ist, sondern vor Allem warum. Das war mein persönlicher Break-Even. Es löst Probleme, mit denen ich mich persönlich bei entwicklen mit jQuery immer wieder konfrontiert sehe. Ich freue mich auf das Thema, fehlt nur noch die Aufgabestellung …

Nachdem ich nun einen kleinen Einblick in react.js bekommen und ein Verständnis dafür bekommen habe, wie sich react.js von jQuery unterscheidet, kommt das nächste grosse Fragezeichen:

Ich habe den HTML-Code aus meinem jsbin jetzt einfach herauskopiert, als HTML-File auf meiner lokalen Entwicklungsumgebung gespeichert und im Browser aufgerufen.

<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container"></div>
  <script>
    
    var TweetBox = React.createClass({
  getInitialState: function() {
    return {
      text: "",
      photoAdded: false
    };
  },
  togglePhoto: function(event) {
    this.setState({ photoAdded: !this.state.photoAdded });
  },
  remainingCharacters: function() {
    if (this.state.photoAdded) {
      return 140 - 23 - this.state.text.length;
    } else {
      return 140 - this.state.text.length;
    }
  },
  overflowAlert: function() {
    if (this.state.photoAdded) {
      var beforeOverflowText = this.state.text.substring(140 - 23 - 10, 140 - 23);
      var overflowText = this.state.text.substring(140 - 23);
    } else {
      var beforeOverflowText = this.state.text.substring(140 - 10, 140);
      var overflowText = this.state.text.substring(140);
    } 
    if (this.remainingCharacters() < 0) {
      return (
        <div className="alert alert-warning">
          <strong>Oops! Too Long:</strong>
          &nbsp;...{beforeOverflowText}
          <strong className="bg-danger">{overflowText}</strong>
        </div>
      );
    } else {
      return "";
    }
  },  
  handleChange: function(event) {
    console.log(event.target.value);
    this.setState({ text: event.target.value });
  },
  render: function() {
    return (
      <div className="well clearfix">
        { this.overflowAlert() }
        <textarea className="form-control"
                  onChange={this.handleChange}></textarea>
        <br />
        <span>{ this.remainingCharacters() }</span>
        <button disabled={this.remainingCharacters() === 140} className="btn btn-primary pull-right">Tweet</button>
        <button className="btn btn-default pull-right" onClick={this.togglePhoto}>
          {this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
        </button>          
<br />
      </div>
    );
  }
});

ReactDOM.render(
  <TweetBox />,
  document.getElementById("container")
);
  </script>
</body>
</html>

Das funktioniert leider nicht, was ich aber erwartet hatte. Was mir, als jemand der gewohnt ist mit jQuery zu arbeiten, nun fehlt ist eine Idee warum das nicht funktioniert.

Gibts einen einfach Antwort?

gruss, heinetz

Beitrag melden
–
Informationen zu den Bewertungsregeln