React.js: Was ich aus meinem ersten Projekt gelernt habe

ursprünglich am 2. April 2023

veröffentlicht.

In den letzten Wochen habe ich begonnen, eine weitere begehrte Fähigkeit in der Webentwicklungswelt zu lernen: React.js. Ich fühle mich zumindest etwas wohl mit vielen Dingen in JavaScript und auf Geheiß einiger meiner Mentoren dachte ich, dies sei der logischste Schritt, um meine Karriereziele zu erreichen. In diesem Artikel werde ich Ihnen einige Dinge mitteilen, die ich als Neuling gelernt habe.

Für einen Kontext habe ich nur mit Klassenkomponenten in React gearbeitet, niemals mit funktionalen Komponenten werde ich die Unterschiede hier nicht beschreiben, da ich jetzt nichts über funktionale Komponenten weiß. Ich werde wahrscheinlich eines Tages einen Artikel schreiben, in dem die beiden Typen kontrastieren. Selbst zu dem Zeitpunkt, als ich diesen Artikel schreibe, wird von allen empfohlen, funktionale Komponenten zu verwenden, aber es lohnt sich immer noch, zu wissen, wie Klassenkomponenten funktionieren, da ältere React -Projekte sie verwenden können.

Für mein erstes Projekt wurde ich beauftragt, einen Schuldenrechner aufzubauen, in dem der Benutzer den Schuldenschreiber, den Zinssatz, wie viel er zahlen möchte. Es gibt einige Bestimmungen für diese Eingabefelder, aber Sie können über diejenigen im Readme.md des Projekts lesen (verknüpfen Sie das Github -Repo am Ende des Artikels), oder Sie können es selbst ausprobieren, um zu sehen, wie es funktioniert. Sobald der Benutzer eine Zahlung „einreicht“, wird ein Zahlungshistorie -Artikel angezeigt, der Einzelheiten zu Kapital, Zinsen und Guthaben gibt. Sofern der Benutzer nicht die gesamte Schuld in der ersten Zahlung auszahlt, sind alle Eingabefelder mit Ausnahme des Zahlungsfelds deaktiviert, wenn die erste Zahlung erfolgt. Wenn die gesamte Schuld bezahlt wird, ist das gesamte Formular deaktiviert und der Benutzer kann den Verlauf der endgültigen Zahlung zusammen mit einer Nachricht, dass er schuldenfrei ist, anzeigen.

Ich werde Antworten auf die folgenden Fragen geben, die ich zu Reaktionen hatte, während ich anfing, darüber zu lernen:

Was ist React.js und warum sollte es verwendet werden?

Wie fange ich an, eine React -App zu erstellen?

Wie sieht eine typische Komponente aus?

Wie kann ich Informationen zwischen Komponenten teilen?

---

Kann ich die Dinge bedingt in reagieren?

rendern?

Wie kann ich eine React -App bereitstellen?

Was ist React.js und warum sollte es verwendet werden? React ist eine Front-End-JS-Bibliothek (kein Framework?)), Das das Organisieren großer Projekte erleichtert. Es wurde ursprünglich bei Facebook mehr dazu entwickelt und wird jetzt natürlich von Meta gepflegt, das es auch für Instagram verwendet. Es wird jetzt in vielen Stellen in den Interwebs weit verbreitet, wie Airbnb, BBC, Imgur und Netflix unter anderem.

React -Code besteht aus wiederverwendbaren Komponenten, die sich im SRC -Ordner befinden müssen und dessen Namen in Kamelcase -Form enthalten sein müssen. Viele Komponenten sind in JSX (JavaScript -Syntaxerweiterung) geschrieben, eine Art Mischung zwischen HTML & JS. Ich nenne diese Komponenten "wiederverwendbar", da sie die gleiche Struktur haben und verschiedene Informationen an sie übergeben und auf der Website angezeigt werden. Komponenten können auch in normaler JS geschrieben werden. Verschiedene Informationen, wie z. B. Informationen zur Benutzerkonto, können dann an diese Komponenten übergeben werden und alle werden auf die gleiche Weise angezeigt.

Wie fange ich an, eine React -App zu erstellen?

Geben Sie die folgenden Befehle in das Terminal ein:
, um eine React -App zu initialisieren:

npx create-react-app project-name
cd project-name
npm start

npm start öffnet das Projekt in Ihrem Standardbrowser in einem leeren Port.

Normalerweise dauert es ein paar Minuten, bis alles eingerichtet ist. Vielleicht tun Sie in der Zwischenzeit etwas Produktives, wie das Hochladen eines albernen Tanzes nach Tiktok oder herauszufinden, in welchem ​​Hogwarts -Haus Sie sortiert würden (ja, ich habe dieses Quiz gemacht).

Die offizielle Dokumentation empfiehlt nun, ein Framework zur Initialisierung einer React -App zu verwenden. Ich habe noch keinen benutzt, aber Sie können hier mehr darüber lesen.

Wie sieht eine typische Komponente aus?

Wie ich bereits erwähnt habe, habe ich bisher nur mit Klassenkomponenten gearbeitet, also werde ich die in diesem Artikel nur behandeln. Die Komponenten, die ich für mein erstes Projekt verwendet habe, sind etwas groß, um hier zu platzieren. Siehe also die Dateien app.js & the PaymentHistory.jsx im SRC -Ordner im Repository, das am Ende des Artikels verlinkt ist, um sie in Aktion anzuzeigen. Trotzdem kann die typische Klassenkomponente so aussehen:

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

Beachten Sie, dass ich jedem & lt; p & gt einen Schlüsselwert hinzugefügt habe. Element in der & lt; div & gt;. Diese sind nicht unbedingt von entscheidender Bedeutung für die Fähigkeit der App, ordnungsgemäß zu funktionieren, aber es ist bewährte Verfahren, sie einzubeziehen. Ein eindeutiger Schlüsselwert sollte zu jedem Kind eines übergeordneten Elements in return () hinzugefügt werden.

Wie eine normale JS -Klasse sollte der Konstruktor () als erstes kommen, gefolgt von Super (). Wenn wir beispielsweise staatliche Werte oder Methoden von einer Klasse zur anderen teilen möchten, müssen wir Requisiten, die für "Eigenschaften" kurz vorhanden sind, als Parameter für Konstruktor () & Super () übergeben.

Dann sollten wir Statuswerte initialisieren. In meinem Schuldenrechner -Projekt musste ich mehrere staatliche Werte verwenden, um verschiedene Geldbeträge für die Zahlung, Kapital, Zinsen und Saldo zu verfolgen, aber ich habe auch ein Paar verwendet, das feststellte, wie oder ob bestimmte Dinge gerendert werden sollten. So habe ich den isdebtfree -Zustandswert verwendet, um ein Eingabefeld zu aktivieren, wenn er falsch ist, und deaktivieren Sie ihn, wenn er wahr ist:

npx create-react-app project-name
cd project-name
npm start

Wie Sie sehen können, können wir Zustandswerte in Klassenkomponenten mithilfe einer setState-Funktion ändern. Beachten Sie, dass setState asynchron ausgeführt wird, sodass jede Funktionalität, die die aktualisierten Statuswerte erfordert, in einen Rückruf eingefügt werden kann. Allerdings sollten Sie diese Rückrufe so einfach wie möglich halten, sonst landen Sie in der verwirrenden Welt der „Callback-Hölle“. Befolgen Sie daher beim Erstellen von Methoden in der Komponente so gut wie möglich das Prinzip der Einzelverantwortung. Sie sollten auch wissen, dass jedes Mal, wenn der Status innerhalb der Komponente geändert wird, die Komponente neu gerendert wird.
Das DOM sollte nicht direkt innerhalb einer Methode manipuliert werden. Dies wird als „Antimuster“ bezeichnet. Beachten Sie, dass ich nicht direkt auf das DOM-Element zugegriffen habe, indem ich das Attribut „disabled“ innerhalb der Methode festgelegt habe, etwa so:

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

Stattdessen sollten Teile von HTML-Elementen in return() auf einen Statuswert gesetzt werden, der sich basierend auf der Ausführung von Methoden in der Komponente ändern kann, wie ich Ihnen im Codeblock vor dem direkt über diesem Absatz gezeigt habe.

Eine weitere Sache, die Sie beachten sollten, ist, dass der return()-Ausdruck der Komponente so kurz wie möglich sein sollte. Vermeiden Sie es daher, dort mathematische Ausdrücke jeglicher Art sowie die hier definierte Funktionalität einzufügen. Ich habe diesen Fehler zuerst gemacht, als ich versucht habe, die Mindest- und Höchstwerte im Zahlungsfeld festzulegen, die sich basierend auf Statuswerten ändern, die sich ändern, wenn Zahlen in die Felder „Kapital“ und „Zinssatz“ eingegeben werden und wenn eine Zahlung erfolgt.

Stattdessen habe ich für jeden dieser Werte eine Methode erstellt und dann die Min- und Max-Werte auf das gesetzt, was diese Methoden zurückgegeben haben. Die erste Methode unten hat funktioniert, ist aber nicht gerade eine gute Möglichkeit, sie in React durchzuführen, da auch hier der return()-Teil einer Komponente so kurz und leicht lesbar wie möglich sein sollte.

// Initialize isDebtFree:
// Should go inside the constructor, but left out here for brevity
this.state = {
  // other state values
  isDebtFree: false
  // other state values
}

// Change isDebtFree to true if payment equals the total remaining balance
// This method will be called upon payment submission
updateValues = () => {
  // other stuff
  if (newBalance === 0) {
    this.setState({
      isDebtFree: true
    })
   }
}

// Set the disabled property of an input field to equal isDebtFree:
render() {
  return (
    <input disabled={this.state.isDebtFree} />
  )
}

Die folgende Methode entspricht eher dem Geist von React:

// DO NOT ACCESS DOM ELEMENTS DIRECTLY INSIDE A METHOD!
updateValues = () => {
  if (newBalance === 0) {
  document.getElementById('payment').disabled = true;
 }
}

Wie kann ich Informationen zwischen Komponenten austauschen?

Wie Sie im ersten Codierungsblock dieses Artikels sehen können, habe ich mithilfe von Requisiten eine Methode von einer Komponente an eine andere übergeben. Schauen wir uns nun an, wie diese zweite Komponente auf das zugreifen kann, was wir im ersten Codeblock oben von App an sie übergeben haben. So sah dieser Teil aus, falls Sie zu faul sind, ganz nach oben zu scrollen, um ihn zu sehen:

// You could put math operations directly inside elements in return()...
// ... but this is not the best way
render() {
  return (
    <input
      type="number"
      min={
        this.state.principal / 100 +
            (this.state.principal * Number(this.state.interestRate)) / 100 / 12;
      }
      max = {
        this.state.principal +
            (this.state.principal * Number(this.state.interestRate)) / 100 / 12;
      }
    />
  )
}

Jetzt importieren wir in ComponentOne diese Methode aus der App und verwenden sie:

// A BETTER WAY
// Create 2 methods; one returns the min payment possible, the other the max:
getMinPmt = () => {
  let minPmt =
    this.cleanValue(this.state.principal / 100) +
    this.cleanValue(
      (this.state.principal * Number(this.state.interestRate)) / 100 / 12
    );
  let totalBalance =
    this.state.principal +
    this.cleanValue(
      (this.state.principal * Number(this.state.interestRate)) / 100 / 12
    );
  if (totalBalance <= 100 && totalBalance > 0) {
    minPmt = totalBalance;
  }
  return this.cleanValue(minPmt);
};
getMaxPmt = () => {
  let maxPmt =
    this.state.principal + 
    this.cleanValue(
      (this.state.principal * Number(this.state.interestRate)) / 100 / 12
    );
  return this.cleanValue(maxPmt);
};

// Set the min & max values of the input to what the respective method returns:
render() {
  return (
    <input
      type="number"
      min={this.getMinPmt()}
      max={this.getMaxPmt()}
    />
  )
}

Nachdem wir auf die Methode „changeFont“ zugegriffen haben, rufen wir sie auf, wenn auf das von uns gerenderte h1 geklickt wird.

Kann ich die Dinge in React bedingt rendern?

Ja! Bei React dreht sich alles um bedingte Rendern von Dingen. Es gibt ein paar Möglichkeiten, es zu tun. Sie können dies mit einer Methode tun und dann den Wert eines Elements in Rückkehr () so festlegen. Verwenden wir also das Beispiel für das Schuldenrechner erneut. Nehmen wir an, wir möchten die Nachricht "Sie sind schuldenfrei!" Wenn der Zustandswert des Saldos 0 und eine Schaltfläche beträgt, die den Benutzer auffordert, eine weitere Zahlung zu leisten, wenn der Restbetrag über 0 liegt. Es gibt einige Möglichkeiten, wie wir dies tun könnten.

setzen wir zuerst den Wert dieses Elements auf das, was eine Methode zurückgibt, basierend auf den Bedingungen:

npx create-react-app project-name
cd project-name
npm start

Die Verwendung einer Methode kann vorteilhaft sein, da es uns ermöglicht, die Rückgabe () prägnanter zu halten. Wir können auch mehr komplexe Bedingungen hinzufügen, genau wie in einer normalen JS-Funktion.

Wir können auch einen ternären Operator innerhalb von return () verwenden, um dasselbe zu erreichen:

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

Wenn die Logik einfach genug ist, um mit einem ternären Operator ausgedrückt zu werden und es immer noch leicht zu lesen ist, verwenden Sie einen und verwenden Sie einen. Ansonsten ist es immer akzeptabel, eine Methode zu verwenden.

Wenn Sie beispielsweise einfache Bedingungen haben und nichts anzeigen möchten, wenn die Bedingungen nicht erfüllt sind, können Sie dies tun:

// Initialize isDebtFree:
// Should go inside the constructor, but left out here for brevity
this.state = {
  // other state values
  isDebtFree: false
  // other state values
}

// Change isDebtFree to true if payment equals the total remaining balance
// This method will be called upon payment submission
updateValues = () => {
  // other stuff
  if (newBalance === 0) {
    this.setState({
      isDebtFree: true
    })
   }
}

// Set the disabled property of an input field to equal isDebtFree:
render() {
  return (
    <input disabled={this.state.isDebtFree} />
  )
}

Wenn this.state.totalBalance ausschließlich gleich 0 ist, wird die Nachricht angezeigt. Wenn nicht, wird nichts angezeigt.

Wie kann ich eine React -App bereitstellen?

Ich habe mein erstes React -Projekt über Netlify eingesetzt, auf das ich Zugriff auf das Github -Repository des Projekts gewährt habe. Vor der Bereitstellung sollten Sie NPM -Auslauf -Build ausführen, um die App für die Produktion im Build -Ordner zu erstellen. Es reagiert im Produktionsmodus und optimiert den Build für die beste Leistung. Sie können die Site wie normalerweise eine andere Website aktualisieren.

In Ihrer Index.html -Datei müssen Sie möglicherweise einige Wege ändern, einschließlich der Favicon -URL, in & lt; Head & gt;. Sie sollten nur '%public_url%' durch ./ ersetzen müssen. Suchen Sie nach Anweisungen wie diesem in & lt; Head & gt;:

---

Es gab also ein paar Dinge, die ich beim Bau meines ersten React -Projekts gelernt habe. Mein Wissen über React führt noch nicht so tief aus. Wenn Sie also Vorschläge für mich oder Informationen hinzufügen müssen, fügen Sie bitte einen Kommentar hinzu. Wenn Sie es hilfreich fanden, hinterlassen Sie bitte einen schönen Kommentar oder hinterlassen

Danke fürs Lesen!

vollständige React.js -Dokumentation

Mein erstes Projekt in Aktion
Das GitHub -Repository des Projekts

Das obige ist der detaillierte Inhalt vonReact.js: Was ich aus meinem ersten Projekt gelernt habe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!