Importieren Sie die JavaScript-Datei in ReactJS

Dieses Tutorial demonstriert die Verwendung von import/export (ES6-Modul) und Standard-Exporten zum Importieren von JavaScript-Dateien in ReactJS.

Importieren Sie die JavaScript-Datei in ReactJS

Mit dem nativen ES6-Modul-System können wir eine JavaScript-Datei in eine andere JavaScript-Datei einfügen. Es ermöglicht uns, Code-Modularität und code sharing zwischen verschiedenen JavaScript-Dateien zu schaffen.

Mehrere Techniken beinhalten eine JS-Datei, wie zum Beispiel JavaScript include und Node JS require.

Das native ES6-Modul-System bietet einen Mechanismus, um den Code in mehrere Dateien und Verzeichnisse aufzuteilen und gleichzeitig zu gewährleisten, dass alle einzelnen Codeteile miteinander kommunizieren können.

Wir können eine JS-Datei auf zwei Arten in React importieren:

1. Verwenden Sie Importieren/Exportieren | ES6-Modul
2. Verwenden Sie Standard-Exporte

Verwenden Sie import/export (ES6-Modul), um die JS-Datei in ReactJS zu importieren

Beginnen wir mit dem Importieren und Exportieren mit der ES6-Methode. Aber erstellen Sie zuerst die unten aufgeführten Methoden und Konstanten in einer Datei namens helper.js.

export function greetFunction(name) {
  return `Hello, ${name}`;
}
export const appMessage = 'Hello World! Welcome to DefltStack!';

Sie werden sehen, dass wir deklariert haben, dass die Funktion und die Variable möglicherweise von anderen Dateien verwendet werden, indem wir ihnen das Schlüsselwort export vorangestellt haben.

Syntax:

import {object1, object2, ...} from 'filename.js'

Erstellen Sie eine weitere Datei, nennen Sie sie main.js und fügen Sie dann den folgenden Code darin ein:

import {appMessage, greetFunction} from './helper.js';

export default function App() {
  const greetDelftStack = greetFunction('DelftStack');
  return (
    <Fragment>
      {appMessage}
      <br>
      {greetDelftStack}
    </Fragment>
  )
}

Ausgang:

Hello World! Welcome to DefltStack!
Hello, DelftStack

Indem wir greetFunction und appMessage in geschweiften Klammern in der ersten Zeile definieren, importieren wir sie aus helper.js. Wir können jetzt die importierten Objekte verwenden, da sie nach dieser Zeile in derselben Datei definiert sind.

Die Ausgabe beider Objekte wurde dann konsolenprotokolliert.

Verwenden Sie Standard-Exporte, um JS-Dateien in ReactJS zu importieren

Das Schlüsselwort default erlaubt uns automatisch, ein Objekt aus einer Datei zu exportieren. Warum ist das wichtig? Schauen wir uns eine Illustration an. Fügen Sie default vor der function believeFunction(name) in helper.js hinzu, um daraus einen default-Export zu machen:

export default function greetFunction(name) {
  return `Hello, ${name}`;
}

Sie können es nun ähnlich wie folgt in die main.js importieren:

import anyFnName from './helper.js';
export default function App() {
  const greetDelftStack = anyFnName('DelftStack');
  return (
    <main>
      {greetDelftStack}
    </main>
  )
}

Ausgang:

Hello, DelftStack

Der genaue Prozess läuft wie zuvor ab. AnyFnName wird beim default-Export aus helper.js importiert. Aufgrund des Fehlens von anyFnName in helper.js ist der default-Export greetFunction(), in diesem Fall wird als zufälliger Name exportiert.

Sie können die Demo für diese Beispielcodes hier finden und üben. Aber lassen Sie uns zunächst über einige wichtige Aspekte im Zusammenhang mit ES6-Modulen sprechen, die Benutzer bei der Verwendung berücksichtigen sollten:

• Beim Import von default-Exporten müssen die geschweiften Klammern entfernt werden. Ein Fehler, der besagt, dass kein solcher Export existiert, wäre generiert worden.
• Mehrere Exporte können in einer Datei vorhanden sein. Eine Datei kann jedoch nur einen Standard-Export haben.
• Ein Standardexport kann nicht mit einem Aliasnamen importiert werden. Daher müssen wir beim Importieren eines typischen Exports denselben Namen verwenden.
• Wir können Standard- und reguläre Exporte mischen. Zum Beispiel für benannte oder standardmäßige Exporte verwenden Sie {} und verlassen Sie {} für den Standardexport.
• Mit dem * können wir den Inhalt eines Moduls importieren. Das Modul wird dann als namespace verwendet, um auf alle Exporte zuzugreifen.
• Wir können alle Objekte gleichzeitig am Ende der Datei exportieren.

Sie können also einen der oben genannten Ansätze wählen, um JavaScript-Dateien in ReactJS zu importieren.