Begonnen von Hallo Welt von ReactJS

Dieser Artikel enthält Codebeispiele und allgemeine Konzepte in React.js, einer von Facebook-Ingenieuren entwickelten Javascript-Bibliothek zum Erstellen von Benutzeroberflächen. Diese Konzepte werden im folgenden Artikel ausführlich veröffentlicht Sie sind ein ReactJS-Experte und sind der Meinung, dass diese Codes verbessert werden müssen. Bitte schreiben Sie mir mit Ihren Vorschlägen und ich werde diesen Artikel/Code zeitnah entsprechend aktualisieren

Da ich weiterhin Code veröffentliche Beispiele muss ich besonders erwähnen: Es wird ein wenig schwierig sein, ReactJS für Anfänger zu lernen, da ich in letzter Zeit Code auf AngularJS geschrieben habe. Ich muss zugeben, dass es einen großen Unterschied zwischen ihnen gibt, was uns hilft Ich werde einen weiteren Blog-Beitrag verfassen, in dem die Hauptunterschiede zwischen ihnen verglichen werden.

Auf hohem Niveau sind hier jedoch einige Gründe aufgeführt, warum ich beim Erlernen von ReactJS „Steep“ etwas andere verwendet habe " Lernroute:

Komponentenorientiert: ReactJS ist komponentenorientiert, was bedeutet, dass Sie UI-Elemente als Komponenten behandeln müssen. Interessanterweise sind Komponenten zusammensetzbar. Das bedeutet, dass eine Komponente eine oder mehrere interne Komponenten haben kann. Der folgende Code demonstriert diese

JSX-Syntax: Er verwendet eine interessante JSX-Syntax (XML-ähnlich) zum Schreiben von Code. Der JSX-Konverter (ein Precompiler) wird verwendet, um diese Syntaxstruktur in explizites JavaScript zu konvertieren.

Ereignis-Proxy-Modell: Es folgt dem Ereignisdelegationsmodell, um Ereignisse zu erfassen.

Hier werden einige Schlüsselkonzepte gezeigt Code:

Komponenten

Ereignisdelegierte

JSX-Syntax

Hier ist eine kurze Beschreibung dessen, was die Komponente implementiert hat

- Eingabefeldelement, in das der Benutzer seinen Benutzernamen eingeben kann. Wie im folgenden Artikel erwähnt wird, handelt es sich bei diesem Eingabefeld tatsächlich um die Komponente „Benutzername“

- div-Ebenenelement, die zur Anzeige von „Hallo, Benutzername“ verwendet wird. Wie im folgenden Artikel erwähnt wird, handelt es sich bei dieser Div-Ebene tatsächlich um die „HelloText“-Komponente

Im Folgenden erfahren Sie, wie sie gestaltet ist. Suchen Sie außerdem nach Code, der die folgenden Konzepte darstellt.

SayHello: Zusammensetzbare Komponente

SayHello ist eine übergeordnete Komponente, die zwei Komponenten enthält. Diese übergeordnete Komponente besteht aus zwei internen Komponenten. Eine Komponente ist UserName, mit der Benutzer Namen eingeben können, und die andere Komponente ist HelloText, mit der Text angezeigt wird, z. B. Hallo, Welt. Diese übergeordnete Komponente definiert die folgenden drei verschiedenen APIs:

getInitialState

handleNameSubmit

render (dies ist eine erforderliche Schnittstelle, eine Komponente muss render definieren, um React anzuweisen, wie zu reagieren um die Komponente zu rendern)

/
 // This is the parent component comprising of two inner components
 // One of the component is UserName which is used to allow user to enter their name
 // Other component is HelloText which displays the text such as Hello, World
 //
 var SayHello = React.createClass({
 // This is used to set the state, "data" which is
 // accessed later in HelloText component to display the updated state
 //
 getInitialState: function() {
  return {data: 'World'}
 },
 // It is recommended to capture events happening with any children
 // at the parent level and set the new state that updates the children appropriately
 handleNameSubmit: function(name) {
  this.setState({data: name});
 },
 // Render method which is comprised of two components such as UserName and HelloText
 //
 render: function() {
  return(
  <div>
  <UserName onNameSubmit={this.handleNameSubmit}/>
  <HelloText data={this.state.data}/>
  </div>
  );
 }
 });

UserName-Komponente

UserName-Komponente hat die folgenden zwei Methoden:

handleChange: Verwendung Zum Erfassen des onChange-Ereignisses

render: Wird zum Rendern der Komponente

var UserName = React.createClass({
 handleChange: function() {
  var username = this.refs.username.getDOMNode().value.trim();
  this.props.onNameSubmit({username: username });
  this.refs.username.getDOMNode().value = '';
  return false;
 },
 render: function() {
  return(
  <form role="form" onChange={this.handleChange}>
   <div className="input-group input-group-lg">
   <input type="text" className="form-control col-md-8" placeholder="Type Your Name" ref="username"/>
   </div>
  </form>
  );
 }
 });

HelloText-Komponente

render：包含了展示HelloText组件内容的代码
  
var HelloText = React.createClass({
  render: function() {
  return (
  <div>
   <h3>Hello, {this.props.data}</h3>
  </div>
  );
  }
 });