ReactJS-opplæring for nybegynnere

Hva er ReactJS?

ReactJS er en åpen kildekode-frontend JavaSkriptbibliotek for å bygge brukergrensesnitt. ReactJS vedlikeholdes av Meta (tidligere Facebook) og et fellesskap av individuelle utviklere og selskaper. Det er mye brukt som base for å bygge ensidede applikasjoner og mobilapplikasjoner. Det er veldig enkelt å bruke, og det lar brukere lage gjenbrukbare UI-komponenter.

Før du skriver den første linjen med React-kode, er det nyttig å vite hva som skiller biblioteket fra vanlig kode. JavaSkript. Neste avsnitt går gjennom kjernefunksjonene.

Funksjoner til ReactJS

JSX: JSX er en utvidelse av JavaSkript. Selv om det ikke er obligatorisk å bruke JSX i React, er det en av de gode funksjonene og enkel å bruke.

komponenterKomponentene er som rene JavaSkriptfunksjoner som bidrar til å gjøre koden enkel ved å dele logikken inn i gjenbrukbar uavhengig kode. Vi kan bruke komponenter som funksjoner og komponenter som klasser. Komponenter har også tilstand og props, noe som gjør livet enkelt. Inne i en klassekomponent vedlikeholdes tilstanden og propsene.

Virtuelt DOM: React oppretter en virtuell DOM, dvs. en datastrukturbuffer i minnet. Bare de endelige endringene oppdateres senere i nettleserens DOM, som fortsetter å gjengi raskt.

JavaSkriptuttrykk: JS-uttrykk kan brukes i JSX-filene ved hjelp av krøllparenteser, for eksempel {}.

Fordeler med ReactJS

Her er viktige fordeler/fordeler med å bruke ReactJS:

• ReactJS bruker en virtuell DOM som benytter seg av en datastrukturbuffer i minnet, og bare de endelige endringene oppdateres i nettleserens DOM. Dette gjør appen raskere.
• Du kan lage komponenter du selv velger ved å bruke React-komponentfunksjonen. Komponentene kan gjenbrukes og er også nyttige for kodevedlikehold.
• ReactJS er en åpen kildekode JavaSkriptbibliotek, så det er enkelt å komme i gang med.
• ReactJS ble veldig populært på kort tid og driver produkter som Facebook og InstagramDen brukes av mange kjente selskaper som Apple, NetflixOsv
• Meta vedlikeholder ReactJS-biblioteket, så det er godt vedlikeholdt og oppdatert.
• ReactJS kan brukes til å utvikle et rikt brukergrensesnitt for både desktop- og mobilapper.
• Enkel å feilsøke og teste ettersom det meste av kodingen er gjort i JavaScript heller enn i HTML.

Ulemper med ReactJS

Her er ulemper/ulemper med å bruke ReactJS:

• Mesteparten av koden er skrevet i JSX, dvs. HTML og CSS er en del av JavaSkript. Det kan være ganske forvirrende, ettersom de fleste andre rammeverk foretrekker keeping HTML atskilt fra JavaSkriptkode.
• Filstørrelsen til ReactJS er relativt stor.

Når du kjenner til avveiningene, er du klar til å sette opp React. Den raskeste måten å prøve det på er direkte fra et CDN, som vi dekker først; npm-baserte oppsett for virkelige prosjekter følger etter.

Bruker ReactJS fra CDN

For å begynne å jobbe med React, må vi først legge til ReactJS på siden vår. Du kan enkelt komme i gang med å bruke ReactJS med CDN-et. JavaSkriptfiler, som vist nedenfor.

Gå til den eldre React-dokumentasjonssiden for å få CDN-lenkene, f.eks. https://legacy.reactjs.org/docs/cdn-links.html, og du vil få de nødvendige filene forklart i følgende bilde.

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

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

Erstatt versjon med React-versjonen du ønsker for både react.development.js og react-dom.development.js. Vi bruker versjon 16 på denne siden, så eksemplene nedenfor kjører uendret.

Hvis du planlegger å bruke CDN-filene, må du sørge for å beholde crossorigin-attributtet for å unngå problemer med kryssdomener. ReactJS-kode kan ikke kjøres direkte i nettleseren og må transpileres ved hjelp av Babel til vanlig kode. JavaSkript før kjøring i nettleseren.

Her er BabelJS-skriptet som kan brukes:

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

Her er et fungerende ReactJS-eksempel som bruker CDN-filer og BabelJS-skriptet.

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

Utgang:

Vi skal gå inn på detaljene i koden i neste kapittel. La oss se hvordan det fungerer med CDN-filer. Det er ikke lurt å bruke Babel-skriptet direkte, og nybegynnere bør foreløpig bare bruke det for å lære ReactJS. I produksjon må du installere React ved hjelp av npm-pakken.

Bruker NPM-pakker

Sørg for at du har Node.js installert. Hvis ikke, gå gjennom denne veiledningen for Node.js (https://www.guru99.com/node-js-tutorial.html) installasjon.

Når du har installert Node.js, opprett en mappe reactproj/.

For å starte med prosjektoppsett, kjør kommandoen npm init.

Slik vil mappestrukturen se ut:

reactproj\
package.json

Nå skal vi installere pakkene vi trenger.

Her er listen over pakker for ReactJS. Vi fester React til versjon 16, slik at ReactDOM.render eksemplene på denne siden kjører nøyaktig som vist:

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

Åpne ledeteksten og kjør kommandoene ovenfor i mappen reactproj/.

Lag en mappe src / hvor all JS-koden skal være. All koden for ReactJS-prosjektet vil være tilgjengelig i src/-mappen. Opprett 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 grunnleggende koden for ReactJS. Vi vil forklare detaljene i neste kapittel. Vi ønsker å vise Hallo, fra Guru99 veiledninger, og det samme gis til DOM-elementet med ID-en «root». Det er hentet fra index.html-filen, som er startfilen, som vist nedenfor.

Opprett en public/-mappe og legg til 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 ta seg av å kompilere koden og starte serveren for å vise HTML-filen, dvs. index.html. Du må legge til kommandoen i package.json som vil ta seg av å bruke react-scripts til å kompilere koden og starte serveren, som vist nedenfor:

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

Etter å ha installert alle pakkene og lagt til kommandoen ovenfor, 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 å begynne å teste ReactJS, kjør kommandoen:

npm run start

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

Den vil åpne nettleseren 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 skal bruke den samme prosessen for å utføre JavaSkriptfiler i de neste kapitlene også. Legg alle .js- og .jsx-filene dine i src/-mappen. Filstrukturen vil være som følger:

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

Hvordan lage ditt første React-prosjektoppsett

Her er en trinnvis veiledning i denne ReactJS-opplæringen for å starte med den første React-applikasjonen.

Trinn 1) Importer reaksjonspakkene.
1. For å starte med ReactJS, må vi først importere react-pakkene som følger.

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

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

Trinn 2) Skriv enkelt Code.
Vi vil skrive en enkel kode i denne opplæringen React JS, der vi vil vise meldingen «Hallo, fra Guru99 veiledninger!

ReactDOM.render(

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

ReactDOM.render vil legge til taggen 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>

Trinn 3) Kompiler Code.

Neste i denne React.js-veiledningen må vi kompilere koden for å få utdata i nettleseren.

Her er mappestrukturen:

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

Vi har lagt til kommandoene for å kompilere den endelige filen i package.json som følger:

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

For å kompilere den endelige filen, kjør følgende kommando:

npm run start

Når du kjører kommandoen ovenfor, vil den kompilere filene og varsle deg hvis det er noen feil. Hvis alt ser bra ut, vil den åpne nettleseren og kjøre siden på http://localhost:3000/

Kommando: npm kjørestart:

C:\reactproj>npm run start

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

Trinn 4) Sjekk utgang.
Ocuco URL http://localhost:3000 åpnes i nettleseren når koden er kompilert, som vist nedenfor:

Slik konfigurerer du React med Vite (moderne tilnærming)

React-scripts-oppsettet ovenfor kommer fra Create React App (CRA), som var standardstarteren i årevis. React-teamet avviklet offisielt Create React App i februar 2025, så nye prosjekter bør bruke et moderne byggeverktøy i stedet. Det mest populære valget i dag er Bor, som starter raskere og produserer mindre bygg.

Slik oppretter du et nytt React-prosjekt med Vite:

Trinn 1) Kjør scaffolding-kommandoen i terminalen din:

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

Trinn 2) Flytt inn i mappen og installer avhengigheter:

cd my-react-app
npm install

Trinn 3) Start utviklingsserveren:

npm run dev

Vite betjener appen kl. http://localhost:5173/ som standard og lastes inn på nytt umiddelbart når du lagrer en fil.

Viktige forskjeller fra det eldre oppsettet på denne siden:

• Inngangsfilen er src/main.jsx i stedet for src/index.js.
• Den installerer den nyeste React, som bruker createRoot i stedet for ReactDOM.render.
• index.html ligger i prosjektroten, ikke i public/.
• Byggene er produsert med npm run build inn i en dist/-mappe.

For fullstack-behov som ruting og serverrendering, anbefaler React-teamet også rammeverk som Next.jsAlt du lærer i kapitlene nedenfor – JSX, komponenter, tilstand og props – gjelder uendret i et Vite- eller Next.js-prosjekt.

Hva er JSX?

JSX er en utvidelse av JavaSkript. Det er et malskript der du får muligheten til å bruke HTML og JavaManus sammen.

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

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

Hvorfor trenger vi JSX i React?

For et brukergrensesnitt trenger vi HTML, og hvert element i DOM-en vil ha hendelser som skal håndteres, tilstandsendringer osv.

Når det gjelder React, lar det oss bruke HTML og JavaSkript i samme fil og ta hånd om tilstandsendringene i DOM-en på en effektiv måte.

Uttrykk i JSX

Her er et enkelt eksempel på hvordan du bruker uttrykk i JSX.

I tidligere ReactJS-eksempler skrev vi noe slikt som:

index.js

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

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

Vi skal nå endre koden ovenfor for å legge til uttrykk. Uttrykk brukes i krøllparenteser {}, og de utvides under kjøretid. Uttrykk i React er de samme som JavaSkriptuttrykk.

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

La oss nå teste det samme i nettleseren.

Du kan se på skjermbildet ovenfor at uttrykket {display} ikke er erstattet. React vet ikke hva det skal gjøre når et uttrykk brukes i en .js-fil.

La oss nå legge til endringer og lage 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 lagt til den nødvendige koden og vil bruke test.jsx-filen i index.js. Vi ønsker at h1tag variabelen som skal brukes i index.js, slik at den samme eksporteres som vist ovenfor i test.jsx.

Her er den endrede koden i index.js:

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

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

For å bruke test.jsx i index.js, må vi først importere den som vist nedenfor:

import h1tag from './test.jsx';

Vi kan bruke h1tag nå i ReactDOM.render som vist nedenfor:

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

Her er utgangen når vi sjekker det samme i nettleseren:

Hva er komponenter i ReactJS?

Komponentene er som rene JavaSkriptfunksjoner som gjør koden enkel ved å dele logikken inn i gjenbrukbar uavhengig kode.

Komponenter som funksjoner

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 laget en funksjon som heter Hallo som returnerer en h1-tag, som vist ovenfor. Navnet på funksjonen fungerer som et element, som vist nedenfor:

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

Komponenten Hallo brukes som en HTML-tag, f.eks. , tildelt Hei_komp variabel, og den samme eksporteres ved hjelp av export.

La oss nå bruke denne komponenten 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 utdataene i nettleseren:

Klasse som komponent

Her er et ReactJS-eksempel som bruker 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 bruke 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 brukes som en HTML-tag, f.eks. .

Her er utgangen av det samme.

Klassekomponenter vs. funksjonskomponenter og kroker

Du har nå sett begge måtene å skrive en komponent på, så hvilken bør du bruke? Denne siden lærer deg klassekomponenter fordi de gjør tilstands- og livssykluskonsepter eksplisitte, noe som er verdifullt for nybegynnere og fortsatt vises i eldre kodebaser. Men siden React 16.8 introduserte Hooks, kan funksjonskomponenter også inneholde tilstand, og de er den anbefalte stilen for all ny kode.

Aspekt	Klassekomponent	Funksjonskomponent med kroker
Tilstand	denne.tilstanden og denne.settStatus()	useState()-kroken
Lifecycle	componentDidMount, componentDidUpdate, componentWillAvmontere	useEffect() Hook dekker alle tre
syntax	Mer standardtekst (konstruktør, binding, dette)	Kortere, ikke dette søkeordet
status	Støttet, eldre stil	Anbefalt for ny kode

Her er tilstandseksemplet fra denne siden omskrevet med useState Hook:

import React, { useState } from 'react';

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

Begge versjonene gjengir samme utdata. Lær klassesyntaksen som brukes i kapitlene nedenfor, og øv deretter på å konvertere hvert eksempel til Hooks.

Hva er en stat i ReactJS?

En stat er en JavaSkriptobjekt, likt props, som inneholder data som skal brukes med ReactJS-gjengivelsen. Tilstandsdataene er et privat objekt og brukes i komponenter i en klasse.

Eksempel på stat

Her er et fungerende eksempel på hvordan man bruker tilstand 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 hva vi får når vi tester det i nettleseren:

Hva er rekvisitter i ReactJS?

Props er egenskaper som skal brukes inne i en komponent. De fungerer som globale objekter eller variabler som kan brukes inne i komponenten.

Rekvisitter til funksjonskomponent

Her er et eksempel på å sende rekvisitter til en funksjonskomponent.

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 lagt til msg attributt til komponent. Det samme kan nås som props inne i Hello-funksjonen, som er et objekt som vil ha msg attributtdetaljer, og det samme brukes som uttrykk.

Komponenten brukes 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 utdataene i nettleseren:

Rekvisitter til klassekomponent

For å få tilgang til rekvisittene i en klasse, kan vi gjøre det slik:

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;

Ocuco msg attributtet sendes 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 utgangen i nettleseren:

Sjekk også: - AngularJS-veiledning for nybegynnere: Lær AngularJS trinn for trinn

Livssyklusen til en komponent

Når komponenter, tilstand og props er dekket, er neste trinn å forstå når React kaller komponentens metoder. En komponentlivssyklus er delt inn i initialiserings-, monterings-, oppdaterings- og avmonteringsfaser.

Her er en detaljert forklaring av hvert trinn.

En komponent i ReactJS har følgende stadier:

Initialisering: Dette er den første fasen av komponentens livssyklus.

Her vil den ha standard rekvisitter og tilstanden på det opprinnelige nivået.

MonteringI denne fasen gjengis komponenten inne i DOM-en. Vi har erfaring med følgende metoder i monteringstilstand:

• render(): Du har denne metoden for alle komponentene som er opprettet. Den returnerer HTML-noden.
• componentDidMount(): Dette kalles umiddelbart etter at komponenten er lagt til i DOM-en.

OppdaterI denne tilstanden samhandler brukeren med DOM-en, og den oppdateres. Hvis du for eksempel skriver inn noe i tekstboksen, oppdateres tilstandsegenskapene.

Følgende er metodene som er tilgjengelige i oppdateringsstatus:

• shouldComponentUpdate(): kalles før ny gjengivelse; lar deg bestemme om komponenten skal oppdateres. Retur av true gjengir komponenten på nytt.
• componentDidUpdate(): kalles etter at komponenten er oppdatert.

Avmontering: Denne tilstanden kommer inn i bildet når komponenten ikke er nødvendig eller fjernes.

Følgende er metoden som er tilgjengelig i avmontert tilstand:

• componentWillUnmount(): kalles rett før komponenten fjernes eller ødelegges.

Arbeidseksempel på livssyklusmetoder

Her er et fungerende eksempel som viser metodene som kalles på hvert trinn.

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 sjekker resultatet i nettleseren:

I nettleserkonsollen får du:

Når brukeren kommer inn i tekstboksen:

I konsollen vises følgende meldinger:

Nå som du vet når en komponent gjengis og oppdateres, la oss bruke tilstand og hendelser i et praktisk brukstilfelle: håndtering av brukerinput via skjemaer.

Arbeid med skjemaer

I ReactJS, HTML-inndataelementer som , , og <select /> har sin egen tilstand og må oppdateres når brukeren samhandler, ved hjelp av setState()-metoden.

I dette kapittelet skal vi se på hvordan man jobber med skjemaer 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 inputfeltene må vi opprettholde tilstanden, så for det tilbyr React en spesiell metode kalt setState, som bidrar til å opprettholde tilstanden når det skjer en endring. I en reell applikasjon, kall også event.preventDefault() inne i formSubmit for å hindre nettleseren i å laste inn siden på nytt ved sending.

Vi har brukt hendelsene onChange og onClick på tekstboksen og send-knappen. Når brukeren skriver i tekstboksen, kalles onChange-hendelsen, og navnefeltet i state-objektet oppdateres, 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')
);

Utgangen i nettleseren er som følger:

Trinn 1) Skriv inn navnet ditt i tekstboksen:

Trinn 2) Klikk på send-knappen:

Jobber med hendelser i ReactJS

Skjemaer er bare én kilde til brukerinteraksjon. Å jobbe med hendelser i ReactJS er det samme som hvordan du ville ha gjort det i JavaSkript. Du kan bruke alle hendelseshåndtererne som brukes i JavaSkript. Metoden setState() brukes til å oppdatere tilstanden når brukeren samhandler med et HTML-element.

Her er et fungerende eksempel på hvordan du bruker hendelser 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 inputfeltene må vi opprettholde tilstanden, så for det gir React setState metode, som bidrar til å opprettholde tilstanden når det skjer en endring.

Vi har brukt arrangementene på Endre og ved trykk på tekstboksen og knappen. Når brukeren skriver i tekstboksen, på Endre hendelsen kalles, og navnefeltet i tilstandsobjektet oppdateres, 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 utdataene i nettleseren:

Når en bruker skriver inn navnet:

Når brukeren klikker på Klikk her-knappen:

Arbeide med Inline CSS i ReactJS

Når komponentene dine håndterer data og hendelser, er det siste trinnet å style dem. Vi skal se på et fungerende eksempel for å 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 lagt til fargen «rød» i h1-taggen.

index.js

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

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

Utgangen i nettleseren er som følger:

Du kan opprette et objekt med stilen du ønsker på elementet og bruke et uttrykk for å legge til stilen, som vist i eksemplet ovenfor.

Arbeide med ekstern CSS i ReactJS

La oss opprette en ekstern CSS-fil. For å gjøre det, opprett en mappe kalt css/ og legg til style.css i den.

style.css

.h1tag {
color:red;
}

Legg til style.css i index.html-filen

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

La oss nå legge til klassen i h1-taggen 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')
);

className-attributtet får klassedetaljene. Merk at JSX bruker klassenavn i stedet for HTML-klasseattributtet, fordi klasse er et reservert nøkkelord i JavaSkript. La oss nå teste det i nettleseren.

Dette er hva du ser når du inspiserer h1-taggen i nettleseren:

Du kan se at class="h1tag" er lagt til i h1-taggen.

Hvorfor ReactDOM.render ble erstattet av createRoot

Alle eksemplene på denne siden monterer appen med ReactDOM.render, som er korrekt for React 16 og 17, versjonene dette kurset retter seg mot. React 18, utgitt i mars 2022, erstattet dette inngangspunktet med createRoot API-et, og React 19 fjernet ReactDOM.render fullstendig. Årsaken er samtidighet: createRoot lar React forberede flere versjoner av brukergrensesnittet samtidig, avbryte lavprioritert gjengivelse og beholde ...ping og animasjoner jevne. Funksjoner som automatisk batching, useTransition og spenningsbasert strømming er alle avhengige av det.

Den moderne ekvivalenten til index.js som brukes på hele denne siden ser slik ut:

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

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

Alt annet du lærte her – komponenter, JSX, tilstand, props og hendelser – fungerer på samme måte etter denne enlinjede endringen ved inngangspunktet. Versjonsforskjeller som denne dukker ofte opp i React JS intervjuspørsmål, så det lønner seg å forstå begge API-ene.

Spørsmål og svar

Sjekk også: - Topp 70 React-intervjuspørsmål og -svar (oppdatert)