JAVASCRIPT-GRUNDLAGEN, BEVOR SIE REACT LERNEN

JavaScript-Grundlagen, bevor Sie React lernen

Wenn Sie bereits Erfahrung mit JavaScript haben, müssen Sie vor React nur die JavaScript-Funktionen lernen, die Sie tatsächlich verwenden, um die React-Anwendung zu entwickeln. Dinge über JavaScript, mit denen Sie vertraut sein sollten, bevor Sie React lernen, sind:

Es sind die 20 % der JavaScript-Funktionen, die Sie 80 % der Zeit verwenden werden. In diesem Tutorial werde ich Ihnen also helfen, sie alle zu lernen.

Entdecken Sie die Create React-App

Der übliche Fall, um mit dem Erlernen von React zu beginnen, besteht darin, das Paket create-react-app auszuführen, das alles einrichtet, was Sie zum Ausführen von React benötigen. Nachdem der Vorgang abgeschlossen ist, wird uns das Öffnen von src/app.js die einzige React-Klasse in der gesamten App präsentieren:

src/App.js

Wenn Sie ES6 noch nie gelernt haben, würden Sie denken, dass diese Klassenanweisung ein Feature von React ist. Es ist eigentlich eine neue Funktion von ES6, und deshalb würde das richtige Erlernen von ES6 es Ihnen ermöglichen, React-Code besser zu verstehen. Wir beginnen mit ES6-Klassen.

ES6-Klassen

ES6 führte eine Klassensyntax ein, die ähnlich wie OO-Sprachen wie Java oder Python verwendet wird. Eine Basisklasse in ES6 würde so aussehen:

Wie überweise ich Geld von Bitmart auf ein Bankkonto?

return (  {users .map(user => {user.name}
) } 
 )

Auf die Klassensyntax folgt ein Bezeichner (oder einfach ein Name), der zum Erstellen neuer Objekte verwendet werden kann. Die Konstruktormethode wird immer bei der Objektinitialisierung aufgerufen. Alle an das Objekt übergebenen Parameter werden an das neue Objekt übergeben. Zum Beispiel:

src/App.js

Eine Klasse kann beliebig viele Methoden definieren, und in diesem Fall haben wir die Methode hello, die einen String zurückgibt.

Klassenvererbung

Eine Klasse kann die Definition einer anderen Klasse erweitern, und ein neues Objekt, das von dieser Klasse initialisiert wird, hat alle Methoden beider Klassen.

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component {  
 render() {  
 return (  
  
  
    
 
  
 Edit |_+_| and save to reload.  
 
  
   className=App-link  
 href=  https://reactjs.org   
 target=_blank  
 rel=noopener noreferrer  
 >  
 Learn React  
    
  
  
 );  
 }  
 }
 export default App;

Die Klasse, die eine andere Klasse erweitert, heißt normalerweise Kinderklasse oder Unterklasse , und die Klasse, die erweitert wird, heißt Elternklasse oder Superklasse . Eine Kinderklasse kann auch überschreiben die in der übergeordneten Klasse definierten Methoden, was bedeutet, dass die Methodendefinition durch die neue definierte Methode ersetzt wird. Lassen Sie uns zum Beispiel die Hello-Funktion überschreiben:

class Developer {  
 constructor(name){  
  this.name  = name;  
 } hello(){  
 return ‘Hello World! I am ’ +  this.name  + ’ and I am a web developer’;  
 }  
 }

Da gehst du. Die Hello-Methode der Developer-Klasse wurde überschrieben.

Verwendung in React

Nachdem wir nun die ES6-Klasse und die Vererbung verstanden haben, können wir die in src/app.js definierte React-Klasse verstehen. Dies ist eine React-Komponente, aber eigentlich nur eine normale ES6-Klasse, die die Definition der React-Komponentenklasse erbt, die aus dem React-Paket importiert wird.

var nathan = new Developer(‘Nathan’);  
 nathan.hello(); // Hello World! I am Nathan and I am a web developer

Karte und Filter

Obwohl sich dieses Tutorial auf ES6 konzentriert, müssen JavaScript-Array-Map- und -Filtermethoden erwähnt werden, da sie wahrscheinlich eine der am häufigsten verwendeten ES5-Funktionen beim Erstellen von React-Anwendungen sind. Insbesondere bei der Verarbeitung von Daten.

Diese beiden Methoden werden viel häufiger bei der Verarbeitung von Daten verwendet. Stellen Sie sich beispielsweise vor, ein Abrufen aus dem API-Ergebnis gibt ein Array von JSON-Daten zurück:

tf_cpp_min_log_level

class ReactDeveloper extends Developer {  
 installReact(){  
 return ‘installing React … Done.’;  
 }  
 } var nathan = new ReactDeveloper(‘Nathan’);  
 nathan.hello(); // Hello World! I am Nathan and I am a web developer  
 nathan.installReact(); // installing React … Done.

Dann können wir eine Liste von Elementen in React wie folgt rendern:

class ReactDeveloper extends Developer {  
 installReact(){  
 return ‘installing React … Done.’;  
 } hello(){  
 return ‘Hello World! I am ’ +  this.name  + ’ and I am a REACT developer’;  
 }  
 }
 var nathan = new ReactDeveloper(‘Nathan’);  
 nathan.hello(); // Hello World! I am Nathan and I am a REACT developer

}
}

Wir können auch die Daten im Rendering filtern.

import React, { Component } from ‘react’; class App extends Component {  
 // class content  
 render(){  
 return (  
 ;  
 }

ES6 Modulsystem

Das ES6-Modulsystem ermöglicht JavaScript den Import und Export von Dateien. Sehen wir uns den src/app.js-Code noch einmal an, um dies zu erklären.

const users = [  
 { name: ‘Nathan’, age: 25 },  
 { name: ‘Jack’, age: 30 },  
 { name: ‘Joe’, age: 28 },  
 ];

Oben in der ersten Codezeile sehen wir die import-Anweisung:

import React, { Component } from ‘react’; class App extends Component {  
 // class content  
 render(){  
 const users = [  
 { name: ‘Nathan’, age: 25 },  
 { name: ‘Jack’, age: 30 },  
 { name: ‘Joe’, age: 28 },  
 ];
 |_+_|
und in der letzten Zeile sehen wir die export default-Anweisung:
  
 {users  
 .filter(user => user.age > 26)  
 .map(user => {  user.name  }
)  
 }  
 
 
Um diese Anweisungen zu verstehen, besprechen wir zuerst die Modulsyntax.
Ein Modul ist einfach eine JavaScript-Datei, die einen oder mehrere Werte (das können Objekte, Funktionen oder Variablen sein) mit dem Schlüsselwort export exportiert. Erstellen Sie zunächst eine neue Datei namens util.js im src-Verzeichnis
import React, { Component } from ‘react’;  
 import logo from ‘./logo.svg’;  
 import ‘./App.css’; class App extends Component {  
 render() {  
 return (  
  
  
    
 
  
 Edit |_+_| and save to reload.  
 
  
   className=App-link  
 href=  https://reactjs.org   
 target=_blank  
 rel=noopener noreferrer  
 >  
 Learn React  
    
  
  
 );  
 }  
 }
 export default App;
 
Dann schreiben Sie eine Funktion hinein. Das ist ein Standardexport  
import React, { Component } from ‘react’; 
oder mehrere benannte Exporte  
export default App; 
Dann können wir es aus src/App.js importieren
touch util.js 
Sie können mehrere benannte Exporte pro Modul haben, aber nur einen Standardexport. Ein Standardexport kann ohne Verwendung der geschweiften Klammern und des entsprechenden exportierten Funktionsnamens importiert werden:
export default function times(x) {  
 return x * x;  
 } 
Bei benannten Exporten müssen Sie jedoch mit geschweiften Klammern und dem genauen Namen importieren. Alternativ können Importe Alias verwenden, um zu vermeiden, dass für zwei verschiedene Importe derselbe Name verwendet wird:
export function times(x) {  
 return x * x;  
 } export function plusTwo(number) {  
 return number + 2;  
 }
 
Import aus absolutem Namen wie:
import { times, plusTwo } from ‘./util.js’; console.log(times(2));  
 console.log(plusTwo(3));
 
Wird JavaScript auf node_modules auf den entsprechenden Paketnamen überprüfen lassen. Wenn Sie also eine lokale Datei importieren, vergessen Sie nicht, den richtigen Pfad zu verwenden.
  
Verwendung in React
Offensichtlich haben wir dies in der Datei src/App.js und dann in der Datei index.js gesehen, in der die exportierte App-Komponente gerendert wird. Lassen Sie uns den serviceWorker-Teil vorerst ignorieren.
was bedeutet 100x in krypto
// in util.js  
 export default function times(x) {  
 return x * x;  
 } // in app.js  
 import k from ‘./util.js’;
 console.log(k(4)); // returns 16
 
Beachten Sie, wie App aus dem Verzeichnis ./App importiert wird und die Erweiterung .js weggelassen wurde. Wir können die Dateierweiterung nur beim Importieren von JavaScript-Dateien weglassen, müssen sie jedoch in andere Dateien wie .css einfügen. Wir importieren auch ein weiteres Knotenmodul React-Dom, das es uns ermöglicht, die React-Komponente in ein HTML-Element zu rendern.
PWA ist eine Funktion, mit der die React-Anwendung offline funktioniert, aber da sie standardmäßig deaktiviert ist, müssen Sie sie am Anfang nicht lernen. Es ist besser, PWA zu lernen, nachdem Sie sich sicher genug sind, React-Benutzeroberflächen zu erstellen.
  
Abschluss
Das Tolle an React ist, dass es im Gegensatz zu anderen Web-Frameworks keine fremde Abstraktionsschicht über JavaScript hinzufügt. Deshalb wird React bei JS-Entwicklern sehr beliebt. Es verwendet einfach das Beste von JavaScript, um das Erstellen von Benutzeroberflächen einfacher und wartbarer zu machen. In einer React-Anwendung steckt wirklich mehr JavaScript als die React-spezifische Syntax. Sobald Sie also JavaScript besser verstehen – insbesondere ES6 – können Sie eine React-Anwendung mit Zuversicht schreiben. Dies bedeutet jedoch nicht, dass Sie alles über JavaScript beherrschen müssen, um mit dem Schreiben der React-App zu beginnen. Gehen Sie und schreiben Sie jetzt einen, und wenn sich Gelegenheiten ergeben, werden Sie ein besserer Entwickler.
Vielen Dank fürs Lesen und ich hoffe, Sie haben einige neue Dinge gelernt:
 #javascript #reactjs

JavaScript-Grundlagen, bevor Sie React lernen