ReactJS-vejledning for begyndere

Hvad er ReactJS?

ReactJS er en open source-frontend JavaScriptbibliotek til opbygning af brugergrænseflader. ReactJS vedligeholdes af Meta (tidligere Facebook) og et fællesskab af individuelle udviklere og virksomheder. Det bruges i vid udstrækning som base i opbygningen af ​​enkeltsidede applikationer og mobilapplikationer. Det er meget nemt at bruge, og det giver brugerne mulighed for at oprette genbrugelige UI-komponenter.

Før du skriver din første linje React-kode, er det nyttigt at vide, hvad der adskiller biblioteket fra almindeligt JavaScript. I næste afsnit gennemgås dets kernefunktioner.

Funktioner af ReactJS

JSX: JSX er en udvidelse til JavaScript. Selvom det ikke er obligatorisk at bruge JSX i React, er det en af ​​de gode funktioner og nem at bruge.

KomponenterKomponenterne er som rene JavaScriptfunktioner, der hjælper med at gøre koden nem ved at opdele logikken i genanvendelig uafhængig kode. Vi kan bruge komponenter som funktioner og komponenter som klasser. Komponenter har også tilstand og props, hvilket gør livet nemt. Inde i en klassekomponent vedligeholdes tilstand og props.

Virtuelt DOM: React opretter en virtuel DOM, dvs. en in-memory datastruktur-cache. Kun de endelige ændringer opdateres senere i browserens DOM, som fortsat gengives hurtigt.

JavaScriptudtryk: JS-udtryk kan bruges i JSX-filer ved hjælp af krøllede parenteser, for eksempel {}.

Fordele ved ReactJS

Her er vigtige fordele/fordele ved at bruge ReactJS:

• ReactJS bruger en virtuel DOM, der bruger en in-memory datastruktur-cache, og kun de endelige ændringer opdateres i browserens DOM. Dette gør appen hurtigere.
• Du kan oprette komponenter efter eget valg ved hjælp af React-komponentfunktionen. Komponenterne kan genbruges og er også nyttige til kodevedligeholdelse.
• ReactJS er et open source-program JavaScriptbibliotek, så det er nemt at komme i gang med.
• ReactJS blev meget populært på kort tid og driver produkter som Facebook og InstagramDet bruges af mange kendte virksomheder som Apple, NetflixOsv
• Meta vedligeholder ReactJS-biblioteket, så det er velholdt og opdateret.
• ReactJS kan bruges til at udvikle rig UI til både desktop- og mobilapps.
• Let at fejlfinde og teste, da det meste af kodningen er udført i JavaScript snarere end i HTML.

Ulemper ved ReactJS

Her er ulemper/ulemper ved at bruge ReactJS:

• Det meste af koden er skrevet i JSX, dvs. HTML og CSS er en del af JavaScript. Det kan være ret forvirrende, da de fleste andre frameworks foretrækker keeping HTML adskilt fra JavaScript kode.
• Filstørrelsen på ReactJS er forholdsvis stor.

Når du kender afvejningerne, er du klar til at sætte React op. Den hurtigste måde at prøve det på er direkte fra et CDN, som vi dækker først; npm-baserede opsætninger til rigtige projekter følger efter.

Brug af ReactJS fra CDN

For at begynde at arbejde med React, skal vi først tilføje ReactJS til vores side. Du kan nemt komme i gang med at bruge ReactJS med CDN'et. JavaScriptfiler, som vist nedenfor.

Gå til den ældre React-dokumentationsside for at få CDN-linkene, f.eks. https://legacy.reactjs.org/docs/cdn-links.html, og du vil få de nødvendige filer forklaret i følgende billede.

Til dev

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

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

udskifte udgave med den React-version, du ønsker til både react.development.js og react-dom.development.js. Vi bruger version 16 på denne side, så eksemplerne nedenfor kører uændret.

Hvis du planlægger at bruge CDN-filerne, skal du sørge for at beholde crossorigin-attributten for at undgå problemer med tværdomæner. ReactJS-kode kan ikke udføres direkte i browseren og skal transpileres ved hjælp af Babel til almindelig kode. JavaScript før udførelse i browseren.

Her er BabelJS-scriptet, der kan bruges:

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Her er det fungerende ReactJS-eksempel, der bruger CDN-filer og BabelJS-scriptet.

<!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/[email protected]/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:

Vi vil gå i detaljer med koden i næste kapitel; lad os se, hvordan man arbejder med CDN-filer her. Det er ikke god praksis at bruge Babel-scriptet direkte, og nybegyndere bør kun bruge det til at lære ReactJS indtil videre. I produktion skal du installere React ved hjælp af npm-pakken.

Brug af NPM-pakker

Sørg for at du har Node.js installeret. Hvis ikke, så følg denne vejledning til Node.js (https://www.guru99.com/node-js-tutorial.html) installation.

Når du har Node.js installeret, skal du oprette en mappe reactproj/.

For at starte med projektopsætning skal du køre kommandoen npm init.

Sådan her vil mappestrukturen se ud:

reactproj\
package.json

Nu vil vi installere de pakker, vi har brug for.

Her er listen over pakker til ReactJS. Vi fastlåser React til version 16, så ReactDOM.render eksemplerne på denne side kører præcis som vist:

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

Åbn kommandoprompten, og kør ovenstående kommandoer i mappen reactproj/.

Opret en mappe src / hvor al JS-koden skal placeres. Al koden til ReactJS-projektet vil være tilgængelig i src/-mappen. Opret en fil index.js og importer react og react-dom, som vist nedenfor.

index.js

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

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

Vi har skrevet den grundlæggende kode til ReactJS. Vi vil forklare detaljerne i næste kapitel. Vi ønsker at vise Hej, fra Guru99 vejledninger, og det samme gives til DOM-elementet med id'et "root". Det er taget fra index.html-filen, som er startfilen, som vist nedenfor.

Opret en mappe public/ og tilføj index.html i den som vist nedenfor.

index.html

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

Pakken react-scripts vil tage sig af at kompilere koden og starte serveren for at vise HTML-filen, dvs. index.html. Du skal tilføje kommandoen i package.json, der vil tage sig af at bruge react-scripts til at kompilere koden og starte serveren, som vist nedenfor:

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

Efter at have installeret alle pakkerne og tilføjet ovenstående kommando, er den endelige package.json som følger:

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

For at starte test af ReactJS skal du køre kommandoen:

npm run start

C:\reactproj>npm run start
> [email protected] start C:\reactproj
> react-scripts start

Den åbner browseren med URL http://localhost:3000/ som vist nedenfor:

public/index.html

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

Vi vil bruge den samme proces til at udføre JavaScriptfiler også i de næste kapitler. Tilføj alle dine .js- og .jsx-filer i src/-mappen. Filstrukturen vil være som følger:

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

Sådan opretter du dit første React-projektopsætning

Her er en trin-for-trin guide i denne ReactJS-tutorial til at starte med den første React-applikation.

Trin 1) Importer reaktionspakkerne.
1. For at starte med ReactJS skal vi først importere react-pakkerne som følger.

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

2. Gem filen som index.js i src/-mappen.

Trin 2) Skriv simpelt Code.
Vi vil skrive en simpel kode i denne tutorial React JS, hvor vi viser beskeden "Hej, fra Guru99 vejledninger!

ReactDOM.render(

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

ReactDOM.render vil tilføje tag til elementet med id root. Her er HTML-filen vi har:

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

Trin 3) Kompilér Code.

Næste i denne React.js Tutorial skal vi kompilere koden for at få output i browseren.

Her er mappestrukturen:

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

Vi har tilføjet kommandoerne til at kompilere den endelige fil i package.json som følger:

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

For at kompilere den endelige fil skal du køre følgende kommando:

npm run start

Når du kører ovenstående kommando, vil den kompilere filerne og give dig besked, hvis der er fejl. Hvis alt ser godt ud, åbner den browseren og kører siden på http://localhost:3000/

Kommando: npm run start:

C:\reactproj>npm run start

> [email protected] start C:\reactproj
> react-scripts start

Trin 4) Tjek output.
URL http://localhost:3000 åbnes i browseren, når koden er kompileret, som vist nedenfor:

Sådan opsætter du React med Vite (moderne tilgang)

Ovenstående react-scripts-opsætning kommer fra Create React App (CRA), som var standardstarteren i årevis. React-teamet udfasede officielt Create React App i februar 2025, så nye projekter bør i stedet bruge et moderne byggeværktøj. Det mest populære valg i dag er Lives, som starter hurtigere og producerer mindre builds.

Sådan opretter du et nyt React-projekt med Vite:

Trin 1) Kør kommandoen scaffolding i din terminal:

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

Trin 2) Flyt ind i mappen og installer afhængigheder:

cd my-react-app
npm install

Trin 3) Start udviklingsserveren:

npm run dev

Vite betjener appen kl. http://localhost:5173/ som standard og genindlæses med det samme, når du gemmer en fil.

Vigtigste forskelle fra den ældre opsætning på denne side:

• Indtastningsfilen er src/main.jsx i stedet for src/index.js.
• Den installerer den nyeste React, som bruger createRoot i stedet for ReactDOM.render.
• index.html findes i projektroden, ikke i public/.
• Bygninger er produceret med npm run build til en dist/-mappe.

Til full-stack behov såsom routing og server rendering anbefaler React-teamet også frameworks som Next.jsAlt, hvad du lærer i kapitlerne nedenfor — JSX, komponenter, tilstand og props — gælder uændret i et Vite- eller Next.js-projekt.

Hvad er JSX?

JSX er en udvidelse til JavaScript. Det er et skabelonscript, hvor du får mulighed for at bruge HTML og JavaManuskript sammen.

Her er et simpelt eksempel på en JSX-kode.

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

Hvorfor har vi brug for JSX i React?

Til en brugergrænseflade har vi brug for HTML, og hvert element i DOM'en vil have hændelser, der skal håndteres, tilstandsændringer osv.

I tilfældet med React giver det os mulighed for at bruge HTML og JavaScript i den samme fil og håndter tilstandsændringerne i DOM'en på en effektiv måde.

Udtryk i JSX

Her er et simpelt eksempel på, hvordan man bruger udtryk i JSX.

I tidligere ReactJS-eksempler havde vi skrevet noget i retning af:

index.js

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

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

Vi vil nu ændre ovenstående kode for at tilføje udtryk. Udtryk bruges i krøllede parenteser {}, og de udvides under kørsel. Udtryk i React er de samme som JavaScriptudtryk.

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

Lad os nu teste det samme i browseren.

Du kan se på skærmbilledet ovenfor, at udtrykket {display} ikke er erstattet. React ved ikke, hvad den skal gøre, når et udtryk bruges i en .js-fil.

Lad os nu tilføje ændringer og oprette en .jsx-fil, som vist nedenfor:

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;

Vi har tilføjet den nødvendige kode og vil bruge test.jsx-filen i index.js. Vi ønsker at h1tag variabel, der skal bruges i index.js, så den samme eksporteres som vist ovenfor i test.jsx.

Her er den ændrede kode i index.js:

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

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

For at bruge test.jsx i index.js, skal vi først importere den som vist nedenfor:

import h1tag from './test.jsx';

Vi kan bruge h1tag'et nu i ReactDOM.render som vist nedenfor:

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

Her er outputtet, når vi tjekker det samme i browseren:

Hvad er komponenter i ReactJS?

Komponenterne er som rene JavaScriptfunktioner, der gør koden nem ved at opdele logikken i genanvendelig uafhængig kode.

Komponenter som funktioner

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;

Vi har lavet en funktion kaldet Hej der returnerer et h1-tag, som vist ovenfor. Funktionens navn fungerer som et element, som vist nedenfor:

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

Komponenten Hej bruges som et HTML-tag, dvs. , tildelt Hej_komp variabel, og den samme eksporteres ved hjælp af export.

Lad os nu bruge denne komponent i index.js-filen som vist nedenfor:

index.js

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

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

Her er output i browseren:

Klasse som komponent

Her er et ReactJS-eksempel, der bruger en klasse som en komponent.

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;

Vi kan bruge Hello-komponenten i index.js-filen som følger:

index.js

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

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

Komponenten Hello bruges som et HTML-tag, dvs. .

Her er output af det samme.

Klassekomponenter vs. funktionskomponenter og kroge

Du har nu set begge måder at skrive en komponent på, så hvilken skal du bruge? Denne side lærer klassekomponenter, fordi de gør tilstands- og livscykluskoncepter eksplicitte, hvilket er værdifuldt for begyndere og stadig vises i ældre kodebaser. Men siden React 16.8 introducerede Hooks, kan funktionskomponenter også indeholde tilstand, og de er den anbefalede stil til al ny kode.

Aspect	Klassekomponent	Funktionskomponent med kroge
Tilstand	this.state og this.setState()	useState() Hook
Lifecycle	componentDidMount, componentDidUpdate, componentWillAfmontere	useEffect() Hook dækker alle tre
Syntaks	Mere standardtekst (konstruktør, bind, dette)	Kortere, nej dette søgeord
Status	Understøttet, ældre stil	Anbefales til ny kode

Her er tilstandseksemplet fra denne side, omskrevet med useState Hook'en:

import React, { useState } from 'react';

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

Begge versioner gengiver det samme output. Lær den klassesyntaks, der bruges i kapitlerne nedenfor, og øv dig derefter i at konvertere hvert eksempel til Hooks.

Hvad er en stat i ReactJS?

En stat er en JavaScriptobjekt, svarende til props, der indeholder data, der skal bruges med ReactJS-renderingen. Tilstandsdataene er et privat objekt og bruges i komponenter i en klasse.

Eksempel på stat

Her er et eksempel på, hvordan man bruger `state` i en 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')
);

Dette er, hvad vi får, når vi tester det i browseren:

Hvad er Props i ReactJS?

Props er egenskaber, der skal bruges i en komponent. De fungerer som globale objekter eller variabler, der kan bruges i komponenten.

Rekvisitter til funktionskomponent

Her er et eksempel på at overføre rekvisitter til en funktionskomponent.

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;

Som vist ovenfor har vi tilføjet msg tilskriver til komponent. Det samme kan tilgås som rekvisitter inde i Hello-funktionen, som er et objekt, der vil have msg attribut detaljer, og det samme bruges som udtryk.

Komponenten bruges i index.js som følger:

index.js

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

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

Her er output i browseren:

Rekvisitter til klassekomponent

For at få adgang til rekvisitterne i en klasse kan vi gøre det på følgende måde:

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;

msg attribut overføres til komponenten i index.js som følger:

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

Dette er output i browseren:

Tjek også:- AngularJS Tutorial for begyndere: Lær AngularJS trin for trin

En komponents livscyklus

Når komponenter, tilstand og props er dækket, er næste trin at forstå, hvornår React kalder din komponents metoder. En komponentlivcyklus er opdelt i faserne Initialisering, Montering, Opdatering og Afmontering.

Her er en detaljeret forklaring af hvert trin.

En komponent i ReactJS har følgende faser:

Initialisering: Dette er den første fase af komponentens livscyklus.

Her vil den have standard rekvisitter og tilstand på det indledende niveau.

MonteringI denne fase gengives komponenten inde i DOM'en. Vi har erfaring med følgende metoder i monteringstilstanden:

• render(): Du har denne metode til alle de oprettede komponenter. Den returnerer HTML-noden.
• componentDidMount(): Dette kaldes umiddelbart efter komponenten er tilføjet til DOM'en.

OpdateringI denne tilstand interagerer brugeren med DOM'en, og den opdateres. For eksempel indtaster du noget i tekstfeltet, så tilstandsegenskaberne opdateres.

Følgende metoder er tilgængelige i opdateringstilstand:

• shouldComponentUpdate(): kaldes før gengivelse; den lader dig beslutte, om komponenten skal opdateres. Returnering af true gengiver komponenten.
• componentDidUpdate(): kaldes efter komponenten er opdateret.

Afmontering: Denne tilstand kommer ind i billedet, når komponenten ikke er påkrævet eller fjernes.

Følgende er den metode, der er tilgængelig i afmonteret tilstand:

• componentWillUnmount(): kaldes lige før komponenten fjernes eller ødelægges.

Arbejdseksempel på livscyklusmetoder

Her er et fungerende eksempel, der viser de metoder, der kaldes i hvert trin.

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

Når du tjekker outputtet i browseren:

I browserkonsollen får du:

Når brugeren indtaster i tekstboksen:

I konsollen vises følgende meddelelser:

Nu hvor du ved, hvornår en komponent gengives og opdateres, lad os anvende tilstand og hændelser på en praktisk use case: håndtering af brugerinput via formularer.

Arbejde med formularer

I ReactJS, HTML-inputelementer som , , og <select /> har deres egen tilstand og skal opdateres, når brugeren interagerer, ved hjælp af setState()-metoden.

I dette kapitel vil vi se på, hvordan man arbejder med formularer i ReactJS.

Her er et fungerende eksempel:

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;

For inputfelterne skal vi opretholde tilstanden, så til det formål tilbyder React en særlig metode kaldet sætState, hvilket hjælper med at opretholde tilstanden, når der sker en ændring. I en rigtig applikation, kald også event.preventDefault() inde i formSubmit for at forhindre browseren i at genindlæse siden ved afsendelse.

Vi har brugt begivenhederne onChange og onClick på tekstfeltet og send-knappen. Når brugeren skriver i tekstfeltet, kaldes onChange-begivenheden, og navnefeltet i state-objektet opdateres, som vist nedenfor:

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

Outputtet i browseren er som følger:

Trin 1) Indtast dit navn i tekstfeltet:

Trin 2) Klik på send-knappen:

Arbejde med begivenheder i ReactJS

Formularer er kun én kilde til brugerinteraktion. At arbejde med begivenheder i ReactJS er det samme, som du ville have gjort det i JavaScript. Du kan bruge alle de hændelseshåndterere, der bruges i JavaScript. Metoden setState() bruges til at opdatere tilstanden, når brugeren interagerer med et HTML-element.

Her er et eksempel på, hvordan man bruger events i 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;

For inputfelterne skal vi opretholde tilstanden, så til det formål leverer React sætState metode, som hjælper med at opretholde tilstanden, når der er en ændring.

Vi har brugt begivenhederne vi ændrer os og onclick på tekstfeltet og knappen. Når brugeren skriver i tekstfeltet, vi ændrer os begivenheden kaldes, og navnefeltet i tilstandsobjektet opdateres, som vist nedenfor:

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

Her er output i browseren:

Når en bruger indtaster navnet:

Når brugeren klikker på knappen Klik her:

Arbejde med Inline CSS i ReactJS

Når dine komponenter håndterer data og hændelser, er det sidste trin at style dem. Vi vil se på et fungerende eksempel for at forstå inline CSS i ReactJS.

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;

Jeg har tilføjet farven: 'rød' stil til h1-tagget.

index.js

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

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

Outputtet i browseren er som følger:

Du kan oprette et objekt med den ønskede stil på elementet og bruge et udtryk til at tilføje stilen, som vist i eksemplet ovenfor.

Arbejde med ekstern CSS i ReactJS

Lad os oprette en ekstern CSS-fil. Til det formål skal du oprette en mappe med navnet css/ og tilføje style.css i den.

style.css

.h1tag {
color:red;
}

Tilføj style.css til din index.html fil

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

Lad os nu tilføje klassen til h1-tagget i .jsx-filen.

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

Attributten className får tildelt klassedetaljerne. Bemærk, at JSX bruger klassenavn i stedet for HTML-attributten class, fordi class er et reserveret nøgleord i JavaScript. Lad os nu teste det i browseren.

Dette er, hvad du ser, når du undersøger h1-tagget i browseren:

Du kan se, at class="h1tag" er blevet tilføjet til h1-tagget.

Hvorfor ReactDOM.render blev erstattet af createRoot

Hvert eksempel på denne side monterer appen med ReactDOM.render, hvilket er korrekt for React 16 og 17, de versioner, som dette kursus er rettet mod. React 18, udgivet i marts 2022, erstattede dette indgangspunkt med createRoot API'en, og React 19 fjernede ReactDOM.render helt. Årsagen er samtidighed: createRoot gør det muligt for React at forberede flere versioner af brugergrænsefladen på samme tid, afbryde lavprioritetsgengivelse og bevare ...ping og animationer jævne. Funktioner som automatisk batching, useTransition og spændingsbaseret streaming afhænger alle af det.

Den moderne ækvivalent til index.js, der bruges på hele denne side, ser sådan ud:

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

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

Alt andet du har lært her — komponenter, JSX, tilstand, props og events — fungerer på samme måde efter denne ændring på én linje ved indgangspunktet. Versionsforskelle som denne optræder ofte i Spørgsmål til React JS-jobsamtalen, så det betaler sig at forstå begge API'er.

Ofte Stillede Spørgsmål

Tjek også:- Top 70 React Interview Spørgsmål og Svar (Opdateret)