ReactJS-Tutorial für Anfänger: Lernen Sie anhand eines Schritt-für-Schritt-Beispiels

Was ist ReactJS?

ReactJS ist eine Open-Source-Frontend-JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. ReactJS wird von Facebook und einer Community aus einzelnen Entwicklern und Unternehmen gepflegt. Es wird häufig als Grundlage für die Erstellung von Single-Page-Websites und mobilen Anwendungen verwendet. Es ist sehr einfach zu verwenden und ermöglicht Benutzern die Erstellung wiederverwendbarer UI-Komponenten.

Funktionen von ReactJS

JSX: JSX ist eine Erweiterung für Javascript. Obwohl die Verwendung von JSX in React nicht zwingend erforderlich ist, ist es eine der guten Funktionen und einfach zu verwenden.

Komponenten: Komponenten sind wie reine Javascript-Funktionen, die den Code vereinfachen, indem sie die Logik in wiederverwendbaren unabhängigen Code aufteilen. Wir können Komponenten als Funktionen und Komponenten als Klassen verwenden. Komponenten haben auch einen Zustand, Requisiten, die das Leben einfacher machen. Innerhalb einer Klasse wird der Zustand jedes einzelnen Requisiten beibehalten.

Virtuelles DOM: React erstellt einen virtuellen Dom, also einen In-Memory-Datenstruktur-Cache. Nur die letzten Änderungen von DOM later im Browser-DOM aktualisiert.

Javascript-Ausdrücke: JS-Ausdrücke können mit curly in den jsx-Dateien verwendet werden brackets, Zum Beispiel {}.

Vorteile von ReactJS

Hier sind wichtige Vor- und Vorteile der Verwendung von ReactJS:

  • ReactJS verwendet einen virtuellen Dom, der den In-Memory-Datenstruktur-Cache nutzt, und nur die letzten Änderungen werden im Browser-Dom aktualisiert. Dadurch wird die App schneller.
  • Sie können Komponenten Ihrer Wahl erstellen, indem Sie die Funktion „Reaktionskomponenten“ verwenden. Die Komponenten können wiederverwendet werden und sind auch hilfreich bei der Codepflege.
  • Reactjs ist eine Open-Source-Javascript-Bibliothek, daher ist der Einstieg einfach.
  • ReactJS ist in kurzer Zeit sehr beliebt geworden und wird von Facebook und Instagram gepflegt. Es wird von vielen bekannten Unternehmen wie Apple, Netflix, usw.
  • Facebook verwaltet ReactJS, die Bibliothek, sodass sie gut gepflegt und auf dem neuesten Stand gehalten wird.
  • Mit ReactJS kann eine umfassende Benutzeroberfläche sowohl für Desktop- als auch für mobile Apps entwickelt werden.
  • Einfach zu debuggen und zu testen, da der Großteil der Codierung in erfolgt Javascript statt auf HTML.

Nachteile von ReactJS

Hier sind die Vor- und Nachteile der Verwendung von ReactJS:

  • Der größte Teil des Codes ist in JSX geschrieben, dh HTML und CSS sind Teil von Javascript. Dies kann ziemlich verwirrend sein, da die meisten anderen Frameworks es vorziehen, HTML vom Javascript-Code getrennt zu halten.
  • Die Dateigröße von ReactJS ist groß.

Verwenden von ReactJS von CDN

Um mit React arbeiten zu können, müssen wir zunächst ReactJS installieren. Sie können ganz einfach mit der Verwendung von ReactJS beginnen, indem Sie die CDN-Javascript-Dateien verwenden, wie unten gezeigt.

Gehen Sie zur offiziellen Website von ReactJS, um die CDN-Links zu erhalten, d. h. https://reactjs.org/docs/cdn-links.html und Sie erhalten die erforderlichen Dateien, um das Folgende zu erklärenwing Bild.

Verwenden von ReactJS von CDN

Für Entwickler

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Für Prod

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>		
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>		

Ersetzen Version mit der neuesten React-Version für „react-development.js“ und „react-dom.developement.js“. Sie können die Dateien bei Ihnen hosten, um mit der Arbeit mit ReactJS zu beginnen.

Falls Sie planen, die CDN-Dateien zu verwenden, achten Sie darauf, das Cross-Origin-Attribut beizubehalten, um domänenübergreifende Probleme zu vermeiden. ReactJS-Code kann nicht direkt im Browser ausgeführt werden und muss vor der Ausführung im Browser mithilfe von Babel in Javascript umgewandelt werden.

Hier ist das BabelJS-Skript, das verwendet werden kann:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Hier ist das funktionierende ReactJS-Beispiel mit CDN-Dateien und BabelJS-Skript.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>   
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

Ausgang:

Für die Produktausgabe

Wir kommen ins Details des Codes im nächsten Kapitel sehen wir uns hier die Arbeit mit CDN-Dateien an. Es wird gesagt, dass die direkte Verwendung von Babel-Skripten keine gute Praxis ist und Neulinge es vorerst nur zum Erlernen von ReactJS verwenden können. In der Produktion müssen Sie React mit dem NPM-Paket installieren.

Verwendung von NPM-Paketen

Stellen Sie sicher, dass Sie NodeJS installiert haben. Wenn nicht installiert, lesen Sie dieses Tutorial für NodeJS durch (https://www.guru99.com/node-js-tutorial.html) Installation.

Sobald Sie nodejs installiert haben, erstellen Sie einen Ordner Reaktionsprojekt/.

Um mit der Projekteinrichtung zu beginnen, führen Sie den Befehl aus npm-Init.

So sieht die Ordnerstruktur aus:

reactproj\
package.json   

Jetzt installieren wir die Pakete, die wir benötigen.

Hier ist die Liste der Pakete für ReactJS:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

Öffnen Sie die Eingabeaufforderung und führen Sie die oben genannten Befehle im Ordner „reactproj/“ aus.

Erstellen Sie einen Ordner src / wo der gesamte js-Code in diesem Ordner abgelegt wird. Der gesamte Code für das ReactJS-Projekt ist im Ordner src/ verfügbar. Erstellen Sie eine Datei „index.js“ und fügen Sie „Import React“ und „React-Dom“ hinzu, wie unten gezeigt.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Wir haben den Basiscode für ReactJS zurückgegeben. Wir erklären Ihnen das details davon im nächsten Kapitel. Wir wollen zeigen Hallo, von Guru99 Tutorials und das Gleiche wird dem dom-Element mit der ID „root“ gegeben. Es wird aus der Datei index.html entnommen, die die Startdatei ist, wie unten gezeigt.

Erstellen Sie einen Ordner public/ und fügen Sie dort index.html hinzu, wie unten gezeigt

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Das Paket „react-scripts“ kümmert sich um die Kompilierung des Codes und das Starten des Servers zur Anzeige der HTML-Datei, d. h. index.html. Sie müssen den Befehl in package.json hinzufügen, der dafür sorgt, dass React-Scripts verwendet werden, um den Code zu kompilieren und den Server zu starten, wie unten gezeigt:

 "scripts": {
    "start": "react-scripts start" 
  }

Nach der Installation aller Pakete und dem Hinzufügen des obigen Befehls lautet die endgültige package.json wie folgt:

Paket.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Um mit dem Testen von ReactJS zu beginnen, führen Sie den Befehl aus

npm run start
C:\reactproj>npm run start		
> reactproj@1.0.0 start C:\reactproj		
> react-scripts start	

Der Browser wird mit der URL geöffnet http://localhost:3000/ wie unten dargestellt:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Verwendung von NPM-Paketen

Wir werden den gleichen Prozess auch in den nächsten Kapiteln verwenden, um die Javascript-Dateien auszuführen. Fügen Sie alle Ihre js- und .jsx-Dateien im Ordner src/ hinzu. Die Dateistruktur sieht wie folgt aus:

reatproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

So erstellen Sie Ihr erstes React-Projekt-Setup

Hier finden Sie eine Schritt-für-Schritt-Anleitung in diesem ReactJS-Tutorial, um mit der ersten React-Anwendung zu beginnen.

Schritt 1) Importieren Sie die Reaktionspakete.
1. Um mit ReactJS zu beginnen, müssen wir zunächst die Reaktionspakete wie folgt importieren.

import React from 'react';	
import ReactDOM from 'react-dom';	

2. Speichern Sie die Datei als index.js im Ordner src/

Schritt 2) Schreiben Sie einfachen Code.
Wir werden in diesem Tutorial React JS einen einfachen Code schreiben, in dem wir die Nachricht anzeigen „Hallo, von Guru99 Tutorials!“

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render werde das hinzufügen Tag zum Element mit der ID root. Hier ist die HTML-Datei, die wir haben:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Schritt 3) Kompilieren Sie den Code.

Als nächstes müssen wir in diesem React.js-Tutorial den Code kompilieren, um die Ausgabe im Browser zu erhalten.

Hier ist die Ordnerstruktur:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Wir haben die Befehle zum Kompilieren der endgültigen Datei in package.json wie folgt hinzugefügt:

"scripts": {
    "start": "react-scripts start"
  },

Um die endgültige Datei zu kompilieren, führen Sie Folgendes auswing Befehl:

npm run start

Wenn Sie den obigen Befehl ausführen, werden die Dateien kompiliert und Sie werden benachrichtigt, wenn ein Fehler auftritt. Wenn alles gut aussieht, wird der Browser geöffnet und die Datei index.html ausgeführt http://localhost:3000/index.html

Befehl: npm run start:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Schritt 4) Überprüfen Sie die Ausgabe.
Die URL http://localhost:3000 wird im Browser geöffnet, sobald der Code wie unten gezeigt kompiliert wurde:

Ausgabe des First React-Projekts

Was ist JSX?

JSX ist eine Erweiterung für Javascript. Es handelt sich um ein Vorlagenskript, mit dem Sie HTML und Javascript gemeinsam verwenden können.

Hier ist ein einfaches Beispiel für einen JSX-Code.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";		

Warum brauchen wir JSX in React?

Für eine Benutzeroberfläche benötigen wir HTML, und jedes Element im Dom verfügt über zu verarbeitende Ereignisse, Zustandsänderungen usw.

Im Fall von React können wir HTML und Javascript in derselben Datei verwenden und die Statusänderungen im Dom auf effiziente Weise verwalten.

Ausdrücke in JSX

Hier ist ein einfaches Beispiel für die Verwendung von Ausdrücken in JSX.

In früheren ReactJS-Beispielen hatten wir etwa Folgendes geschrieben:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Wir werden nun den obigen Code ändern, um Ausdrücke hinzuzufügen. Ausdrücke werden innerhalb von Curly verwendet brackets {}, und sie werden während der Laufzeit erweitert. Ausdrücke in React sind dieselben wie Javascript-Ausdrücke.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
); 

Lassen Sie uns nun dasselbe im Browser testen.

Ausdrücke in der JSX-Ausgabe

Sie können sehen, dass der Ausdruck {display} nicht ersetzt wird. React weiß nicht, was zu tun ist, wenn ein Ausdruck in der .js-Datei verwendet wird.

Lassen Sie uns nun Änderungen hinzufügen und eine .jsx-Datei erstellen, wie unten gezeigt:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Wir haben den erforderlichen Code hinzugefügt und werden die Datei text.jsx in index.js verwenden. Wir wollen das h1tag Variable, die in script.js verwendet werden soll, sodass dieselbe wie oben gezeigt in test.jsx exportiert wird

Hier ist der geänderte Code in index.js

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);


Um test.jsx in index.js zu verwenden, müssen wir es zuerst wie unten gezeigt importieren:

import h1tag from './test.jsx';

Wir können den h1tag jetzt im ReactDOM.render verwenden, wie unten gezeigt:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Hier ist die Ausgabe, wenn wir dasselbe im Browser überprüfen:

Output

Was sind Komponenten in ReactJS?

Komponenten sind wie reine Javascript-Funktionen, die den Code vereinfachen, indem sie die Logik in wiederverwendbaren unabhängigen Code aufteilen.

Komponenten als Funktionen

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
} 
const Hello_comp = <Hello />;
export default Hello_comp;


Wir haben eine Funktion namens erstellt Hallo das wie oben gezeigt das h1-Tag zurückgegeben hat. Der Name der Funktion fungiert als Element, wie unten gezeigt:

const Hello_comp = <Hello />;
export default Hello_comp;

Die Komponente Hallo wird als HTML-Tag verwendet, d. h. und zugeordnet Hallo_comp Variable und das Gleiche wird mit export exportiert.

Lassen Sie uns nun diese Komponente in der Datei index.js verwenden, wie unten gezeigt:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Hier ist die Ausgabe im Browser:

Ausgabe von Komponenten in ReactJS

Klasse als Komponente

Hier ist ein ReactJS-Beispiel, das eine Klasse als Komponente verwendet.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React. Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Wir können die Hello-Komponente in der Datei index.js wie folgt verwenden:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
); 

Die Komponente Hello wird als HTML-Tag verwendet, d. h. .

Hier ist die Ausgabe desselben.

Klasse als Komponentenausgabe

Was ist ein Zustand in ReactJS?

Ein Status ist ein Javascript-Objekt, das Requisiten ähnelt und Daten enthält, die mit dem ReactJS-Rendering verwendet werden sollen. Die Statusdaten sind ein privates Objekt und werden innerhalb von Komponenten innerhalb einer Klasse verwendet.

Beispiel für einen Staat

Hier ist ein funktionierendes Beispiel für die Verwendung des Status innerhalb einer Klasse.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
); 

Das bekommen wir, wenn wir es im Browser testen:

Status in der ReactJS-Ausgabe

Was sind Requisiten in ReactJS?

Requisiten sind Eigenschaften, die innerhalb einer Komponente verwendet werden sollen. Sie fungieren als globale Objekte oder Variablen, die innerhalb der Komponente verwendet werden können.

Requisiten zur Funktionskomponente

Hier ist ein Beispiel für die Übergabe von Requisiten an eine Funktionskomponente.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Wie oben gezeigt, haben wir hinzugefügt msg zuschreiben Komponente. Auf das Gleiche kann zugegriffen werden als Hilfsmittel Innerhalb der Hello-Funktion handelt es sich um ein Objekt, das Folgendes haben wird msg Attribut details, und dasselbe wird als Ausdruck verwendet.

Die Komponente wird in index.js wie folgt verwendet:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
); 

Hier ist die Ausgabe im Browser:

Requisiten für die Ausgabe von Funktionskomponenten

Requisiten zur Klassenkomponente

Um auf die Requisiten in einer Klasse zuzugreifen, können wir wie folgt vorgehen:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

Der msg Das Attribut wird wie folgt an die Komponente in index.js übergeben:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
); 

Dies ist die Ausgabe im Browser:

Requisiten für die Ausgabe von Klassenkomponenten

Überprüfen Sie auch: - AngularJS-Tutorial für Anfänger: Lernen Sie AngularJS Schritt für Schritt

Lebenszyklus einer Komponente

Der Lebenszyklus einer Komponente ist in die Phasen Initialisierung, Montage, Aktualisierung und Unmountung unterteilt.

Hier finden Sie eine detaillierte Erklärung zu jeder Komponente.

Eine Komponente in ReactJS hat Folgendeswing Stufen:

Initialisierung: Dies ist die erste Phase des Komponentenlebenszyklus.

Hier werden die Standard-Requisiten und der Status auf der Anfangsebene angezeigt.

Montage: In dieser Phase wird die Komponente innerhalb des Doms gerendert. Wir haben Kontakt zu Followernwing Methoden im Montagezustand.

  • ComponentDidMount(): Dies wird auch aufgerufen, wenn die Komponente gerade zum Dom hinzugefügt wird.
  • render(): Sie haben diese Methode für alle erstellten Komponenten. Es gibt den HTML-Knoten zurück.

Aktualisierung: In diesem Zustand wird der Dom von einem Benutzer interagiert und aktualisiert. Sie geben beispielsweise etwas in den Text einbox, sodass die Zustandseigenschaften aktualisiert werden.

Following sind die im Update-Status verfügbaren Methoden:

  • ShouldComponentUpdate(): wird aufgerufen, wenn die Komponente aktualisiert wird.
  • ComponentDidUpdate(): nachdem die Komponente aktualisiert wurde.

Demontage: Dieser Zustand tritt ins Spiel, wenn die Komponente nicht benötigt oder entfernt wird.

Following sind die Methoden, die im Unmount-Zustand verfügbar sind:

Komponente willUnmount(): wird aufgerufen, wenn die Komponente entfernt oder zerstört wird.

Arbeitsbeispiel

Hier ist ein Arbeitsbeispiel, das die in jedem Zustand aufgerufenen Methoden zeigt.

Beispiel: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }
  
  componentDidMount() {  
    console.log('Mounting State : calling method componentDidMount');
  }   
 
  shouldComponentUpdate() {  
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }  

  componentDidUpdate() {  
    console.log('Update  State : calling method componentDidUpdate')  
  }  
  componentWillUnmount() {  
    console.log('UnMounting State : calling method componentWillUnmount');
  }  

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
); 

Wenn Sie die Ausgabe im Browser überprüfen

Output

In der Browserkonsole erhalten Sie:

Ausgabe der Browserkonsole

Wenn der Benutzer den Text eingibtbox:

Ausgabe der Benutzerwerte

In der Konsole folgenwing Meldungen werden angezeigt:

Konsolenausgabe

Arbeiten mit Formularen

In ReactJS HTML-Eingabeelemente wie , und <select /> haben ihren eigenen Status und müssen aktualisiert werden, wenn der Benutzer mit der setState()-Methode interagiert.

In diesem Kapitel erfahren Sie, wie Sie mit Formularen in ReactJS arbeiten.

Hier ist ein funktionierendes Beispiel:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Für die Eingabefelder müssen wir den Status beibehalten, daher stellt React eine spezielle Methode namens bereit setState, Dies hilft, den Zustand bei jeder Änderung aufrechtzuerhalten.

Wir haben die Ereignisse onChange und onClick für den Text verwendetbox und Senden-Button. Wenn der Benutzer den Text eingibtbox Das Ereignis onChange wird aufgerufen und das Namensfeld im Statusobjekt state wird wie unten gezeigt aktualisiert:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
); 

Die Ausgabe im Browser sieht wie folgt aus:

Arbeiten mit der Formularausgabe

Schritt 1) ​​Geben Sie Ihren Namen in den Text einbox:

Arbeiten mit der Formularausgabe

  1. Klicken Sie auf die Schaltfläche Senden

Arbeiten mit der Formularausgabe

Arbeiten mit Ereignissen in ReactJS

Die Arbeit mit Ereignissen in ReactJS erfolgt genauso wie in Javascript. Sie können alle Event-Handler verwenden, die in Javascript verwendet werden. Die Methode setState() wird verwendet, um den Status zu aktualisieren, wenn der Benutzer mit einem beliebigen HTML-Element interagiert.

Hier ist ein funktionierendes Beispiel für die Verwendung von Ereignissen in ReactJS.

events.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Für die Eingabefelder müssen wir den Status beibehalten, daher stellt React eine spezielle Methode namens bereit setState, Dies hilft, den Zustand bei jeder Änderung aufrechtzuerhalten.

Wir haben Veranstaltungen genutzt onChange und onClick auf den Textbox und Knopf. Wenn der Benutzer den Text eingibtbox onChange Das Ereignis wird aufgerufen und das Namensfeld im Statusobjekt „state“ wird wie unten gezeigt aktualisiert:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
); 

Hier ist die Ausgabe im Browser:

Arbeiten mit der Ereignisausgabe

Wenn ein Benutzer den Namen eingibt:

Arbeiten mit der Ereignisausgabe

Wenn der Benutzer auf die Schaltfläche „Hier klicken“ klickt:

Arbeiten mit der Ereignisausgabe

Arbeiten mit Inline-CSS in ReactJS

Schauen wir uns ein funktionierendes Beispiel an, um die Funktionsweise von Inline-CSS in ReactJS zu verstehen.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};
  
function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Ich habe dem h1-Tag den Stil color: 'red' hinzugefügt.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Die Ausgabe im Browser sieht wie folgt aus:

Arbeiten mit der Inline-CSS-Ausgabe

Sie können ein Objekt mit dem gewünschten Stil für das Element erstellen und einen Ausdruck verwenden, um Stil hinzuzufügen, wie im obigen Beispiel gezeigt.

Arbeiten mit externem CSS in ReactJS

Lassen Sie uns ein externes CSS erstellen, dazu einen Ordner css/ erstellen und style.css darin hinzufügen.

style.css

.h1tag {
color:red;
}

Fügen Sie die style.css zu Ihrer index.html-Datei hinzu

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head> 
  <body>
    <div id = "root"></div>
    <script src = "out/script.min.js"></script>
  </body>
</html>

Fügen wir nun die Klasse zum h1-Tag in der .jsx-Datei hinzu

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';
  
function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Das Attribut className erhält die Klasse details. Lassen Sie uns nun im Browser testen.

Arbeiten mit externer CSS-Ausgabe

Folgendes sehen Sie, wenn Sie das h1-Tag im Browser überprüfen:

Arbeiten mit externer CSS-Ausgabe

Sie können sehen, dass das class="h1tag" erfolgreich zum h1-Tag hinzugefügt wurde.

Zusammenfassung

  • ReactJS ist eine Open-Source-Frontend-JavaScript-Bibliothek zum Erstellen der Benutzeroberfläche. Es wird von Facebook gepflegt und heute von vielen Unternehmen für die UI-Entwicklung verwendet.
  • Zu den Kernfunktionen von ReactJS gehören JSX, Komponenten (funktionale Komponenten und klassenbasierte Komponenten), der Lebenszyklus einer Komponente, Requisiten und Statusunterstützung für eine Komponente sowie die Arbeit mit Javascript-Ausdrücken.
  • Die Projekteinrichtung von ReactJS wird anhand von CDN-Dateien und auch der Verwendung von npm-Paketen zum Erstellen des Projekts erläutert.
  • JSX ist eine Erweiterung für Javascript. Es handelt sich um ein Vorlagenskript, mit dem Sie HTML und Javascript zusammen verwenden können.
  • Komponenten sind wie reine Javascript-Funktionen, die den Code vereinfachen, indem sie die Logik in wiederverwendbaren unabhängigen Code aufteilen.
  • Ein Status ist ein Javascript-Objekt, das Requisiten ähnelt und Daten enthält, die mit dem ReactJS-Rendering verwendet werden sollen. Die Statusdaten sind ein privates Objekt und werden innerhalb von Komponenten innerhalb einer Klasse verwendet.
  • Requisiten sind Eigenschaften, die innerhalb einer Komponente verwendet werden sollen.
  • Der Lebenszyklus einer Komponente ist in die Phasen Initialisierung, Montage, Aktualisierung und Unmountung unterteilt.
  • In ReactJS-HTML-Eingabeelementen wie , und <select /> haben ihren eigenen Status und müssen aktualisiert werden, wenn der Benutzer mit der setState()-Methode interagiert.
  • Die Arbeit mit Ereignissen in ReactJS erfolgt genauso wie in Javascript. Sie können alle Event-Handler verwenden, die in Javascript verwendet werden. Die Methode setState() wird verwendet, um den Status zu aktualisieren, wenn der Benutzer mit einem beliebigen HTML-Element interagiert.
  • Mit ReactJS können Sie mithilfe von Javascript-Ausdrücken sowohl mit externem CSS als auch mit Inline-CSS arbeiten.

Überprüfen Sie auch: - Die 70 wichtigsten Fragen und Antworten zum React-Interview (aktualisiert)