ReactJS-Tutorial für Anfänger

Was ist ReactJS?

ReactJS ist ein Open-Source-Frontend JavaSkriptbibliothek 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 einseitiger Websites und mobiler Anwendungen verwendet. Es ist sehr benutzerfreundlich 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 ein virtuelles DOM, also einen Datenstruktur-Cache im Arbeitsspeicher. Nur die endgültigen Änderungen des DOM werden später im DOM des Browsers aktualisiert.

Javascript Ausdrücke: JS-Ausdrücke können in den jsx-Dateien mit geschweiften Klammern verwendet werden, 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 zur Erklärung des folgenden Bildes.

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:

Wir werden im nächsten Kapitel auf die Details des Codes eingehen und uns die Arbeit hier mit CDN-Dateien ansehen. Es wird gesagt, dass die direkte Verwendung eines Babel-Skripts keine gute Praxis ist und Neulinge es vorerst einfach verwenden können, um ReactJS zu lernen. In der Produktion müssen Sie React mithilfe des NPM-Pakets 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 werden die Details dazu im nächsten Kapitel erklären. Wir wollen anzeigen 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>

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 den folgenden Befehl aus:

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:

Was ist JSX?

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

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 in geschweiften Klammern {} verwendet und 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.

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:

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:

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.

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:

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 Attributdetails, 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 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:

Ü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 die folgenden Phasen:

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. Im Montagezustand sind wir den folgenden Methoden ausgesetzt.

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 das DOM von einem Benutzer interagiert und aktualisiert. Wenn Sie beispielsweise etwas in das Textfeld eingeben, werden die Zustandseigenschaften aktualisiert.

Die folgenden Methoden sind im Aktualisierungsstatus verfügbar:

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.

Die folgenden Methoden sind im Unmount-Zustand verfügbar:

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

In der Browserkonsole erhalten Sie:

Wenn der Benutzer in das Textfeld eingibt:

In der Konsole werden folgende Meldungen angezeigt:

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 das Textfeld und die Schaltfläche „Senden“ verwendet. Wenn der Benutzer etwas in das Textfeld eingibt, wird das Ereignis onChange 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:

Schritt 1) Geben Sie Ihren Namen in das Textfeld ein:

Klicken Sie auf die Schaltfläche Senden

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 dem Textfeld und der Schaltfläche. Wenn der Benutzer in das Textfeld eingibt, 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:

Wenn ein Benutzer den Namen eingibt:

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

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:

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 enthält die Klassendetails. Lassen Sie uns nun im Browser testen.

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

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

Zusammenfassung

ReactJS ist ein Open-Source-Frontend JavaSkriptbibliothek zum Erstellen der Benutzeroberfläche. Sie wird von Facebook verwaltet und heute von vielen Unternehmen zur 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)

Was ist ReactJS?

Funktionen von ReactJS

Vorteile von ReactJS

Nachteile von ReactJS

Verwenden von ReactJS von CDN

Für Entwickler

Für Prod

ÄHNLICHE ARTIKEL

Verwendung von NPM-Paketen

So erstellen Sie Ihr erstes React-Projekt-Setup

Was ist JSX?

Warum brauchen wir JSX in React?

Ausdrücke in JSX

Was sind Komponenten in ReactJS?

Komponenten als Funktionen

Klasse als Komponente

Was ist ein Zustand in ReactJS?

Beispiel für einen Staat

Was sind Requisiten in ReactJS?

Requisiten zur Funktionskomponente

Requisiten zur Klassenkomponente

Lebenszyklus einer Komponente

Arbeitsbeispiel

Arbeiten mit Formularen

Arbeiten mit Ereignissen in ReactJS

Arbeiten mit Inline-CSS in ReactJS

Arbeiten mit externem CSS in ReactJS

Zusammenfassung

Melden Sie sich für den Newsletter an