Erklärt durch Hallo Welt von ReactJS_Grundkenntnisse

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 Wenn Sie ein ReactJS-Experte sind und der Meinung sind, dass diese Codes verbessert werden müssen, schreiben Sie mir bitte Ihre Vorschläge und ich werde diesen Artikel/Code zeitnah entsprechend aktualisieren

Bevor ich weiterhin einige Codebeispiele poste, muss ich ausdrücklich erwähnen: Für Anfänger wird es etwas schwierig sein, ReactJS zu lernen, da ich in letzter Zeit Code auf AngularJS geschrieben habe. Ich muss zugeben, dass sie mir helfen Wir machen einen großen Unterschied, wenn es um die Arbeit geht. Ich werde einen weiteren Blog-Beitrag verfassen, in dem die Hauptunterschiede zwischen ihnen verglichen werden

Auf hohem Niveau gibt es jedoch einige Gründe, warum ich beim Erlernen von ReactJS den etwas „steileren“ Lernpfad eingeschlagen habe:

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 dies
JSX-Syntax: Es verwendet eine interessante JSX-Syntax (XML-ähnlich) zum Schreiben von Code. Ein JSX-Übersetzer (ein Precompiler) wird verwendet, um diese syntaktische Struktur in explizites JavaScript umzuwandeln

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

Hier sind einige Schlüsselkonzepte, die im Code gezeigt werden:

Komponenten
Event-Agent
JSX-Syntax

Im Folgenden finden Sie 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, das zur Anzeige von „Hallo, Benutzername“ verwendet wird. Wie im folgenden Artikel erwähnt wird, ist diese Div-Ebene tatsächlich die „HelloText“-Komponente

So ist es gestaltet. Suchen Sie außerdem nach Code, der die folgenden Konzepte darstellt.

SayHello: Zusammensetzbare Komponenten

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
rendern (dies ist eine erforderliche Schnittstelle, eine Komponente muss render definieren, um React mitzuteilen, wie die Komponente als Antwort gerendert werden soll)

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

Die UserName-Komponente verfügt über die folgenden zwei Methoden:

handleChange: wird zum Erfassen des onChange-Ereignisses
1. verwendet
rendern: Wird zum Rendern von Komponenten verwendet

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

HelloText-Komponente verfügt nur über eine Methode zum Rendern der Komponente

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

Wenn Sie den vollständigen Code erhalten möchten, habe ich den Code auf der

github hello-reactjs-Seite veröffentlicht. Bitte zögern Sie nicht, einen Kommentar abzugeben oder Vorschläge zu machen.