Ein Leitfaden für Anfänger React Requisiten [mit Syntax]

React ist eine MIT-lizenzierte Open-Source-JavaScript-Bibliothek, die zum Entwerfen interaktiver Benutzeroberflächen für Anwendungen verwendet wird. Es ist eine komponentenbasierte deklarative, flexible und effiziente Bibliothek, die das Leben von Entwicklern erleichtert. Da es sich um eine komponentenbasierte Bibliothek handelt, unterteilt sie die Benutzeroberfläche in mehrere einzelne Teile, die als Komponenten bezeichnet werden. Diese Komponenten müssen miteinander kommunizieren, um richtig zu funktionieren, und dann kommen die React-Requisiten ins Spiel.

Was sind React Props?

Das Wort „Props“ ist ein Schlüsselwort in der React-Bibliothek, das Eigenschaften bedeutet. Sie werden in React-Komponenten manchmal auch als globale Variable oder Objekt bezeichnet. React Props ähneln Argumenten in HTML. Einige erwähnenswerte Dinge bei React-Requisiten sind, dass sie immer in eine Richtung fließen und die darin enthaltenen Daten schreibgeschützt sind. Dadurch sind sie unveränderlich, was bedeutet, dass die Daten, die von einer Komponente fließen, in der anderen nicht geändert werden können. Wir können dies am Beispiel einer reinen und einer unreinen Funktion verstehen.

Dies ist eine reine Funktion, da sie immer die gleiche Ausgabe für die gleichen Eingaben liefert:

Funktion prod(a, b) {

gib a * b zurück;

}

Dies ist eine unreine Funktion, da sie ihre eigene Eingabe manipuliert:

Funktion Einzahlung(Konto, Betrag){

account.total += Betrag;

}

Da React-Requisiten unveränderlich sind, müssen die Komponenten als reine Funktionen funktionieren. Das ist die einzige strenge Regel in der flexiblen React-Bibliothek.

Die Syntax zum Übergeben und Zugreifen auf React Props

Wie bereits erwähnt, ähneln React-Props HTML-Argumenten, und daher können wir zum Übergeben oder Hinzufügen von Props zu einer Komponente ähnlich wie beim Übergeben von HTML-Attributen vorgehen.

Syntax:

<Komponentenname Requisitenname = „Wert“ />

In der obigen Syntax ist „ Komponentenname“ der Name der Komponente, an die wir Props übergeben müssen, Props_Name ist der Name der Props und Wert ist der Props-Wert.

Wir können auf alle Requisiten innerhalb der Klasse der Komponente zugreifen.

Syntax:

this.props .props_name;

In der obigen Syntax ist this.props ein globales Objekt, das für den Zugriff auf alle Props innerhalb der Klasse der Komponente verwendet wird, und der props_name ist der Name der React-Props, auf die wir zugreifen möchten.

Lesen Sie: JavaScript vs. JQuery: Unterschied zwischen JavaScript und JQuery

Wie benutzt man React Requisiten?

Es gibt zwei verschiedene Möglichkeiten, unveränderliche React-Requisitendaten in einer beliebigen Komponente zu verwenden. Diese beiden Möglichkeiten sind das Hinzufügen von Requisiten zur Funktion „reactDom.render()“ in der Hauptdatei oder das Hinzufügen von Daten als Standard-Requisiten in der Komponente selbst. So verwenden Sie React-Requisiten auf beide Arten:

Verwenden von React-Requisiten aus der Funktion „react.Dom.render()“.

Zuerst müssen wir Requisiten in der Komponentendatei hinzufügen.

Reagieren von 'Reagieren' importieren; // Importieren der React-Bibliothek

Klassenbeispiel erweitert React.component { /* Beispiel ist der Komponentenname, der die Eigenschaften der React-Komponentenklasse erweitert */

rendern() {

Rückkehr (

<div>

<h2>{dies.props. firstProp } in h2</h2>

<h3>{dies, Requisiten. secondProp } in h3</h3>

</div>

);

}

}

export default Beispiel; // Exportieren der Komponente

Jetzt müssen wir Requisiten über die Funktion „reactDom.render()“ in der Hauptdatei einen Wert hinzufügen und von dort aus darauf zugreifen.

Reagieren von 'Reagieren' importieren;

importiere ReactDom aus 'react-dom';

Beispiel aus './Example.jsx' importieren ;

ReactDom.render(< Beispiel firstProp = „Dies ist die ersteProp “ secondProp = „Dies ist die zweiteProp “/>, document.getElementById('example'));

export default Beispiel;

Ergebnisse:

Dies ist die erste Stütze in h2

Dies ist die zweite Stütze in h3

Verwenden von React-Requisiten mit Standard-Requisiten im Komponentenkonstruktor

Fügen Sie Requisiten und ihre Werte in der Komponentendatei hinzu.

Reagieren von 'Reagieren' importieren; // Importieren der React-Bibliothek

Klassenbeispiel erweitert React.component { /* Beispiel ist der Komponentenname, der die Eigenschaften der React-Komponentenklasse erweitert */

rendern() {

Rückkehr (

<div>

<h2>{dies.props. firstProp }</h2>

<h3>{dies, Requisiten. secondProp }</h3>

</div>

);

}

}

Beispiel .deafultProps = {

firstProp : „Das ist die firstProp “,

secondProp : „Dies ist die secondProp “

}

export default Beispiel; // Exportieren der Komponente

Zugriff auf die React-Requisiten aus der Hauptdatei.

Reagieren von 'Reagieren' importieren;

importiere ReactDom aus 'react-dom';

Beispiel aus './Example.jsx' importieren ;

ReactDom.render(< Beispiel />, document.getElementById('Beispiel'));

Die Ausgaben dafür ähneln der Verwendung der Funktion „reactDom.render()“, außer dass dies diesmal mit Hilfe von Standardprops erfolgt.

Check out: Vue vs React: Unterschied zwischen Vue und React

So übergeben Sie React Props von einer Komponente an eine andere

Die Hauptanwendung von React-Props besteht darin, Daten zwischen Komponenten in React zu übertragen. Das folgende Beispiel hilft uns zu verstehen, wie Daten weitergegeben werden.

Reagieren von 'Reagieren' importieren;

Klasse Fruit erweitert React.Component {

rendern() {

return <h4>Ich bin {this.props. name } in h4</h4>

}

}

Klasse Question erweitert React.Component {

rendern() {

Rückkehr (

<div>

<h3>Welche Frucht bist du? In h3</h3>

< Fruchtname = „Mango“ / > //Requisiten erstellen und einen Wert zuweisen

</div>

);

}

}

ReactDom.render(<Frage />, document.getElementById('fruit'));

Dies ergibt die folgende Ausgabe:

Welche Frucht bist du? In h3

Ich bin Mango in h4

Zustand und Requisiten zusammen verwenden

Wie wir alle wissen, ist React eine dynamische Sprache, und ihre Flexibilität ist ihr Alleinstellungsmerkmal. Daher reicht die alleinige Verwendung von React-Requisiten bei der Entwicklung von Anwendungen nicht aus. Dieses Problem wird mit Hilfe des Staates gelöst. Der Status ist eine weitere React-Funktion, die zum Verwalten von Daten verwendet wird. Sehen wir uns an, wie wir React-Props und -State kombinieren können, um unsere Anwendung interaktiver und dynamischer zu gestalten.

Reagieren von 'Reagieren' importieren;

Klasse Auto erweitert React.Component {

Konstruktor (Requisiten) {

Super (Requisiten);

this.state = {

firstCar: „Das ist ein Mercedes-Benz! In h2”, //Wert dem Zustand zuweisen

secondCar: „Das ist ein BMW! In h3“ // dem Zustand einen Wert zuweisen

}

}

rendern() {

Rückkehr (

<div>

<FirstCar firstProp = {this.state.firstCar}/> //Requisiten einen Wert zuweisen

<SecondCar secondProp = {this.state.secondCar}/> //Zuweisen von Werten zu Requisiten

</div>

);

}

}

Klasse FirstCar erweitert React.Component {

rendern() {

Rückkehr (

<div>

<h2>{this.props.firstProp}</h2>

</div>

);

}

}

Klasse SecondCar erweitert React.Component {

rendern() {

Rückkehr (

<div>

<h3>{this.props.secondProp}</h3>

</div>

);

}

}

Standard-Export Auto;

Jetzt müssen wir auf Daten aus der Hauptdatei zugreifen.

Reagieren von 'Reagieren' importieren;

importiere ReactDOM aus 'react-dom';

Auto aus './Car.jsx' importieren;

ReactDOM.render(<Auto />, document.getElementById('car'));

Das Ergebnis:

Das ist ein Mercedes-Benz! In h2

Das ist ein BMW! In h3

Lesen Sie auch: Unterschied zwischen Node JS und React JS

Zusammenfassend

Die Kombination aus beiden React-Props und dem Status zum Verwalten von Daten in React macht es zu einer der nützlichsten JavaScript-Bibliotheken. Es gibt Unmengen von React-Projektideen da draußen, und nur die Entwickler können sie zum Leben erwecken. Daher gibt es eine hervorragende Nachfrage nach ReactJS-Entwicklern und eine Erhöhung ihres Gehalts .

Wenn Sie die Idee begeistert, Unternehmen bei der Erstellung von Anwendungen zu helfen und an zahlreichen React-Projekten zu arbeiten, um ein riesiges Einkommen zu erzielen, dann ist es an der Zeit, Maßnahmen zu ergreifen, bevor es zu spät ist. Sie können an den von upGrad angebotenen Online-Kursen teilnehmen , um alles über React zu lernen und ein Full-Stack-Softwareentwickler zu werden.

Wenn Sie mehr über React, Full-Stack-Entwicklung erfahren möchten, schauen Sie sich das PG-Diplom in Full-Stack-Softwareentwicklung von upGrad & IIIT-B an, das für Berufstätige konzipiert ist und mehr als 500 Stunden strenge Schulungen, 9+ Projekte, und Aufgaben, IIIT-B-Alumni-Status, praktische praktische Abschlussprojekte und Arbeitsunterstützung bei Top-Unternehmen.