Anfängerleitfaden für ReactJS

1.Was sind Requisiten in JSX?

Antwort: Requisiten sind eine spezielle Art von Schlüsselwort, das eigentlich für Eigenschaften steht und für eine spezielle Aufgabe verwendet wird, die als Datenübergabe zwischen Komponenten bezeichnet wird.

JSX- Requisiten können auf verschiedene Arten definiert werden:

1.JavaScript Expressions
2.String Literals
3.Props Default to “True”
4.Spread Attributes

Antwort: Wir verwenden JSX, um HTML-Elemente in JavaScript zu schreiben, ohne die Methoden createElement () und appendChild () zu verwenden, die wir im DOM platzieren können. Wir können JSX auch verwenden, um HTML-Tags in Reaktionselemente zu konvertieren. Es ist nicht unbedingt erforderlich, JSX zu verwenden. Wir verwenden JSX, um React-Anwendungen auf einfachere Weise zu schreiben.
Anstelle von normalem JavaScript verwendet React JSX für Vorlagenzwecke. Es ist nicht erforderlich, es zu verwenden. Im Folgenden sind jedoch einige Vorteile aufgeführt:

1.JSX works faster as it performs optimization during compiling code to JS.
2.JSX is a type-safe and it caught most of the errors at the time of compilation.
3.If someone has basic HTML ideas then he/she can easily write templates by using JSX.

Requisiten: this.props enthält ein Requisiten-Schlüsselwort, das vom Aufrufer dieser Komponente tatsächlich definiert wurde. Insbesondere ist this.props.children eine spezielle Art von Requisiten, die durch die untergeordneten Tags im JSX-Ausdruck und nicht im Tag selbst definiert wird.

Status : Der Status enthält für diese Komponente spezifische Daten, die sich im Laufe der Zeit ändern können. Der Status ist benutzerdefiniert und sollte ein einfaches JavaScript-Objekt sein.
Wenn ein Wert nicht für das Rendern oder den Datenfluss verwendet wird, müssen wir ihn nicht in den Status versetzen. Solche Werte können als Felder in der Komponenteninstanz definiert werden.
Mutieren Sie this.state niemals direkt, da das anschließende Aufrufen von setState () die von uns vorgenommene Mutation ersetzen kann. Behandle diesen Zustand so, als wäre er unveränderlich.

4. Fehlerbehandlungsmethoden.

Antwort: React unterstützt hauptsächlich zwei Arten von Fehlerbehandlungsmethoden in React. Diese Methoden werden im Fehlergrenzmechanismus verwendet.

1.static getDerivedStateFromError(error): This is a method that is useful for rendering a fallback UI after an error is thrown.
2.componentDidCatch(error, info): This is a useful method for logging the error information for debugging purposes.

Antwort: Lebenszyklusmethoden in Reacts sind eine Reihe von Ereignissen, die während des gesamten Lebens einer Reaktionskomponente von der Geburt bis zu ihrem Tod auftreten. Für jede React-Komponente muss ein Lebenszyklus von Ereignissen vorhanden sein. Wir können sie als eine Reihe von Zyklen von Geburt, Wachstum und Tod annehmen. Lebenszyklusmethoden werden in der anfänglichen Rendering- oder Re-Rendering-Phase ausgeführt. Beispiel : componentDidMount (), shouldComponentUpdate (), componentDidUpdate () usw.

6.Warum sind Unit-Tests erforderlich?

Antwort: Unit-Tests sind Testmethoden, mit denen überprüft wird, ob der Code ordnungsgemäß funktioniert oder nicht. Es ist eine großartige Möglichkeit, Regressionstests durchzuführen: Es ist ein Prozess, sie einfach auszuführen und etwas zu ändern, indem sichergestellt wird, dass nichts kaputt geht. Einen Fehler entdeckt? Beheben Sie das Problem und schreiben Sie einen Komponententest so, dass der Fehler beim nächsten Mal nicht auftritt.
Schreiben Sie zur Identifizierung wesentlicher Teile des Codes Komponententests, um sicherzustellen, dass der Code ordnungsgemäß funktioniert.

7.Was ist Browserify?
Antwort: Browserify in react ist ein Mechanismus zur Auswahl von JS-Modulen für den Browser. Browserify wird verwendet, um Code anzuordnen und Bibliotheken von Drittanbietern zu verwalten. Häufig wird das Veröffentlichen von Modulen auf npm, die sowohl im Knoten als auch im Browser mit browserify und vielen Paketen auf npm funktionieren sollen, zur Verwendung nur im Browser vorgeschlagen. npm ist für alles Javascript.

8.Was ist Babel?

Antwort: BabelJS ist ein JavaScript-Transpiler, der neue Funktionen in den alten Standard überträgt. Damit können die Funktionen problemlos in alten und neuen Browsern ausgeführt werden. Babel kann -

1.Transform Syntax.
2.Polyfill Features that are missing in your target environment.
3.Source code transformations.

Antwort: Innerhalb des React-Vorgangs werden verschiedene knifflige Techniken verwendet, um die Anzahl der kostspieligen DOM-Vorgänge zu minimieren, die zum Aktualisieren der Benutzeroberfläche erforderlich sind. Viele Anwendungen verwenden React für die schnellste Benutzeroberfläche, ohne viel Arbeit zu leisten, um die Leistung gezielt zu optimieren. Trotzdem kann die Reaktionsanwendung auf verschiedene Arten schneller erfolgen.
Verwenden des Produktions-Builds
Wenn Sie in Ihren React-Apps Benchmarking durchführen oder Leistungsprobleme feststellen, stellen Sie sicher, dass Sie mit dem minimierten Produktions-Build testen.
Standardmäßig enthält React viele hilfreiche Warnungen. Diese Warnungen sind in der Entwicklung sehr nützlich. Dadurch wird React jedoch größer und langsamer. Sie sollten daher sicherstellen, dass Sie die Produktionsversion verwenden, wenn Sie die App bereitstellen.

10.Warum nicht versuchen / fangen?
try / catch ist großartig, funktioniert aber nur für imperativen Code:

try {
 showButton();
 } catch (error) {
 // …
 }

Selbst wenn beispielsweise ein Fehler in einer componentDidUpdate-Methode auftritt, der durch einen setState irgendwo tief im Baum verursacht wird, wird er dennoch korrekt an die nächstgelegene Fehlergrenze weitergegeben.