ReactJS-tutorial voor beginners: leer met een stapsgewijs voorbeeld

Wat is ReactJS?

ReactJS is een open-source front-end JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces. ReactJS wordt onderhouden door Facebook en een gemeenschap van individuele ontwikkelaars en bedrijven. Het wordt veel gebruikt als basis bij het bouwen van websites met één pagina en mobiele applicaties. Het is heel gemakkelijk te gebruiken en stelt gebruikers in staat herbruikbare UI-componenten te maken.

Kenmerken van ReactJS

JSX: JSX is een uitbreiding op javascript. Hoewel het niet verplicht is om JSX in reactie te gebruiken, is het een van de goede functies en gemakkelijk te gebruiken.

COMPONENTEN: Componenten zijn als pure JavaScript-functies die de code helpen vereenvoudigen door de logica op te splitsen in herbruikbare, onafhankelijke code. We kunnen componenten gebruiken als functies en componenten als klassen. Componenten hebben ook een staat, rekwisieten die het leven gemakkelijk maken. Binnen een klasse wordt de status van elk rekwisiet bijgehouden.

Virtuele DOM: React creëert een virtuele dom, dat wil zeggen een datastructuurcache in het geheugen. Alleen de laatste wijzigingen van DOM hebben plaatsgevonden later bijgewerkt in de DOM van de browser.

JavaScript-expressies: JS-expressies kunnen in de jsx-bestanden worden gebruikt met behulp van curly brackets, Bijvoorbeeld {}.

Voordelen van ReactJS

Hier zijn belangrijke voordelen/voordelen van het gebruik van ReactJS:

  • ReactJS gebruikt een virtuele dom die gebruik maakt van de datastructuurcache in het geheugen, en alleen de laatste wijzigingen worden bijgewerkt in de dom van de browser. Hierdoor wordt de app sneller.
  • U kunt componenten naar keuze maken met behulp van de functie Reageercomponenten. De componenten kunnen worden hergebruikt en zijn ook nuttig bij het onderhoud van de code.
  • Reactjs is een open-source javascript-bibliotheek, dus het is gemakkelijk om mee te beginnen.
  • ReactJS is in korte tijd erg populair geworden en wordt onderhouden door Facebook en Instagram. Het wordt gebruikt door veel bekende bedrijven zoals Apple, Netflix, Etc.
  • Facebook onderhoudt ReactJS, de bibliotheek, dus deze wordt goed onderhouden en bijgewerkt.
  • ReactJS kan worden gebruikt om een ​​rijke gebruikersinterface te ontwikkelen voor zowel desktop- als mobiele apps.
  • Gemakkelijk te debuggen en te testen, omdat de meeste codering al is uitgevoerd Javascript in plaats van op HTML.

Nadelen van ReactJS

Hier zijn de nadelen/nadelen van het gebruik van ReactJS:

  • Het grootste deel van de code is geschreven in JSX, dat wil zeggen dat HTML en CSS deel uitmaken van JavaScript. Het kan behoorlijk verwarrend zijn omdat de meeste andere frameworks er de voorkeur aan geven HTML gescheiden te houden van de Javascript-code.
  • De bestandsgrootte van ReactJS is groot.

Gebruik ReactJS van CDN

Om met react te kunnen werken, moeten we eerst reactjs installeren. U kunt eenvoudig aan de slag met het gebruik van reactjs door de CDN javascript-bestanden te gebruiken, zoals hieronder weergegeven.

Ga naar de officiële site van reactjs om de CDN-links te krijgen, dat wil zeggen: https://reactjs.org/docs/cdn-links.html en je krijgt de vereiste bestanden om de volgende stappen uit te leggenwing afbeelding.

Gebruik ReactJS van CDN

Voor ontwikkelaar

<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>

Voor 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>		

vervangen versie met de nieuwste react-versie voor zowel react-development.js als react-dom.developement.js. U kunt de bestanden aan uw kant hosten om met reactjs te gaan werken.

Als u van plan bent de CDN-bestanden te gebruiken, zorg er dan voor dat u het cross-origin-attribuut behoudt om cross-domein problemen te voorkomen. Reactjs-code kan niet rechtstreeks in de browser worden uitgevoerd en moet met behulp van Babel naar JavaScript worden omgezet voordat deze in de browser wordt uitgevoerd.

Hier is het BabelJS-script dat kan worden gebruikt:

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

Hier is het werkende ReactJS-voorbeeld met behulp van cdn-bestanden en babeljs-script.

<!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>

Output:

Voor productuitvoer

We komen in de details van de code in het volgende hoofdstuk, laten we de werking hier met CDN-bestanden bekijken. Er wordt gezegd dat het rechtstreeks gebruiken van het babel-script geen goede gewoonte is, en dat nieuwkomers het voorlopig gewoon kunnen gebruiken om reactjs te leren. In productie moet u react installeren met het npm-pakket.

NPM-pakketten gebruiken

Zorg ervoor dat nodejs is geïnstalleerd. Indien nog niet geïnstalleerd, doorloop dan deze tutorial voor nodejs (https://www.guru99.com/node-js-tutorial.html) installatie.

Nadat u nodejs hebt geïnstalleerd, maakt u een map reageerproj/.

Voer opdracht uit om te beginnen met het instellen van het project npm begin.

Zo ziet de mappenstructuur eruit:

reactproj\
package.json   

Nu zullen we de pakketten installeren die we nodig hebben.

Hier is de lijst met pakketten voor reactjs:

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

Open de opdrachtprompt en voer bovenstaande opdrachten uit in de map reactproj/.

Maak een map src / waar alle js-code in die map komt. Alle code voor het reactjs-project zal beschikbaar zijn in de map src/. Maak een bestand index.js en voeg import react en react-dom toe, zoals hieronder weergegeven.

index.js

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

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

We hebben de basiscode voor reactjs geretourneerd. We zullen de de uitleggentails ervan in het volgende hoofdstuk. Wij willen weergeven Hallo, van Guru99-tutorials en hetzelfde wordt gegeven aan het dom-element met id “root”. Het is afkomstig uit het index.html-bestand, dat het startbestand is, zoals hieronder weergegeven.

Maak een map public/ en voeg daarin index.html toe, zoals hieronder weergegeven

index.html

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

Het pakket react-scripts zorgt voor het compileren van de code en het starten van de server om het html-bestand, dwz index.html, weer te geven. U moet de opdracht toevoegen in package.json die zorgt voor het gebruik van react-scripts om de code te compileren en de server te starten, zoals hieronder weergegeven:

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

Nadat alle pakketten zijn geïnstalleerd en de bovenstaande opdracht is toegevoegd, is het uiteindelijke pakket.json als volgt:

Pakket.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"
  }
}

Om te beginnen met het testen van reactjs voert u de opdracht uit

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

Er wordt een browser met URL geopend http://localhost:3000/ zoals hieronder aangegeven:

publiek/index.html

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

NPM-pakketten gebruiken

In de volgende hoofdstukken gaan we hetzelfde proces gebruiken om de javascript-bestanden uit te voeren. Voeg al uw js- en .jsx-bestanden toe aan de map src/. De bestandsstructuur zal als volgt zijn:

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

Hoe u uw eerste React-projectconfiguratie kunt maken

Hier is een stapsgewijze handleiding in deze ReactJS-tutorial om te beginnen met de eerste reactietoepassing.

Stap 1) Importeer de reactiepakketten.
1. Om met ReactJS te beginnen, moeten we eerst de reactiepakketten als volgt importeren.

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

2. Sla het bestand op als index.js in de map src/

Stap 2) Schrijf eenvoudige code.
In deze tutorial React JS zullen we een eenvoudige code schrijven, waarin we het bericht zullen weergeven “Hallo, uit de Guru99-tutorials!”

ReactDOM.render(

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

ReactDOM.render zal de toevoegen tag naar het element met id root. Hier is het HTML-bestand dat we hebben:

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

Stap 3) Compileer de code.

Vervolgens moeten we in deze React.js-zelfstudie de code compileren om de uitvoer in de browser te krijgen.

Hier is de mapstructuur:

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

We hebben de opdrachten toegevoegd om het uiteindelijke bestand in package.json als volgt te compileren:

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

Om het uiteindelijke bestand te compileren, voert u follo uitwing opdracht:

npm run start

Wanneer u bovenstaande opdracht uitvoert, worden de bestanden gecompileerd en wordt u op de hoogte gesteld als er een fout optreedt. Als alles er goed uitziet, wordt de browser geopend en wordt het index.html-bestand uitgevoerd op http://localhost:3000/index.html

Commando: npm run start:

C:\reactproj>npm run start

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

Stap 4) Controleer uitvoer.
De URL http://localhost:3000 wordt geopend in de browser zodra de code is gecompileerd, zoals hieronder weergegeven:

Output van het First React-project

Wat is JSX?

JSX is een uitbreiding op javascript. Het is een sjabloonscript waarmee u HTML en Javascript samen kunt gebruiken.

Hier is een eenvoudig voorbeeld van een JSX-code.

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

Waarom hebben we JSX nodig in React?

Voor een gebruikersinterface hebben we HTML nodig, en elk element in de dom heeft gebeurtenissen die moeten worden afgehandeld, statuswijzigingen, enz.

In het geval van React kunnen we HTML en javascript in hetzelfde bestand gebruiken en op een efficiënte manier de statusveranderingen in de dom verzorgen.

Expressies in JSX

Hier is een eenvoudig voorbeeld van het gebruik van expressies in JSX.

In eerdere ReactJS-voorbeelden hadden we zoiets geschreven als:

index.js

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

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

We zullen nu de bovenstaande code wijzigen om expressies toe te voegen. Uitdrukkingen worden binnen krullend gebruikt brackets {}, en ze worden tijdens runtime uitgebreid. Expressies in react zijn hetzelfde als JavaScript-expressies.

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')
); 

Laten we nu hetzelfde in de browser testen.

Expressies in JSX-uitvoer

U kunt zien dat de expressie {display} niet is vervangen. React weet niet wat hij moet doen als er een expressie wordt gebruikt in het .js-bestand.

Laten we nu wijzigingen toevoegen en een .jsx-bestand maken, zoals hieronder weergegeven:

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;

We hebben de vereiste code toegevoegd en gebruiken het bestand text.jsx in index.js.We willen de h1tag variabele die moet worden gebruikt in script.js, dus hetzelfde wordt geëxporteerd zoals hierboven weergegeven in test.jsx

Hier is de gewijzigde code in index.js

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

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


Om test.jsx in index.js te gebruiken, moeten we deze eerst importeren, zoals hieronder weergegeven:

import h1tag from './test.jsx';

We kunnen de h1tag nu gebruiken in de ReactDOM.render, zoals hieronder weergegeven:

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

Hier is de uitvoer als we hetzelfde in de browser controleren:

uitgang

Wat zijn componenten in ReactJS?

Componenten zijn als pure JavaScript-functies die de code helpen vereenvoudigen door de logica op te splitsen in herbruikbare, onafhankelijke code.

Componenten als functies

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;


We hebben een functie gemaakt met de naam Hallo die de h1-tag retourneerde, zoals hierboven weergegeven. De naam van de functie fungeert als een element, zoals hieronder weergegeven:

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

Het onderdeel Hallo wordt gebruikt als een HTML-tag, dat wil zeggen: en toegewezen aan Hallo_comp variabele en hetzelfde wordt geëxporteerd met behulp van export.

Laten we deze component nu gebruiken in het index.js-bestand, zoals hieronder weergegeven:

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 is de uitvoer in de browser:

Uitvoer van componenten in ReactJS

Klasse als onderdeel

Hier is een ReactJS-voorbeeld dat een klasse als component gebruikt.

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;

We kunnen de Hello-component in het index.js-bestand als volgt gebruiken:

index.js

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

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

De Component Hallo wordt gebruikt als een HTML-tag, dat wil zeggen: .

Hier is de uitvoer van hetzelfde.

Klasse als componentuitvoer

Wat is een staat in ReactJS?

Een status is een JavaScript-object dat lijkt op rekwisieten en die gegevens bevatten die moeten worden gebruikt bij de reactjs-weergave. De statusgegevens zijn een privéobject en worden gebruikt binnen componenten binnen een klasse.

Voorbeeld van staat

Hier is een werkend voorbeeld van hoe u state binnen een klasse kunt gebruiken.

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')
); 

Dit is wat we krijgen als we het in de browser testen:

Staat in ReactJS-uitvoer

Wat zijn rekwisieten in ReactJS?

Props zijn eigenschappen die binnen een component moeten worden gebruikt. Ze fungeren als globaal object of variabelen die binnen de component kunnen worden gebruikt.

Props voor functiecomponent

Hier is een voorbeeld van het doorgeven van rekwisieten aan een functiecomponent.

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;

Zoals hierboven weergegeven, hebben we toegevoegd msg toeschrijven aan Onderdeel. Hetzelfde is toegankelijk als rekwisieten binnen de Hello-functie, een object dat de msg attribuut details, en hetzelfde wordt gebruikt als een expressie.

De component wordt als volgt gebruikt in index.js:

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 is de uitvoer in de browser:

Props voor functionele componentuitvoer

Rekwisieten voor de klassecomponent

Om toegang te krijgen tot de rekwisieten in een klas kunnen we het als volgt doen:

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;

Het msg attribuut wordt als volgt doorgegeven aan de component in index.js:

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')
); 

Dit is de uitvoer in de browser:

Props voor klassecomponentuitvoer

Controleer ook: - AngularJS-zelfstudie voor beginners: leer AngularJS stap voor stap

Levenscyclus van een component

De levenscyclus van een component is onderverdeeld in de fasen Initialisatie, Montage, Update en Ontkoppeling.

Hier vindt u een gedetailleerde uitleg over elk onderdeel.

Een component in reactjs heeft het volgendewing stadia:

initialisatie: Dit is de eerste fase van de levenscyclus van een component.

Hier heeft het de standaard rekwisieten en de staat op het initiële niveau.

Montage: In deze fase wordt de component binnen de dom weergegeven. We hebben blootstelling aan following methoden in gemonteerde toestand.

  • componentDidMount(): Dit wordt ook aangeroepen als de component zojuist aan de dom is toegevoegd.
  • render(): Je hebt deze methode voor alle gemaakte componenten. Het retourneert het HTML-knooppunt.

bijwerken: In deze staat wordt de dom door een gebruiker gebruikt en bijgewerkt. U typt bijvoorbeeld iets in de tekstbox, zodat de statuseigenschappen worden bijgewerkt.

Following zijn de beschikbare methoden in de updatestatus:

  • ShouldComponentUpdate() : aangeroepen wanneer de component wordt bijgewerkt.
  • componentDidUpdate() : nadat de component is bijgewerkt.

Demonteren: deze toestand komt in beeld als het onderdeel niet nodig of verwijderd is.

Following zijn de beschikbare methoden in de ontkoppelstatus:

Component willUnmount(): aangeroepen wanneer de component wordt verwijderd of vernietigd.

Werkvoorbeeld

Hier is een werkend voorbeeld waarin de methoden worden weergegeven die in elke status worden aangeroepen.

Voorbeeld: 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')
); 

Wanneer u de uitvoer in de browser controleert

uitgang

In de browserconsole krijg je:

Browserconsole-uitvoer

Wanneer de gebruiker de tekst invoertbox:

Uitvoer van gebruikerswaarden

In console-following berichten worden weergegeven:

Console-uitgang

Werken met formulieren

In reactjs HTML-invoerelementen zoals , en <select /> heeft zijn eigen status en moet worden bijgewerkt wanneer de gebruiker interactie heeft met behulp van de setState() -methode.

In dit hoofdstuk zullen we zien hoe je met formulieren in reactjs kunt werken.

Hier is een werkend voorbeeld:

formulier.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;

Voor de invoervelden moeten we de status behouden, dus daarvoor biedt react een speciale methode genaamd setState, wat helpt om de staat in stand te houden wanneer er een verandering is.

We hebben evenementen onChange en onClick op de tekst gebruiktbox en verzendknop. Wanneer de gebruiker de tekst binnengaatbox de onChange-gebeurtenis wordt aangeroepen en het naamveld in de statusobjectstatus wordt bijgewerkt, zoals hieronder weergegeven:

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')
); 

De uitvoer in de browser is als volgt:

Werken met formulieruitvoer

Stap 1) Voer uw naam in de tekst inbox:

Werken met formulieruitvoer

  1. Klik op de verzendknop

Werken met formulieruitvoer

Werken met gebeurtenissen in ReactJS

Werken met gebeurtenissen in reactjs is hetzelfde als hoe je dat in javascript zou hebben gedaan. U kunt alle gebeurtenishandlers gebruiken die in javascript worden gebruikt. De setState()-methode wordt gebruikt om de status bij te werken wanneer de gebruiker interactie heeft met een HTML-element.

Hier is een werkend voorbeeld van hoe u gebeurtenissen in reactjs kunt gebruiken.

evenementen.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;

Voor de invoervelden moeten we de status behouden, dus daarvoor biedt react een speciale methode genaamd setState, wat helpt om de staat in stand te houden wanneer er een verandering is.

We hebben gebruik gemaakt van evenementen opVeranderen en bij klikken op de tekstbox en knop. Wanneer de gebruiker de tekst binnengaatbox de opVeranderen gebeurtenis wordt aangeroepen en het naamveld in de statusobjectstatus wordt bijgewerkt, zoals hieronder weergegeven:

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 is de uitvoer in de browser:

Werken met gebeurtenisuitvoer

Wanneer een gebruiker de naam invoert:

Werken met gebeurtenisuitvoer

Wanneer de gebruiker op de knop Klik hier klikt:

Werken met gebeurtenisuitvoer

Werken met Inline CSS in ReactJS

Ik zal een werkend voorbeeld bekijken om de werking van inline css in reactjs te begrijpen.

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;

Ik heb kleur toegevoegd: 'rode' stijl aan de h1-tag.

index.js

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

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

De uitvoer in de browser is als volgt:

Werken met inline CSS-uitvoer

U kunt een stijlobject maken dat u op het element wilt plaatsen en een expressie gebruiken om stijl toe te voegen, zoals weergegeven in het bovenstaande voorbeeld.

Werken met externe CSS in ReactJS

Laten we een externe css maken, maak daarvoor een map css/ en voeg daarin style.css toe.

style.css

.h1tag {
color:red;
}

Voeg de style.css toe aan uw index.html-bestand

<!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>

Laten we nu de klasse toevoegen aan de h1-tag in het .jsx-bestand

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')
);

Het attribuut className krijgt de klasse details. Laten we nu eens testen in de browser.

Werken met externe CSS-uitvoer

Dit is wat u ziet als u de h1-tag in de browser inspecteert:

Werken met externe CSS-uitvoer

U kunt zien dat de class=”h1tag” met succes is toegevoegd aan de h1-tag.

Samengevat

  • ReactJS is een open-source front-end JavaScript-bibliotheek om de gebruikersinterface te bouwen. Het wordt onderhouden door Facebook en wordt tegenwoordig door veel bedrijven gebruikt voor UI-ontwikkeling.
  • De kernfuncties van ReactJS omvatten JSX, componenten (functionele componenten en op klassen gebaseerde componenten), de levenscyclus van een component, rekwisieten en statusondersteuning voor een component, werkend met javascript-expressies.
  • De projectconfiguratie van ReactJS wordt uitgelegd met behulp van CDN-bestanden en ook met behulp van npm-pakketten om het project te bouwen.
  • JSX is een uitbreiding op javascript. Het is een sjabloonscript waarin u HTML en Javascript samen kunt gebruiken.
  • Componenten zijn als pure JavaScript-functies die de code helpen vereenvoudigen door de logica op te splitsen in herbruikbare, onafhankelijke code.
  • Een status is een JavaScript-object dat lijkt op rekwisieten en die gegevens bevatten die moeten worden gebruikt bij de reactjs-weergave. De statusgegevens zijn een privéobject en worden gebruikt binnen componenten binnen een klasse.
  • Props zijn eigenschappen die binnen een component moeten worden gebruikt.
  • De levenscyclus van een component is onderverdeeld in de fasen Initialisatie, Montage, Update en Ontkoppeling.
  • In reactjs html-invoerelementen zoals , en <select /> heeft zijn eigen status en moet worden bijgewerkt wanneer de gebruiker interageert met behulp van de setState() -methode.
  • Werken met gebeurtenissen in reactjs is hetzelfde als hoe je dat in javascript zou hebben gedaan. U kunt alle gebeurtenishandlers gebruiken die in javascript worden gebruikt. De setState()-methode wordt gebruikt om de status bij te werken wanneer de gebruiker interactie heeft met een HTML-element.
  • Met ReactJS kunt u zowel met externe css als met inline css werken met behulp van javascript-expressie.

Controleer ook: - Top 70 vragen en antwoorden over React-interviews (bijgewerkt)