ReactJS-i õpetus algajatele

Mis on ReactJS?

ReactJS on avatud lähtekoodiga esiots JavaSkriptiteek kasutajaliideste loomiseks. ReactJS Seda haldab Meta (endine Facebook) ja individuaalsete arendajate ning ettevõtete kogukond. Seda kasutatakse laialdaselt alusena üheleheliste rakenduste ja mobiilirakenduste loomisel. Seda on väga lihtne kasutada ja see võimaldab kasutajatel luua korduvkasutatavaid kasutajaliidese komponente.

Enne Reacti koodi esimese rea kirjutamist on kasulik teada, mis eristab teeki tavalisest teekist. JavaSkript. Järgmises osas tutvustatakse selle põhifunktsioone.

ReactJS-i omadused

JSX: JSX on laiendus JavaSkript. Kuigi JSX-i kasutamine Reactis pole kohustuslik, on see üks häid omadusi ja seda on lihtne kasutada.

KompkletisKomponendid on nagu puhtad JavaSkriptifunktsioonid, mis aitavad koodi lihtsustada, jagades loogika korduvkasutatavaks sõltumatuks koodiks. Komponente saab kasutada funktsioonidena ja komponente klassidena. Komponentidel on ka olek ja propsid, mis teeb elu lihtsaks. Klassikomponendi sees hallatakse olekut ja propse.

Virtuaalne DOM: React loob virtuaalse DOM-i, st mälusisese andmestruktuuri vahemälu. Ainult viimased muudatused värskendatakse hiljem brauseri DOM-is, mis tagab kiire renderdamise.

JavaSkripti avaldised: JS-avaldisi saab JSX-failides kasutada looksulgudes, näiteks {}.

ReactJS-i eelised

Siin on ReactJS-i kasutamise olulised plussid/eelised:

• ReactJS kasutab virtuaalset DOM-i, mis kasutab mälusisest andmestruktuuri vahemälu ja brauseri DOM-is värskendatakse ainult viimaseid muudatusi. See muudab rakenduse kiiremaks.
• Reacti komponentide funktsiooni abil saate luua oma valitud komponente. Komponente saab taaskasutada ja need on abiks ka koodi haldamisel.
• ReactJS on avatud lähtekoodiga JavaSkriptiteek, seega on sellega lihtne alustada.
• ReactJS muutus lühikese aja jooksul väga populaarseks ja annab jõudu sellistele toodetele nagu Facebook ja InstagramSeda kasutavad paljud kuulsad ettevõtted, näiteks Apple, NetflixJne
• Meta haldab ReactJS teeki, seega on see hästi hooldatud ja ajakohane.
• ReactJS-i saab kasutada rikkaliku kasutajaliidese arendamiseks nii töölaua- kui ka mobiilirakenduste jaoks.
• Lihtne siluda ja testida, kuna suurem osa kodeerimisest on tehtud JavaScript mitte HTML-is.

ReactJS-i puudused

Siin on ReactJS-i kasutamise miinused/puudused:

• Suurem osa koodist on kirjutatud JSX-is, st HTML ja CSS on osa sellest. JavaSkript. See võib olla üsna segane, kuna enamik teisi raamistikke eelistab kee'dping HTML eraldi JavaSkripti kood.
• ReactJS-i failisuurus on suhteliselt suur.

Teades kompromisse, olete valmis Reacti seadistama. Kiireim viis seda proovida on otse CDN-ist, mida me esimesena käsitleme; npm-põhised seadistused päris projektide jaoks järgnevad.

CDN-i ReactJS-i kasutamine

Reactiga töötamise alustamiseks peame kõigepealt oma lehele lisama ReactJS-i. ReactJS-i kasutamist saate hõlpsalt CDN-iga alustada. JavaSkriptifailid, nagu allpool näidatud.

CDN-i linkide saamiseks minge pärand-Reacti dokumentatsiooni saidile, nt https://legacy.reactjs.org/docs/cdn-links.htmlja saate vajalikud failid, mida on selgitatud järgmisel pildil.

Arendaja jaoks

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

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>

asendama versioon nii react.development.js kui ka react-dom.development.js jaoks soovitud Reacti versiooniga. Sellel lehel kasutame versiooni 16, seega allolevad näited töötavad muutmata kujul.

Kui plaanite CDN-faile kasutada, siis veenduge, et säilitaksite atribuudi crossorigin, et vältida domeenidevahelisi probleeme. ReactJS-koodi ei saa otse brauseris käivitada ja see tuleb Babeli abil tavaliseks tõlkida. JavaSkript enne brauseris käivitamist.

Siin on BabelJS-i skript, mida saab kasutada:

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

Siin on toimiv ReactJS-i näide, mis kasutab CDN-faile ja BabelJS-i skripti.

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

Väljund:

Järgmises peatükis süveneme koodi üksikasjadesse; vaatame siin CDN-failidega töötamist. Babeli skripti otsene kasutamine pole hea tava ja uustulnukad peaksid seda praegu kasutama ainult ReactJS-i õppimiseks. Tootmiskeskkonnas peate Reacti installima npm-paketi abil.

NPM-pakettide kasutamine

Veendu, et sul on Node.js installitud. Kui pole, siis vaata läbi see Node.js õpetus (https://www.guru99.com/node-js-tutorial.html) paigaldus.

Kui Node.js on installitud, looge kaust reageerimisprojekt/.

Projekti seadistamisega alustamiseks käivitage käsk npm inits.

Nii näeb välja kaustastruktuur:

reactproj\
package.json

Nüüd installime vajalikud paketid.

Siin on ReactJS-i pakettide loend. Me lisasime Reacti versioonile 16, nii et ReactDOM.render Sellel lehel olevad näited toimivad täpselt nii, nagu näidatud:

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

Avage käsuviip ja käivitage ülaltoodud käsud kaustas reactproj/.

Looge kaust src / kuhu kogu JS kood läheb. Kogu ReactJS projekti kood on saadaval kaustas src/. Loo fail index.js ja impordi sinna react ja react-dom, nagu allpool näidatud.

index.js

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

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

Oleme kirjutanud ReactJS-i põhikoodi. Selle üksikasju selgitame järgmises peatükis. Tahame näidata Tere, alates Guru99 õpetustja sama antakse DOM-elemendile ID-ga „root“. See võetakse failist index.html, mis on algfail, nagu allpool näidatud.

Loo kaust public/ ja lisa sinna index.html, nagu allpool näidatud.

index.html

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

Pakett react-scripts hoolitseb koodi kompileerimise ja serveri käivitamise eest HTML-faili, st index.html, kuvamiseks. Peate lisama käsu package.json faili, mis kasutab react-scripts koodi kompileerimiseks ja serveri käivitamiseks, nagu allpool näidatud:

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

Pärast kõigi pakettide installimist ja ülaltoodud käsu lisamist on lõplik package.json järgmine:

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

ReactJS-i testimise alustamiseks käivitage käsk:

npm run start

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

See avab brauseri koos URL http://localhost:3000/ nagu allpool näidatud:

public/index.html

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

Me kasutame sama protsessi selle teostamiseks JavaSkriptifailid ka järgmistes peatükkides. Lisa kõik oma .js ja .jsx failid src/ kausta. Failistruktuur on järgmine:

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

Kuidas luua oma esimese reaktsiooni projekti seadistus

Selles ReactJS-i õpetuses on samm-sammult juhend esimese Reacti rakendusega alustamiseks.

Step 1) Importige reageerimispaketid.
1. ReactJS-iga alustamiseks peame esmalt importima reacti paketid järgmiselt.

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

2. Salvesta fail nimega index.js kausta src/.

Step 2) Kirjutage lihtne Code.
Kirjutame selles õpetuses React JS lihtsa koodi, kus kuvame sõnumi "Tere, minult Guru99 õpetust!

ReactDOM.render(

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

ReactDOM.render lisab silt elemendile, mille ID on root. Siin on HTML-fail, mis meil on:

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

Step 3) Koostage Code.

Järgmisena peame selles React.js õpetuses koodi kompileerima, et saada väljund brauseris.

Siin on kausta struktuur:

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

Lisasime failis package.json lõpliku faili koostamiseks käsud järgmiselt:

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

Lõpliku faili kompileerimiseks käivitage järgmine käsk:

npm run start

Kui käivitate ülaltoodud käsu, kompileerib see failid ja teavitab teid võimalikest vigadest. Kui kõik tundub hea, avab see brauseri ja käivitab lehe aadressil http://localhost:3000/

Käsk: npm käivitus:

C:\reactproj>npm run start

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

Step 4) Kontrollige väljundit.
. URL http://localhost:3000 avaneb brauseris pärast koodi kompileerimist, nagu allpool näidatud:

Kuidas seadistada React Vite'iga (kaasaegne lähenemine)

Ülaltoodud react-skriptide seadistus pärineb Create React Appist (CRA), mis oli aastaid standardne käivitaja. Reacti meeskond aegus ametlikult Create React Appi 2025. aasta veebruaris, seega peaksid uued projektid selle asemel kasutama moodsat ehitustööriista. Tänapäeval on kõige populaarsem valik Elab, mis käivitub kiiremini ja annab tulemuseks väiksemaid koopiaid.

Siit saate teada, kuidas Vite'iga uut Reacti projekti luua:

Step 1) Käivita terminalis tellingute käsk:

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

Step 2) Liikuge kausta ja installige sõltuvused:

cd my-react-app
npm install

Step 3) Käivitage arendusserver:

npm run dev

Vite pakub rakendust aadressil http://localhost:5173/ vaikimisi ja laadib faili salvestamisel kohe uuesti.

Peamised erinevused sellel lehel olevast vanemast seadistusest:

• Sissekandefail on src/main.jsx src/index.js asemel.
• See installib uusima Reacti, mis kasutab createRoot ReactDOM.renderi asemel.
• index.html asub projekti juurkataloogis, mitte kaustas public/.
• Ehitised on toodetud koos npm run build dist/ kausta.

Täispaketi vajaduste jaoks, nagu marsruutimine ja serveri renderdamine, soovitab Reacti meeskond ka selliseid raamistikke nagu Järgmine.jsKõik allolevates peatükkides õpitu – JSX, komponendid, olek ja rekvisiidid – rakendub muutmata kujul Vite'i või Next.js-i projektis.

Mis on JSX?

JSX on laiendus JavaSkript. See on malliskript, kus saate kasutada HTML-i ja JavaSkript koos.

Siin on lihtne näide JSX-koodist.

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

Miks me vajame Reactis JSX-i?

Kasutajaliidese jaoks vajame HTML-i ja igal DOM-i elemendil on sündmused, mida tuleb käsitleda, oleku muutused jne.

Reacti puhul võimaldab see meil kasutada HTML-i ja JavaSkript samas failis ja hoolitse DOM-i oleku muutuste eest tõhusalt.

Avaldised JSX-is

Siin on lihtne näide avaldiste kasutamisest JSX-is.

Varasemates ReactJS-i näidetes kirjutasime midagi sellist:

index.js

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

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

Nüüd muudame ülaltoodud koodi, et lisada avaldisi. Avaldisi kasutatakse looksulgudes {} ja neid laiendatakse käitusaja jooksul. Reacti avaldised on samad, mis JavaSkripti avaldised.

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

Proovime nüüd sama brauseris.

Ülaltoodud ekraanipildil on näha, et avaldist {display} ei asendata. React ei tea, mida teha, kui avaldist kasutatakse .js-failis.

Lisame nüüd muudatused ja loome jsx-faili, nagu allpool näidatud:

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;

Oleme lisanud vajaliku koodi ja kasutame index.js-is faili test.jsx. Me tahame, et h1tag muutuja, mida kasutatakse failis index.js, seega eksporditakse sama, nagu eespool näidatud failis test.jsx.

Siin on muudetud kood failis index.js:

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

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

test.jsx kasutamiseks index.js-is peame selle kõigepealt importima, nagu allpool näidatud:

import h1tag from './test.jsx';

Saame nüüd kasutada h1tagit ReactDOM.renderis, nagu allpool näidatud:

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

Siin on väljund, kui kontrollime sama brauseris:

Mis on ReactJS-i komponendid?

Komponendid on nagu puhtad JavaSkriptifunktsioonid, mis aitavad koodi lihtsamaks muuta, jagades loogika korduvkasutatavateks sõltumatuteks koodideks.

Komponendid kui funktsioonid

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;

Oleme loonud funktsiooni nimega Tere mis tagastab h1 sildi, nagu eespool näidatud. Funktsiooni nimi toimib elemendina, nagu allpool näidatud:

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

Komponent Tere kasutatakse HTML-sildina, st , määratud Tere_komp muutuja ja sama eksporditakse ekspordi abil.

Kasutame nüüd seda komponenti failis index.js, nagu allpool näidatud:

index.js

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

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

Siin on väljund brauseris:

Klassige komponendina

Siin on ReactJS-i näide, mis kasutab komponendina klassi.

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;

Me saame failis index.js olevat komponenti Hello kasutada järgmiselt:

index.js

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

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

Komponenti Hello kasutatakse HTML-sildina, st .

Siin on sama väljund.

Klassikomponendid vs funktsioonikomponendid ja konksud

Nüüd olete näinud mõlemat komponendi kirjutamise viisi, seega millist peaksite kasutama? See leht õpetab klassikomponente, kuna need muudavad oleku ja elutsükli kontseptsioonid selgesõnaliseks, mis on algajatele väärtuslik ja esineb endiselt vanemates koodibaasides. Kuna React 16.8 tutvustas aga konksusid, saavad ka funktsioonikomponendid olekut hoida ja need on soovitatav stiil kogu uue koodi jaoks.

Aspekt	Klassi komponent	Funktsioonikomponent konksudega
riik	this.state ja this.setState()	useState() konks
Elutsükkel	komponentDidMount, komponentDidUpdate, komponentWillUnmount	useEffect() Konks katab kõik kolm
Süntaks	Rohkem malli (konstruktor, sidumine, see)	Lühem, seda märksõna pole
olek	Toetatud, pärandstiil	Soovitatav uue koodi jaoks

Siin on sellelt lehelt pärit oleku näide, mis on ümber kirjutatud useState konksu abil:

import React, { useState } from 'react';

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

Mõlemad versioonid renderdavad sama väljundit. Õpi selgeks allolevates peatükkides kasutatud klassi süntaks ja harjuta seejärel iga näite teisendamist konksudeks.

Mis on olek ReactJS-is?

Riik on JavaSkriptiobjekt, sarnane propsidega, mis sisaldab ReactJS-i renderdamiseks vajalikke andmeid. Olekuandmed on privaatne objekt ja neid kasutatakse klassi komponentide sees.

Osariigi näide

Siin on toimiv näide oleku kasutamisest klassis.

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

Seda saame brauseris testides:

Mis on ReactJS-i rekvisiidid?

Rekvisiidid (props) on komponendi sees kasutatavad omadused. Need toimivad globaalsete objektide või muutujatena, mida saab komponendi sees kasutada.

Funktsioonikomponendi rekvisiidid

Siin on näide rekvisiitide edastamisest funktsioonikomponendile.

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;

Nagu eespool näidatud, oleme lisanud msg omistada komponent. Samale pääseb ligi ka rekvisiidid funktsiooni Hello sees, mis on objekt, millel on msg atribuudi üksikasjad ja sama kasutatakse väljendina.

Seda komponenti kasutatakse failis index.js järgmiselt:

index.js

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

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

Siin on väljund brauseris:

Rekvisiidid klassi komponendile

Klassi rekvisiitidele ligipääsemiseks saame seda teha järgmiselt:

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 atribuut edastatakse faili index.js komponendile järgmiselt:

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

See on brauseri väljund:

Kontrollige ka: - AngularJS-i õpetus algajatele: õppige AngularJS-i samm-sammult

Komponendi elutsükkel

Kui komponendid, olek ja propsid on käsitletud, on järgmine samm mõista, millal React teie komponendi meetodeid kutsub. Komponendi elutsükkel jaguneb initsialiseerimise, ühendamise, värskendamise ja lahtiühendamise etappideks.

Siin on iga etapi üksikasjalik selgitus.

ReactJS-i komponendil on järgmised etapid:

Vormindamine: see on komponendi elutsükli esimene etapp.

Siin on sellel vaikerekvisiidid ja olek algtasemel.

PaigaldamineSelles etapis renderdatakse komponent DOM-i sees. Paigaldusolekus on meil ligipääs järgmistele meetoditele:

• render(): See meetod on olemas kõigi loodud komponentide jaoks. See tagastab HTML-sõlme.
• componentDidMount(): Seda kutsutakse kohe pärast komponendi lisamist DOM-i.

VärskendusedSelles olekus suhtleb kasutaja DOM-iga ja seda värskendatakse. Näiteks kui sisestate midagi tekstikasti, värskendatakse oleku omadusi.

Värskendusolekus on saadaval järgmised meetodid:

• shouldComponentUpdate(): kutsutakse välja enne uuesti renderdamist; see võimaldab teil otsustada, kas komponenti tuleks uuendada. Väärtuse "true" tagastamine renderdab komponendi uuesti.
• componentDidUpdate(): kutsutakse välja pärast komponendi uuendamist.

Lahtimonteerimine: See olek tuleb pildile siis, kui komponenti pole vaja või see eemaldatakse.

Järgnev on meetod, mis on saadaval lahtiühendatud olekus:

• componentWillUnmount(): kutsutakse välja vahetult enne komponendi eemaldamist või hävitamist.

Elutsükli meetodite töönäide

Siin on toimiv näide, mis näitab igal etapil kutsutavaid meetodeid.

Näide: 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')
);

Kui kontrollite brauseris väljundit:

Brauseri konsoolis kuvatakse järgmine teave:

Kui kasutaja sisestab tekstikasti:

Konsoolis kuvatakse järgmised teated:

Nüüd, kui teate, millal komponent renderdatakse ja uueneb, rakendame olekut ja sündmusi praktilisel kasutusjuhul: kasutaja sisendi käsitlemine vormide kaudu.

Töötamine vormidega

ReactJS-is HTML-i sisendelemendid, näiteks , ja <select /> omavad oma olekut ning neid tuleb kasutaja interaktsiooni korral värskendada, kasutades meetodit setState().

Selles peatükis vaatame, kuidas ReactJS-is vormidega töötada.

Siin on toimiv näide:

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;

Sisendväljade puhul peame säilitama olekut, seega pakub React selleks spetsiaalset meetodit nimega setState, mis aitab olekut muutuste korral säilitada. Reaalses rakenduses kutsutakse ka event.preventDefault() formSubmit sees, et takistada brauseril lehe uuesti laadimist esitamisel.

Oleme tekstikasti ja submit-nupu peal kasutanud sündmusi onChange ja onClick. Kui kasutaja tekstikasti trükib, kutsutakse sündmus onChange ja olekuobjekti nimeväli uuendatakse, nagu allpool näidatud:

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

Väljund brauseris on järgmine:

Step 1) Sisesta oma nimi tekstikasti:

Step 2) Klõpsake nuppu Esita:

ReactJS-i sündmustega töötamine

Vormid on ainult üks kasutaja interaktsiooni allikas. Sündmustega töötamine ReactJS-is on sama, mis see oleks tehtud ka teises versioonis. JavaSkript. Saate kasutada kõiki sündmusekäitlejaid, mida kasutatakse JavaSkript. Meetodit setState() kasutatakse oleku värskendamiseks, kui kasutaja suhtleb mis tahes HTML-elemendiga.

Siin on toimiv näide sündmuste kasutamisest ReactJS-is.

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;

Sisendväljade puhul peame säilitama oleku, seega pakub React selleks setState meetod, mis aitab säilitada olekut alati, kui toimub muutus.

Oleme üritusi kasutanud me muutume ja onClick tekstikasti ja nupu peal. Kui kasutaja tekstikasti trükib, siis me muutume Sündmust kutsutakse ja olekuobjekti nimevälja uuendatakse, nagu allpool näidatud:

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

Siin on väljund brauseris:

Kui kasutaja sisestab nime:

Kui kasutaja klõpsab nuppu Click Here:

Inline CSS-iga töötamine ReactJS-is

Kui komponendid on andmeid ja sündmusi käsitlenud, on viimane samm nende kujundamine. Vaatame toimivat näidet, et mõista ReactJS-i tekstisisest CSS-i.

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;

Lisasin h1 sildile värvi stiilis 'punane'.

index.js

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

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

Väljund brauseris on järgmine:

Saate luua objekti soovitud stiiliga elemendile ja kasutada stiili lisamiseks avaldist, nagu ülaltoodud näites näidatud.

Välise CSS-iga töötamine ReactJS-is

Loome välise CSS-faili. Selleks loo kaust css/ ja lisa sinna style.css.

style.css

.h1tag {
color:red;
}

Lisage style.css oma index.html faili

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

Nüüd lisame klassi .jsx-faili h1-sildile.

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

Atribuudile className antakse klassi üksikasjad. Pange tähele, et JSX kasutab klassiNimi HTML-i atribuudi class asemel, kuna class on reserveeritud märksõna JavaSkript. Nüüd testime seda brauseris.

Seda näete brauseris h1-sildi kontrollimisel:

Näete, et class="h1tag" on edukalt h1 sildile lisatud.

Miks asendati ReactDOM.render fail createRoot'iga?

Kõik sellel lehel olevad näited ühendavad rakenduse ReactDOM.renderiga, mis on õige React 16 ja 17 versioonide puhul, millele see kursus on suunatud. 2022. aasta märtsis välja antud React 18 asendas selle sisenemispunkti createRoot API-ga ja React 19 eemaldas ReactDOM.renderi täielikult. Põhjus on samaaegsus: createRoot võimaldab Reactil korraga ette valmistada mitu kasutajaliidese versiooni, katkestada madala prioriteediga renderdamise ja hoida tüüpilisi liideseid.ping ja animatsioonid sujuvad. Sellised funktsioonid nagu automaatne pakkimine, useTransition ja põnevuspõhine voogesitus sõltuvad kõik sellest.

Sellel lehel kasutatud index.js tänapäevane vaste näeb välja selline:

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

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

Kõik muu, mida siin õppisite – komponendid, JSX, olek, propsid ja sündmused – toimib pärast seda üherealist muudatust sisenemispunktis samamoodi. Sellised versioonierinevused esinevad sageli React JS intervjuuküsimused, seega tasub mõlemat API-t mõista.

KKK

Kontrollige ka: - 70 kõige populaarsemat reageerimisintervjuu küsimust ja vastust (värskendatud)