ReactJS-handledning för nybörjare

Vad är ReactJS?

ReactJS är ett gränssnitt med öppen källkod JavaSkriptbibliotek för att bygga användargränssnitt. ReactJS underhålls av Meta (tidigare Facebook) och en community av enskilda utvecklare och företag. Den används flitigt som bas för att bygga ensidiga applikationer och mobilapplikationer. Den är mycket enkel att använda och låter användare skapa återanvändbara UI-komponenter.

Innan du skriver din första raden React-kod är det bra att veta vad som skiljer biblioteket från det vanliga JavaSkript. Nästa avsnitt går igenom dess kärnfunktioner.

Funktioner hos ReactJS

JSX: JSX är en utökning av JavaSkript. Även om det inte är obligatoriskt att använda JSX i React, är det en av de bra funktionerna och lätt att använda.

KomponenterKomponenterna är som rena JavaSkriptfunktioner som hjälper till att förenkla koden genom att dela upp logiken i återanvändbar oberoende kod. Vi kan använda komponenter som funktioner och komponenter som klasser. Komponenter har också tillstånd och props, vilket gör livet enkelt. Inuti en klasskomponent underhålls tillståndet och props.

Virtuell DOM: React skapar en virtuell DOM, dvs. en minnesbaserad datastrukturcache. Endast de sista ändringarna uppdateras senare i webbläsarens DOM, som fortsätter att renderas snabbt.

JavaSkriptuttryck: JS-uttryck kan användas i JSX-filer med hjälp av klammerparenteser, till exempel {}.

Fördelar med ReactJS

Här är viktiga fördelar/fördelar med att använda ReactJS:

• ReactJS använder en virtuell DOM som använder en minnesbaserad datastrukturcache, och endast de sista ändringarna uppdateras i webbläsarens DOM. Detta gör appen snabbare.
• Du kan skapa komponenter som du själv väljer med hjälp av React-komponentfunktionen. Komponenterna kan återanvändas och är även användbara vid kodunderhåll.
• ReactJS är en öppen källkod JavaSkriptbibliotek, så det är enkelt att komma igång med.
• ReactJS blev mycket populärt på kort tid och driver produkter som Facebook och InstagramDet används av många kända företag som Apple, NetflixEtc.
• Meta underhåller ReactJS-biblioteket, så det är väl underhållet och uppdaterat.
• ReactJS kan användas för att utveckla ett rikt användargränssnitt för både stationära och mobila appar.
• Lätt att felsöka och testa eftersom det mesta av kodningen görs i JavaScript snarare än i HTML.

Nackdelar med ReactJS

Här är nackdelar/nackdelar med att använda ReactJS:

• Det mesta av koden är skriven i JSX, dvs. HTML och CSS är en del av JavaSkript. Det kan vara ganska förvirrande, eftersom de flesta andra ramverk föredrar keeping HTML separat från JavaSkriptkod.
• Filstorleken för ReactJS är jämförelsevis stor.

Med tanke på avvägningarna är du redo att konfigurera React. Det snabbaste sättet att prova det är direkt från ett CDN, vilket vi går igenom först; npm-baserade konfigurationer för riktiga projekt följer därefter.

Använder ReactJS från CDN

För att börja arbeta med React måste vi först lägga till ReactJS på vår sida. Du kan enkelt komma igång med ReactJS med CDN:et. JavaSkriptfiler, som visas nedan.

Gå till den äldre React-dokumentationssidan för att hämta CDN-länkarna, t.ex. https://legacy.reactjs.org/docs/cdn-links.html, och du får de nödvändiga filerna förklarade i följande bild.

För 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>

För 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>

ersätta version med den React-version du vill ha för både react.development.js och react-dom.development.js. Vi använder version 16 på den här sidan så exemplen nedan körs oförändrade.

Om du planerar att använda CDN-filer, se till att behålla attributet crossorigin för att undvika problem med domänöverskridande data. ReactJS-kod kan inte köras direkt i webbläsaren och måste transpileras med Babel till vanlig text. JavaSkript innan det körs i webbläsaren.

Här är BabelJS-skriptet som kan användas:

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

Här är ett fungerande ReactJS-exempel med CDN-filer och 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>

Produktion:

Vi kommer att gå in på detaljerna i koden i nästa kapitel; låt oss se hur man arbetar med CDN-filer här. Att använda Babel-skriptet direkt är inte en bra praxis, och nybörjare bör bara använda det för att lära sig ReactJS för tillfället. I produktion måste du installera React med npm-paketet.

Använder NPM-paket

Se till att du har Node.js installerat. Om det inte är installerat, gå igenom den här handledningen för Node.js (https://www.guru99.com/node-js-tutorial.html) installation.

När du har Node.js installerat, skapa en mapp reactproj/.

För att börja med projektinställning, kör kommandot npm init.

Så här kommer mappstrukturen att se ut:

reactproj\
package.json

Nu ska vi installera de paket som vi behöver.

Här är listan över paket för ReactJS. Vi fäster React till version 16 så att ReactDOM.render exemplen på den här sidan fungerar exakt som visas:

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

Öppna kommandotolken och kör ovanstående kommandon i mappen reactproj/.

Skapa en mapp src / vart all JS-kod kommer att placeras. All kod för ReactJS-projektet kommer att finnas tillgänglig i mappen src/. Skapa en fil index.js och importera react och react-dom, som visas nedan.

index.js

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

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

Vi har skrivit grundkoden för ReactJS. Vi kommer att förklara detaljerna i nästa kapitel. Vi vill visa Hej, från Guru99 handledningar, och samma sak ges till DOM-elementet med id:t "root". Det är hämtat från index.html-filen, som är startfilen, som visas nedan.

Skapa en mapp public/ och lägg till index.html i den enligt nedan.

index.html

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

Paketet react-scripts kommer att ta hand om att kompilera koden och starta servern för att visa HTML-filen, dvs. index.html. Du måste lägga till kommandot i package.json som kommer att ta hand om att använda react-scripts för att kompilera koden och starta servern, som visas nedan:

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

Efter att ha installerat alla paket och lagt till kommandot ovan är den sista package.json som följer:

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

För att börja testa ReactJS, kör kommandot:

npm run start

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

Den öppnar webbläsaren med URL http://localhost:3000/ enligt nedanstående:

public/index.html

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

Vi kommer att använda samma process för att genomföra JavaSkriptfiler finns även i nästa kapitel. Lägg till alla dina .js- och .jsx-filer i src/-mappen. Filstrukturen kommer att se ut som följer:

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

Så här skapar du ditt första React-projekt

Här är en steg-för-steg-guide i den här ReactJS-handledningen för att komma igång med den första React-applikationen.

Steg 1) Importera reaktionspaketen.
1. För att börja med ReactJS måste vi först importera react-paketen enligt följande.

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

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

Steg 2) Skriv enkelt Code.
Vi kommer att skriva en enkel kod i denna handledning React JS, där vi kommer att visa meddelandet "Hej, från Guru99 handledningar!

ReactDOM.render(

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

ReactDOM.render kommer att lägga till tagg till elementet med id root. Här är HTML-filen vi har:

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

Steg 3) Kompilera Code.

Nästa i denna React.js-handledning måste vi kompilera koden för att få utdata i webbläsaren.

Här är mappstrukturen:

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

Vi har lagt till kommandona för att kompilera den slutliga filen i package.json enligt följande:

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

För att kompilera den slutliga filen, kör följande kommando:

npm run start

När du kör kommandot ovan kompileras filerna och du meddelas om det finns något fel. Om allt ser bra ut öppnas webbläsaren och sidan körs på http://localhost:3000/

Kommando: npm körstart:

C:\reactproj>npm run start

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

Steg 4) Kontrollera utdata.
Ocuco-landskapet URL http://localhost:3000 öppnas i webbläsaren när koden har kompilerats, som visas nedan:

Hur man konfigurerar React med Vite (modern metod)

React-scripts-konfigurationen ovan kommer från Create React App (CRA), som var standardstartverktyget i flera år. React-teamet avfärdade officiellt Create React App i februari 2025, så nya projekt bör istället använda ett modernt byggverktyg. Det populäraste valet idag är skruv, vilket startar snabbare och producerar mindre byggen.

Så här skapar du ett nytt React-projekt med Vite:

Steg 1) Kör kommandot scaffolding i din terminal:

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

Steg 2) Flytta till mappen och installera beroenden:

cd my-react-app
npm install

Steg 3) Starta utvecklingsservern:

npm run dev

Vite serverar appen kl. http://localhost:5173/ som standard och laddas om direkt när du sparar en fil.

Viktiga skillnader från den äldre konfigurationen på den här sidan:

• Inmatningsfilen är src/main.jsx istället för src/index.js.
• Den installerar den senaste versionen av React, som använder skapaRoot istället för ReactDOM.render.
• index.html finns i projektets rotfil, inte i public/.
• Byggen tillverkas med npm run build till en dist/-mapp.

För fullstack-behov som routing och serverrendering rekommenderar React-teamet även ramverk som Next.jsAllt du lär dig i kapitlen nedan — JSX, komponenter, tillstånd och props — gäller oförändrat i ett Vite- eller Next.js-projekt.

Vad är JSX?

JSX är en utökning av JavaSkript. Det är ett mallskript där du kan använda HTML och JavaManus tillsammans.

Här är ett enkelt exempel på en JSX-kod.

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

Varför behöver vi JSX i React?

För ett användargränssnitt behöver vi HTML, och varje element i DOM-koden kommer att ha händelser som ska hanteras, tillståndsändringar etc.

När det gäller React tillåter det oss att använda HTML och JavaSkript i samma fil och hantera tillståndsändringarna i DOM:en på ett effektivt sätt.

Uttryck i JSX

Här är ett enkelt exempel på hur man använder uttryck i JSX.

I tidigare ReactJS-exempel hade vi skrivit något i stil med:

index.js

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

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

Vi ska nu ändra koden ovan för att lägga till uttryck. Uttryck används inom klammerparenteser {}, och de expanderas under körning. Uttryck i React är desamma som JavaSkriptuttryck.

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

Låt oss nu testa detsamma i webbläsaren.

Du kan se på skärmbilden ovan att uttrycket {display} inte ersätts. React vet inte vad det ska göra när ett uttryck används i en .js-fil.

Låt oss nu lägga till ändringar och skapa en .jsx-fil, som visas nedan:

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 till den nödvändiga koden och kommer att använda test.jsx-filen i index.js. Vi vill att h1tagg variabeln som ska användas inuti index.js, så att densamma exporteras som visas ovan i test.jsx.

Här är den modifierade koden i index.js:

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

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

För att använda test.jsx i index.js måste vi först importera den enligt nedan:

import h1tag from './test.jsx';

Vi kan använda h1taggen nu i ReactDOM.render som visas nedan:

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

Här är resultatet när vi kontrollerar detsamma i webbläsaren:

Vad är komponenter i ReactJS?

Komponenterna är som rena JavaSkriptfunktioner som gör koden enkel genom att dela upp logiken i återanvändbar oberoende kod.

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 skapat en funktion som heter Hej som returnerar en h1-tagg, som visas ovan. Funktionens namn fungerar som ett element, som visas nedan:

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

Komponenten Hej används som en HTML-tagg, dvs. , tilldelad den Hello_comp variabel, och densamma exporteras med hjälp av export.

Låt oss nu använda den här komponenten i index.js-filen enligt nedan:

index.js

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

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

Här är resultatet i webbläsaren:

Klass som komponent

Här är ett ReactJS-exempel som använder en klass 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 använda Hello-komponenten i index.js-filen enligt följande:

index.js

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

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

Komponenten Hello används som en HTML-tagg, dvs. .

Här är resultatet av densamma.

Klasskomponenter kontra funktionskomponenter och krokar

Du har nu sett båda sätten att skriva en komponent, så vilket ska du använda? Den här sidan lär ut klasskomponenter eftersom de gör tillstånds- och livscykelkoncept explicita, vilket är värdefullt för nybörjare och fortfarande förekommer i äldre kodbaser. Men sedan React 16.8 introducerade Hooks kan funktionskomponenter också innehålla tillstånd, och de är den rekommenderade stilen för all ny kod.

Aspect	Klasskomponent	Funktionskomponent med krokar
Ange	this.state och this.setState()	useState() Hook
Livscykel	componentDidMount, componentDidUpdate, componentWillAvmontera	useEffect() Hook täcker alla tre
syntax	Mer standardtext (konstruktor, bind, detta)	Kortare, nej detta sökord
Status	Stödd, äldre stil	Rekommenderas för ny kod

Här är tillståndsexemplet från den här sidan omskrivet med useState Hook:

import React, { useState } from 'react';

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

Båda versionerna ger samma utdata. Lär dig klasssyntaxen som används i kapitlen nedan och öva sedan på att konvertera varje exempel till Hooks.

Vad är en stat i ReactJS?

En stat är en JavaSkriptobjekt, liknande props, som lagrar data som ska användas med ReactJS-renderingen. Tillståndsdata är ett privat objekt och används inom komponenter i en klass.

Exempel på stat

Här är ett fungerande exempel på hur man använder state inuti en klass.

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

Detta är vad vi får när vi testar det i webbläsaren:

Vad är rekvisita i ReactJS?

Props är egenskaper som ska användas inuti en komponent. De fungerar som globala objekt eller variabler som kan användas inuti komponenten.

Rekvisita till funktionskomponent

Här är ett exempel på att skicka rekvisita till 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 visas ovan har vi lagt till msg attribut till komponent. Samma sak kan nås som rekvisita inuti Hello-funktionen, vilket är ett objekt som kommer att ha msg attributdetaljer, och detsamma används som ett uttryck.

Komponenten används i index.js enligt följande:

index.js

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

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

Här är resultatet i webbläsaren:

Rekvisita till klasskomponent

För att komma åt rekvisita i en klass kan vi göra det så här:

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-landskapet msg attribut skickas till komponenten i index.js enligt följande:

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

Detta är resultatet i webbläsaren:

Kontrollera också: - AngularJS Handledning för nybörjare: Lär dig AngularJS steg för steg

Livscykel för en komponent

Med komponenter, tillstånd och props täckta är nästa steg att förstå när React anropar din komponents metoder. En komponentlivscykel är indelad i stegen Initialisering, Montering, Uppdatering och Avmontering.

Här är en detaljerad förklaring av varje steg.

En komponent i ReactJS har följande steg:

Initieringen: Detta är det första steget i komponentens livscykel.

Här kommer den att ha standardrekvisita och tillstånd på den initiala nivån.

MonteringI den här fasen renderas komponenten inuti DOM:n. Vi har erfarenhet av följande metoder i monteringsläge:

• render(): Du har den här metoden för alla skapade komponenter. Den returnerar HTML-noden.
• componentDidMount(): Detta anropas omedelbart efter att komponenten har lagts till i DOM:n.

UppdateringI det här tillståndet interagerar användaren med DOM:en och den uppdateras. Om du till exempel skriver in något i textrutan uppdateras tillståndsegenskaperna.

Följande är de metoder som är tillgängliga i uppdateringsläget:

• shouldComponentUpdate(): anropas före omrendering; låter dig bestämma om komponenten ska uppdateras. Om true returneras omrenderas komponenten.
• componentDidUpdate(): anropas efter att komponenten har uppdaterats.

Avmontering: Detta tillstånd uppstår när komponenten inte behövs eller tas bort.

Följande är metoden som är tillgänglig i avmonterat tillstånd:

• componentWillUnmount(): anropas precis innan komponenten tas bort eller förstörs.

Arbetsexempel på livscykelmetoder

Här är ett fungerande exempel som visar de metoder som anropas i varje steg.

Exempel: 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 kontrollerar utdata i webbläsaren:

I webbläsarkonsolen får du:

När användaren går in i textrutan:

I konsolen visas följande meddelanden:

Nu när du vet när en komponent renderas och uppdateras, låt oss tillämpa tillstånd och händelser på ett praktiskt användningsfall: hantering av användarinmatning via formulär.

Arbeta med formulär

I ReactJS, HTML-inmatningselement som , , och <select /> har sina egna tillstånd och behöver uppdateras när användaren interagerar med hjälp av setState()-metoden.

I det här kapitlet ska vi se hur man arbetar med formulär i ReactJS.

Här är ett fungerande exempel:

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;

För inmatningsfälten behöver vi bibehålla tillståndet, så för det tillhandahåller React en speciell metod som kallas setState, vilket hjälper till att bibehålla tillståndet när det sker en förändring. I en verklig applikation, anropa även event.preventDefault() inuti formSubmit för att hindra webbläsaren från att ladda om sidan vid inskickning.

Vi har använt händelserna onChange och onClick på textrutan och skicka-knappen. När användaren skriver i textrutan anropas onChange-händelsen och namnfältet i state-objektet uppdateras, som visas nedan:

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

Utdata i webbläsaren är som följer:

Steg 1) Ange ditt namn i textrutan:

Steg 2) Klicka på knappen Skicka:

Arbeta med evenemang i ReactJS

Formulär är bara en källa till användarinteraktion. Att arbeta med händelser i ReactJS är på samma sätt som hur du skulle ha gjort det i JavaSkript. Du kan använda alla händelsehanterare som används i JavaSkript. Metoden setState() används för att uppdatera tillståndet när användaren interagerar med ett HTML-element.

Här är ett fungerande exempel på hur man använder händelser 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;

För inmatningsfälten behöver vi bibehålla tillståndet, så för det tillhandahåller React setState metod, som hjälper till att bibehålla tillståndet när det sker en förändring.

Vi har använt händelserna på Ändra och onclick på textrutan och knappen. När användaren skriver i textrutan, på Ändra händelsen anropas och namnfältet inuti tillståndsobjektet uppdateras, enligt nedan:

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

Här är resultatet i webbläsaren:

När en användare anger namnet:

När användaren klickar på knappen Klicka här:

Arbeta med Inline CSS i ReactJS

När dina komponenter hanterar data och händelser är det sista steget att utforma dem. Vi ska titta på ett fungerande exempel för att förstå 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;

Jag har lagt till färgen: 'röd' stil 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')
);

Utdata i webbläsaren är som följer:

Du kan skapa ett objekt med den stil du vill ha på elementet och använda ett uttryck för att lägga till stilen, som visas i exemplet ovan.

Arbeta med extern CSS i ReactJS

Låt oss skapa en extern CSS-fil. För det, skapa en mapp som heter css/ och lägg till style.css i den.

style.css

.h1tag {
color:red;
}

Lägg till style.css i 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>

Nu lägger vi till 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')
);

Attributet className får klassinformationen. Observera att JSX använder classname istället för HTML-attributet class, eftersom class är ett reserverat nyckelord i JavaSkript. Nu ska vi testa det i webbläsaren.

Det här är vad du ser när du granskar h1-taggen i webbläsaren:

Du kan se att class="h1tag" har lagts till i h1-taggen.

Varför ReactDOM.render ersattes av createRoot

Varje exempel på den här sidan monterar appen med ReactDOM.render, vilket är korrekt för React 16 och 17, de versioner som den här kursen riktar sig till. React 18, som släpptes i mars 2022, ersatte den startpunkten med createRoot API, och React 19 tog bort ReactDOM.render helt. Anledningen är samtidighet: createRoot gör det möjligt för React att förbereda flera versioner av användargränssnittet samtidigt, avbryta lågprioriterad rendering och behålla ty.ping och animationer smidiga. Funktioner som automatisk batchning, useTransition och spänningsbaserad streaming är alla beroende av det.

Den moderna motsvarigheten till index.js som används på hela den här sidan ser ut så här:

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

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

Allt annat du lärt dig här – komponenter, JSX, tillstånd, props och händelser – fungerar på samma sätt efter denna ändring på en rad vid startpunkten. Versionsskillnader som denna dyker ofta upp i Intervjufrågor om React JS, så det lönar sig att förstå båda API:erna.

Vanliga frågor

Kontrollera också: - Topp 70 React Intervju Frågor och Svar (Uppdaterad)