ReactJS-tutorial voor beginners: leer met een stapsgewijs voorbeeld

Wat is ReactJS?

ReactJS is een open source front-end JavaScriptbibliotheek voor het bouwen van gebruikersinterfaces. ReactJS wordt onderhouden door Facebook en een community van individuele ontwikkelaars en bedrijven. Het wordt veel gebruikt als basis bij het bouwen van single-page websites en mobiele applicaties. Het is heel eenvoudig te gebruiken en stelt gebruikers in staat om 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.

Onderdelen: 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, d.w.z. een in-memory data-structure cache. Alleen de laatste wijzigingen van DOM zijn later bijgewerkt in de browsers DOM.

Javascript uitdrukkingen: JS-expressies kunnen in de jsx-bestanden worden gebruikt met behulp van accolades, 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 u ontvangt de benodigde bestanden om de volgende afbeelding uit te leggen.

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:

We gaan in het volgende hoofdstuk dieper in op de code, laten we eens kijken hoe het hier werkt met CDN-bestanden. Er wordt gezegd dat het direct gebruiken van babel script geen goede gewoonte is, en nieuwkomers kunnen het gewoon gebruiken om reactjs te leren voor nu. In productie zul je react moeten installeren met behulp van 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 details ervan in het volgende hoofdstuk uitleggen. We 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>

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 de volgende opdracht uit:

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:

Wat is JSX?

JSX is een uitbreiding op javascript. Het is een template script waarbij u de kracht hebt om HTML te gebruiken en Javascript samen.

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 gaan nu de bovenstaande code wijzigen om expressies toe te voegen. Expressies worden gebruikt binnen accolades {} en worden uitgebreid tijdens runtime. 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.

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:

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:

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.

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:

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

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;

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

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 de volgende fasen:

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 het Component gerenderd in de DOM. We hebben blootstelling aan de volgende methoden in de mount-status.

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 voert bijvoorbeeld iets in het tekstvak in, zodat de staateigenschappen worden bijgewerkt.

Hieronder staan de methoden die beschikbaar zijn 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.

Hieronder staan de methoden die beschikbaar zijn in de unmount-status:

Component willUnmount(): wordt aangeroepen wanneer het 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

In de browserconsole krijg je:

Wanneer de gebruiker het tekstvak invoert:

In de console worden de volgende berichten weergegeven:

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 events onChange en onClick gebruikt op de tekstbox en de knop Verzenden. Wanneer de gebruiker binnenkomt in de tekstbox, wordt de onChange-event aangeroepen en wordt het veld Naam binnen het object State 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:

Stap 1) Voer uw naam in het tekstvak in:

Klik op de verzendknop

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 het tekstvak en de knop. Wanneer de gebruiker het tekstvak binnengaat, 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:

Wanneer een gebruiker de naam invoert:

Wanneer de gebruiker op de knop Klik hier klikt:

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:

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 className-attribuut krijgt de klassedetails. Laten we nu testen in de browser.

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

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

Samenvatting

ReactJS is een open source front-end JavaScriptbibliotheek 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)

Je houdt misschien van:

5 BESTE React-cursussen met…

Wat is ReactJS?

Kenmerken van ReactJS

Voordelen van ReactJS

Nadelen van ReactJS

Gebruik ReactJS van CDN

Voor ontwikkelaar

Voor prod

GERELATEERDE ARTIKELEN

NPM-pakketten gebruiken

Hoe u uw eerste React-projectconfiguratie kunt maken

Wat is JSX?

Waarom hebben we JSX nodig in React?

Expressies in JSX

Wat zijn componenten in ReactJS?

Componenten als functies

Klasse als onderdeel

Wat is een staat in ReactJS?

Voorbeeld van staat

Wat zijn rekwisieten in ReactJS?

Props voor functiecomponent

Rekwisieten voor de klassecomponent

Levenscyclus van een component

Werkvoorbeeld

Werken met formulieren

Werken met gebeurtenissen in ReactJS

Werken met Inline CSS in ReactJS

Werken met externe CSS in ReactJS

Samenvatting