ReactJS-zelfstudie voor beginners

Wat is ReactJS?

ReactJS is een open source front-end JavaScriptbibliotheek voor het bouwen van gebruikersinterfaces. ReactJS Het platform wordt onderhouden door Meta (voorheen Facebook) en een community van individuele ontwikkelaars en bedrijven. Het wordt veel gebruikt als basis voor het bouwen van single-page applicaties en mobiele applicaties. Het is zeer gebruiksvriendelijk en stelt gebruikers in staat herbruikbare UI-componenten te creëren.

Voordat je je eerste regel React-code schrijft, is het handig om te weten wat de library onderscheidt van een standaard React-bibliotheek. JavaScript. In het volgende gedeelte worden de belangrijkste functies ervan besproken.

Kenmerken van ReactJS

JSX: JSX is een uitbreiding van JavaScript. Hoewel het niet verplicht is om JSX in React te gebruiken, is het een van de handige functies en bovendien makkelijk in gebruik.

Componenten Componenten zijn als pure JavaScriptfuncties vereenvoudigen de code door de logica op te splitsen in herbruikbare, onafhankelijke code. We kunnen componenten gebruiken als functies en als klassen. Componenten hebben ook een state en props, wat het leven gemakkelijker maakt. Binnen een klassecomponent worden de state en props beheerd.

Virtuele DOM: React creëert een virtuele DOM, oftewel een in-memory datastructuurcache. Alleen de laatste wijzigingen worden later in de DOM van de browser bijgewerkt, waardoor de weergave snel blijft.

JavaScriptuitdrukkingen: JS-expressies kunnen in JSX-bestanden worden gebruikt met behulp van accolades, bijvoorbeeld {}.

Voordelen van ReactJS

Hieronder volgen de belangrijkste voordelen van het gebruik van ReactJS:

• ReactJS maakt gebruik van een virtueel DOM dat een in-memory datastructuurcache benut, waardoor alleen de laatste wijzigingen in het DOM van de browser worden bijgewerkt. Dit maakt de app sneller.
• Met de componentfunctionaliteit van React kun je componenten naar eigen keuze maken. Deze componenten zijn herbruikbaar en helpen bovendien bij het onderhoud van de code.
• ReactJS is een open-source framework. JavaScriptbibliotheek, dus je kunt er makkelijk mee aan de slag.
• ReactJS is in korte tijd enorm populair geworden en wordt gebruikt in producten zoals die van Facebook. InstagramHet wordt gebruikt door veel bekende bedrijven zoals Apple. Netflix, Etc.
• Meta onderhoudt de ReactJS-bibliotheek, waardoor deze goed onderhouden en up-to-date wordt gehouden.
• 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 in HTML.

Nadelen van ReactJS

Hieronder volgen de nadelen van het gebruik van ReactJS:

• Het grootste deel van de code is geschreven in JSX, dat wil zeggen dat HTML en CSS onderdeel uitmaken van de code. JavaScript. Het kan nogal verwarrend zijn, aangezien de meeste andere frameworks de voorkeur geven aan keeping HTML los van de JavaScriptcode.
• De bestandsgrootte van ReactJS is relatief groot.

Nu je de voor- en nadelen kent, ben je klaar om React in te stellen. De snelste manier om het te proberen is rechtstreeks via een CDN, wat we eerst bespreken; daarna volgen npm-gebaseerde installaties voor echte projecten.

Gebruik ReactJS van CDN

Om met React aan de slag te gaan, moeten we eerst ReactJS aan onze pagina toevoegen. Je kunt gemakkelijk beginnen met ReactJS via een CDN. JavaScriptbestanden, zoals hieronder weergegeven.

Ga naar de oude React-documentatiesite om de CDN-links te vinden, bijvoorbeeld: https://legacy.reactjs.org/docs/cdn-links.htmlEn dan ontvang je de benodigde bestanden, zoals uitgelegd in de volgende afbeelding.

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 gewenste React-versie voor zowel react.development.js als react-dom.development.js. Op deze pagina gebruiken we versie 16, dus de onderstaande voorbeelden werken zonder aanpassingen.

Als je van plan bent om CDN-bestanden te gebruiken, zorg er dan voor dat je het `crossorigin`-attribuut behoudt om problemen met cross-domain-aanvallen te voorkomen. ReactJS-code kan niet rechtstreeks in de browser worden uitgevoerd en moet met Babel worden getranspileerd naar een platte tekst. JavaScript vóór uitvoering in de browser.

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 een werkend ReactJS-voorbeeld met CDN-bestanden en een 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:

In het volgende hoofdstuk gaan we dieper in op de code; laten we nu eens kijken hoe het werkt met CDN-bestanden. Het rechtstreeks gebruiken van het Babel-script is geen goede gewoonte, en beginners zouden het voorlopig alleen moeten gebruiken om ReactJS te leren kennen. In een productieomgeving moet je React installeren met behulp van het npm-pakket.

NPM-pakketten gebruiken

Zorg ervoor dat Node.js is geïnstalleerd. Als het nog niet is geïnstalleerd, volg dan deze handleiding voor Node.js (https://www.guru99.com/node-js-tutorial.html) installatie.

Nadat je Node.js hebt geïnstalleerd, maak je een map aan. reageerproj/.

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

Zo zal de mapstructuur eruitzien:

reactproj\
package.json

Nu zullen we de pakketten installeren die we nodig hebben.

Hier is de lijst met pakketten voor ReactJS. We hebben React vastgezet op versie 16, zodat de ReactDOM.render De voorbeelden op deze pagina werken precies zoals weergegeven:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

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

Maak een map src / Hier komt alle JavaScript-code te staan. Alle code voor het ReactJS-project is te vinden in de map `src/`. Maak een bestand `index.js` aan en importeer `react` en `react-dom`, 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 geschreven. We zullen de details ervan in het volgende hoofdstuk uitleggen. We willen het volgende weergeven Hallo, van Guru99 zelfstudiesEn hetzelfde wordt toegekend aan het DOM-element met id "root". Dit wordt overgenomen uit het index.html-bestand, het startbestand, zoals hieronder weergegeven.

Maak een map 'public/' aan en plaats daarin het bestand 'index.html' 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, oftewel index.html, weer te geven. Je moet de volgende opdracht toevoegen aan package.json om react-scripts te gebruiken voor het compileren van de code en het starten van de server, 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",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Om ReactJS te testen, voer je het volgende commando uit:

npm run start

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

Het zal de browser openen met de URL 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>

We gaan dezelfde procedure gebruiken om de uitvoering te doen. JavaOok in de volgende hoofdstukken komen scriptbestanden aan bod. Voeg al je .js- en .jsx-bestanden toe aan de map src/. De bestandsstructuur ziet er als volgt uit:

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

Hoe u uw eerste React-projectconfiguratie kunt maken

In deze ReactJS-tutorial vind je een stapsgewijze handleiding om aan de slag te gaan met je eerste React-applicatie.

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 eenvoudig Code.
In deze tutorial React JS zullen we een eenvoudige code schrijven, waarin we het bericht zullen weergeven “Hallo, van Guru99 handleidingen!

ReactDOM.render(

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

ReactDOM.render zal de toevoegen Voeg de tag toe aan het element met id root. Dit 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 je bovenstaande opdracht uitvoert, worden de bestanden gecompileerd en krijg je een melding als er een fout optreedt. Als alles in orde is, wordt de browser geopend en de pagina geladen. http://localhost:3000/

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 Het bestand wordt in de browser geopend zodra de code is gecompileerd, zoals hieronder weergegeven:

Hoe React met Vite in te stellen (moderne aanpak)

De bovenstaande react-scripts-configuratie is afkomstig van Create React App (CRA), dat jarenlang de standaard startertool was. Het React-team heeft Create React App officieel afgekeurd in februari 2025, dus nieuwe projecten zouden in plaats daarvan een modernere buildtool moeten gebruiken. De populairste keuze is tegenwoordig... schroef, wat sneller opstart en kleinere bestanden produceert.

Zo maak je een nieuw React-project aan met Vite:

Stap 1) Voer het volgende commando uit in je terminal:

npm create vite@latest my-react-app -- --template react

Stap 2) Ga naar de map en installeer de benodigde afhankelijkheden:

cd my-react-app
npm install

Stap 3) Start de ontwikkelingsserver:

npm run dev

Vite biedt de app aan via http://localhost:5173/ Standaard wordt het automatisch opnieuw geladen wanneer je een bestand opslaat.

Belangrijkste verschillen met de oude opzet op deze pagina:

• Het invoerbestand is src/main.jsx in plaats van src/index.js.
• Het installeert de nieuwste versie van React, die gebruikmaakt van createRoot in plaats van ReactDOM.render.
• index.html bevindt zich in de projectroot, niet in public/.
• De bouwwerken worden geproduceerd met npm run build in een dist/ map.

Voor full-stack-behoeften zoals routing en server-side rendering, raadt het React-team ook frameworks aan zoals Next.jsAlles wat je in de onderstaande hoofdstukken leert – JSX, componenten, state en props – is ongewijzigd van toepassing in een Vite- of Next.js-project.

Wat is JSX?

JSX is een uitbreiding van JavaScript. Het is een sjabloonscript waarmee je HTML kunt gebruiken en JavaSamen een script schrijven.

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, enzovoort.

In het geval van React stelt het ons in staat om HTML te gebruiken en JavaHet script bevindt zich in hetzelfde bestand en zorgt voor een efficiënte afhandeling van statuswijzigingen in de DOM.

Expressies in JSX

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

In eerdere ReactJS-voorbeelden schreven we zoiets 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 aanpassen om expressies toe te voegen. Expressies worden gebruikt tussen accolades {} en worden tijdens de uitvoering uitgebreid. Expressies in React zijn hetzelfde als JavaScriptuitdrukkingen.

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.

Zoals je in de bovenstaande schermafbeelding kunt zien, wordt de expressie {display} niet vervangen. React weet niet wat te doen wanneer een expressie in een .js-bestand wordt gebruikt.

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 benodigde code toegevoegd en zullen het bestand test.jsx gebruiken in index.js. We willen dat h1tag Deze variabele moet in index.js worden gebruikt, dus wordt deze op dezelfde manier geëxporteerd als hierboven in test.jsx.

Hieronder staat de aangepaste 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 het bestand test.jsx in index.js te kunnen gebruiken, moeten we het eerst importeren, zoals hieronder wordt 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 JavaScriptfuncties die het coderen 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 een h1-tag retourneert, 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, d.w.z. , toegewezen aan de Hallo_comp variabele, en diezelfde wordt geëxporteerd met behulp van export.

Laten we dit 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')
);

Het component 'Hello' wordt gebruikt als een HTML-tag, bijvoorbeeld: .

Hier is de uitvoer van hetzelfde.

Klassecomponenten versus functiecomponenten en hooks

Je hebt nu beide manieren gezien om een ​​component te schrijven, dus welke moet je gebruiken? Deze pagina behandelt klassecomponenten omdat ze concepten als state en lifecycle expliciet maken, wat waardevol is voor beginners en nog steeds voorkomt in oudere codebases. Sinds React 16.8 Hooks introduceerde, kunnen functionele componenten echter ook state bevatten, en dit is de aanbevolen stijl voor alle nieuwe code.

Aspect	Klassecomponent	Functionele component met hooks
Land	this.state en this.setState()	useState() Hook
Levenscyclus	componentDidMount, componentDidUpdate, componentWillUnmount	De useEffect() hook dekt alle drie de effecten.
Syntaxis	Meer standaardcode (constructor, bind, this)	Korter, geen dit trefwoord
Status	Ondersteund, oude stijl	Aanbevolen voor nieuwe code

Hieronder staat het state-voorbeeld van deze pagina, herschreven met de useState Hook:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Beide versies leveren dezelfde uitvoer op. Leer de klassensyntaxis die in de volgende hoofdstukken wordt gebruikt en oefen vervolgens met het converteren van elk voorbeeld naar Hooks.

Wat is een staat in ReactJS?

Een staat is een JavaEen scriptobject, vergelijkbaar met props, dat gegevens bevat die gebruikt worden bij het renderen met ReactJS. De state-gegevens zijn een privéobject en worden gebruikt binnen componenten in een klasse.

Voorbeeld van staat

Hier is een werkend voorbeeld van hoe je 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 gebruikt kunnen worden. Ze fungeren als globale objecten of variabelen die binnen de component gebruikt kunnen worden.

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 het volgende toegevoegd: msg toeschrijven aan de component. Hetzelfde is toegankelijk via rekwisieten binnen de Hello-functie, een object dat de volgende inhoud zal hebben: 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 eigenschappen van een klasse, kunnen we dat 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

Nu we componenten, state en props hebben behandeld, is de volgende stap begrijpen wanneer React de methoden van je component aanroept. De levenscyclus van een component is onderverdeeld in de fasen Initialisatie, Mounting, Update en Unmounting.

Hieronder volgt een gedetailleerde uitleg van elke fase.

Een component in ReactJS doorloopt 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.

MontageIn deze fase wordt het component in de DOM weergegeven. We hebben toegang tot de volgende methoden in de montagefase:

• render(): Deze methode heb je voor alle gemaakte componenten. Hij retourneert het HTML-knooppunt.
• componentDidMount(): Deze functie wordt direct aangeroepen nadat het component aan de DOM is toegevoegd.

bijwerkenIn deze staat interacteert de gebruiker met de DOM en wordt deze bijgewerkt. Als je bijvoorbeeld iets in het tekstvak invoert, worden de statuseigenschappen bijgewerkt.

De volgende methoden zijn beschikbaar in de update-status:

• shouldComponentUpdate(): wordt aangeroepen vóór het opnieuw renderen; hiermee kunt u bepalen of het component moet worden bijgewerkt. Als true wordt geretourneerd, wordt het component opnieuw gerenderd.
• componentDidUpdate(): wordt aangeroepen nadat de component is bijgewerkt.

Demonteren: Deze toestand treedt in werking wanneer het onderdeel niet langer nodig is of wordt verwijderd.

Hieronder volgt de methode die beschikbaar is in de ontkoppelde toestand:

• componentWillUnmount(): wordt aangeroepen vlak voordat de component wordt verwijderd of vernietigd.

Praktisch voorbeeld van levenscyclusmethoden

Hier volgt een werkend voorbeeld dat de methoden laat zien die in elke fase 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 je de uitvoer in de browser controleert:

In de browserconsole krijg je het volgende te zien:

Wanneer de gebruiker het tekstvak invoert:

In de console worden de volgende berichten weergegeven:

Nu je weet wanneer een component wordt weergegeven en bijgewerkt, gaan we state en events toepassen op een praktisch voorbeeld: het verwerken van gebruikersinvoer via formulieren.

Werken met formulieren

In ReactJS kunnen HTML-inputelementen zoals , , en <select /> hebben hun eigen status en moeten worden bijgewerkt wanneer de gebruiker interactie heeft, met behulp van de setState()-methode.

In dit hoofdstuk zullen we zien hoe je met formulieren werkt in ReactJS.

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, en daarvoor biedt React een speciale methode genaamd setState, wat helpt om de status te behouden wanneer er een wijziging is. In een echte applicatie wordt dit ook wel genoemd. event.preventDefault() Gebruik de `formSubmit`-methode om te voorkomen dat de browser de pagina opnieuw laadt bij het verzenden van het formulier.

We hebben de gebeurtenissen onChange en onClick gebruikt voor het tekstvak en de verzendknop. Wanneer de gebruiker iets in het tekstvak typt, wordt de onChange-gebeurtenis aangeroepen en wordt het veld 'name' in het state-object 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:

Stap 2) Klik op de verzendknop:

Werken met gebeurtenissen in ReactJS

Formulieren zijn slechts één bron van gebruikersinteractie. Werken met gebeurtenissen in ReactJS is hetzelfde als in andere talen. JavaScript. Je kunt alle gebeurtenisafhandelaars gebruiken die ook in dit script worden gebruikt. JavaScript. 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 je events kunt gebruiken in ReactJS.

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, en daarvoor biedt React de volgende functionaliteit: setState een methode die helpt de status te behouden wanneer er een wijziging optreedt.

We hebben gebruik gemaakt van de evenementen. opVeranderen en bij klikken op het tekstvak en de knop. Wanneer de gebruiker iets in het tekstvak typt, opVeranderen De gebeurtenis wordt aangeroepen en het naamveld in het statusobject 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

Zodra je componenten data en events verwerken, is de laatste stap het stylen ervan. We bekijken een werkend voorbeeld om 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 de kleur 'rood' toegevoegd 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:

Je kunt een object maken met de gewenste stijl voor het element en vervolgens een expressie gebruiken om de stijl toe te voegen, zoals in het bovenstaande voorbeeld.

Werken met externe CSS in ReactJS

Laten we een extern CSS-bestand aanmaken. Maak daarvoor een map genaamd css/ en plaats daarin het bestand style.css.

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>
  </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 bevat de klassegegevens. Merk op dat JSX gebruikmaakt van... naam van de klasse in plaats van het HTML-klasse-attribuut, omdat 'class' een gereserveerd trefwoord is in JavaScript. Laten we het nu in de browser testen.

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

Je kunt zien dat de klasse=”h1tag” succesvol is toegevoegd aan de h1-tag.

Waarom ReactDOM.render werd vervangen door createRoot

Elk voorbeeld op deze pagina laadt de app met ReactDOM.render, wat correct is voor React 16 en 17, de versies waarop deze cursus is gericht. React 18, uitgebracht in maart 2022, verving dit toegangspunt door de createRoot API, en React 19 verwijderde ReactDOM.render volledig. De reden hiervoor is gelijktijdigheid: createRoot stelt React in staat om meerdere versies van de gebruikersinterface tegelijkertijd voor te bereiden, rendering met lage prioriteit te onderbreken en de applicatie soepel te laten draaien.ping en animaties vloeiend. Functies zoals automatische batchverwerking, useTransition en op Suspense gebaseerde streaming zijn er allemaal van afhankelijk.

Het moderne equivalent van het index.js-bestand dat op deze pagina wordt gebruikt, ziet er als volgt uit:

import { createRoot } from 'react-dom/client';

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

Alles wat je hier verder hebt geleerd — componenten, JSX, state, props en events — werkt op dezelfde manier na deze ene regel wijziging bij het beginpunt. Versieverschillen zoals deze komen vaak voor in React JS-interviewvragenHet loont dus om beide API's te begrijpen.

Veelgestelde vragen

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