ReactJS-opetusohjelma aloittelijoille

Mikä on ReactJS?

ReactJS on avoimen lähdekoodin käyttöliittymä JavaSkriptikirjasto käyttöliittymien rakentamiseen. ReactJS ylläpitää Meta (entinen Facebook) ja yksittäisten kehittäjien ja yritysten yhteisö. Sitä käytetään laajalti pohjana yksisivuisten sovellusten ja mobiilisovellusten rakentamisessa. Se on erittäin helppokäyttöinen ja antaa käyttäjille mahdollisuuden luoda uudelleenkäytettäviä käyttöliittymäkomponentteja.

Ennen kuin kirjoitat ensimmäisen rivin React-koodia, on hyödyllistä tietää, mikä erottaa kirjaston tavallisesta koodista. JavaSkripti. Seuraavassa osiossa käydään läpi sen ydinominaisuudet.

ReactJS:n ominaisuudet

JSX: JSX on laajennus JavaSkripti. Vaikka JSX:n käyttö Reactissa ei ole pakollista, se on yksi hyvistä ominaisuuksista ja helppokäyttöinen.

komponentitKomponentit ovat kuin puhtaita JavaSkriptifunktiot, jotka helpottavat koodia jakamalla logiikan uudelleenkäytettäväksi itsenäiseksi koodiksi. Voimme käyttää komponentteja funktioina ja komponentteja luokkina. Komponenteilla on myös tila ja propsit, mikä helpottaa toimintaa. Luokkakomponentin sisällä ylläpidetään tilaa ja propseja.

Virtuaalinen DOM: React luo virtuaalisen DOM:n eli muistissa olevan tietorakennevälimuistin. Vain lopulliset muutokset päivittyvät myöhemmin selaimen DOM:iin, mikä pitää renderöinnin nopeana.

JavaSkriptilausekkeet: JS-lausekkeita voidaan käyttää JSX-tiedostoissa käyttämällä aaltosulkeita, esimerkiksi {}.

ReactJS:n edut

Tässä ovat ReactJS:n käytön tärkeät edut/hyödyt:

• ReactJS käyttää virtuaalista DOMia, joka hyödyntää muistissa olevaa tietorakennevälimuistia, ja vain viimeiset muutokset päivitetään selaimen DOMiin. Tämä tekee sovelluksesta nopeamman.
• Voit luoda haluamiasi komponentteja React-komponenttiominaisuuden avulla. Komponentteja voidaan käyttää uudelleen, ja ne ovat myös hyödyllisiä koodin ylläpidossa.
• ReactJS on avoimen lähdekoodin JavaSkriptikirjasto, joten aloittaminen on helppoa.
• ReactJS:stä tuli lyhyessä ajassa erittäin suosittu ja se tukee tuotteita, kuten Facebookia ja InstagramSitä käyttävät monet kuuluisat yritykset, kuten Apple, Netflix, Jne
• Meta ylläpitää ReactJS-kirjastoa, joten sitä ylläpidetään hyvin ja pidetään ajan tasalla.
• ReactJS:ää voidaan käyttää monipuolisen käyttöliittymän kehittämiseen sekä työpöytä- että mobiilisovelluksille.
• Helppo virheenkorjaus ja testaus, koska suurin osa koodauksesta on tehty JavaKäsikirjoitus HTML:n sijaan.

ReactJS:n haitat

Tässä on ReactJS:n käytön haittoja/haittoja:

• Suurin osa koodista on kirjoitettu JSX:llä, eli HTML ja CSS ovat osa sitä. JavaSkripti. Se voi olla melko hämmentävää, koska useimmat muut kehykset suosivat kee-komentosarjaa.ping HTML erillään JavaKäsikirjoituskoodi.
• ReactJS:n tiedostokoko on suhteellisen suuri.

Tietäen kompromissit, olet valmis asentamaan Reactin. Nopein tapa kokeilla sitä on suoraan CDN:stä, jota käsittelemme ensin; npm-pohjaiset asennukset oikeille projekteille seuraavat sen jälkeen.

ReactJS:n käyttäminen CDN:stä

Aloittaaksemme Reactin käytön meidän on ensin lisättävä ReactJS sivullemme. Voit helposti aloittaa ReactJS:n käytön CDN:n kanssa. JavaSkriptitiedostot, kuten alla on esitetty.

Siirry vanhan Reactin dokumentaatiosivustolle saadaksesi CDN-linkit, eli https://legacy.reactjs.org/docs/cdn-links.html, ja saat tarvittavat tiedostot selitettynä seuraavassa kuvassa.

Kehittäjälle

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

Tuot

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

korvata versio haluamallasi React-versiolla sekä react.development.js:lle että react-dom.development.js:lle. Käytämme tällä sivulla versiota 16, joten alla olevat esimerkit toimivat muuttumattomina.

Jos aiot käyttää CDN-tiedostoja, varmista, että säilytät crossorigin-attribuutin verkkotunnusten välisten ongelmien välttämiseksi. ReactJS-koodia ei voida suorittaa suoraan selaimessa, ja se on käännettävä Babelin avulla tavalliseen muotoon. JavaSkripti ennen sen suorittamista selaimessa.

Tässä on BabelJS-skripti, jota voidaan käyttää:

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

Tässä on toimiva ReactJS-esimerkki, jossa käytetään CDN-tiedostoja ja BabelJS-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>

lähtö:

Seuraavassa luvussa perehdymme koodin yksityiskohtiin; katsotaanpa, miten CDN-tiedostojen kanssa työskennellään. Babel-skriptin käyttö suoraan ei ole hyvä käytäntö, ja aloittelijoiden tulisi käyttää sitä toistaiseksi vain ReactJS:n oppimiseen. Tuotannossa sinun on asennettava React npm-paketilla.

NPM-pakettien käyttö

Varmista, että Node.js on asennettu. Jos sitä ei ole asennettu, katso tämä Node.js-opastusvideo (https://www.guru99.com/node-js-tutorial.html) asennus.

Kun olet asentanut Node.js:n, luo kansio reactproj/.

Aloita projektin määrittäminen suorittamalla komento npm init.

Näin kansiorakenne näyttää:

reactproj\
package.json

Nyt asennamme tarvitsemamme paketit.

Tässä on luettelo ReactJS-paketeista. Kiinnitämme Reactin versioon 16, jotta ReactDOM.render Tämän sivun esimerkit toimivat täsmälleen näin:

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

Avaa komentokehote ja suorita yllä olevat komennot reactproj/-kansiossa.

Luo kansio src / jonne kaikki JS-koodi menee. Kaikki ReactJS-projektin koodi on saatavilla src/-kansiossa. Luo tiedosto index.js ja tuo siihen react ja react-dom, kuten alla on esitetty.

index.js

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

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

Olemme kirjoittaneet ReactJS:n peruskoodin. Selitämme sen yksityiskohdat seuraavassa luvussa. Haluamme näyttää Hei, täältä Guru99 opetusohjelmaa, ja sama annetaan DOM-elementille, jonka id on ”root”. Se otetaan index.html-tiedostosta, joka on aloitustiedosto, kuten alla on esitetty.

Luo public/-kansio ja lisää siihen index.html alla olevan kuvan mukaisesti.

index.html

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

Paketti react-scripts hoitaa koodin kääntämisen ja palvelimen käynnistämisen HTML-tiedoston, eli index.html:n, näyttämiseksi. Sinun on lisättävä package.json-tiedostoon komento, joka huolehtii koodin kääntämisestä ja palvelimen käynnistämisestä react-scriptsien avulla, kuten alla on esitetty:

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

Kun olet asentanut kaikki paketit ja lisännyt yllä olevan komennon, lopullinen package.json on seuraava:

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

Aloita ReactJS:n testaus suorittamalla komento:

npm run start

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

Se avaa selaimen, jossa on URL http://localhost:3000/ kuten alla:

public/index.html

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

Aiomme käyttää samaa prosessia suorittaaksemme JavaSkriptitiedostoja myös seuraavissa luvuissa. Lisää kaikki .js- ja .jsx-tiedostosi src/-kansioon. Tiedostorakenne on seuraava:

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

Kuinka luoda First React -projektiasetuksesi

Tässä ReactJS-opetusohjelmassa on vaiheittainen opas ensimmäisen React-sovelluksen aloittamiseen.

Vaihe 1) Tuo reaktiopaketit.
1. ReactJS:n aloittamiseksi meidän on ensin tuotava react-paketit seuraavasti.

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

2. Tallenna tiedosto nimellä index.js src/-kansioon.

Vaihe 2) Kirjoita yksinkertainen Code.
Kirjoitamme tähän opetusohjelmaan React JS yksinkertaisen koodin, jossa näytämme viestin "Hei, täältä Guru99 opetusohjelmaa!

ReactDOM.render(

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

ReactDOM.render lisään tagin elementtiin, jonka id on root. Tässä on HTML-tiedosto, joka meillä on:

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

Vaihe 3) Käännä Code.

Seuraavaksi tässä React.js-opetusohjelmassa meidän on käännettävä koodi saadaksemme tulosteen selaimeen.

Tässä on kansiorakenne:

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

Olemme lisänneet komennot lopullisen tiedoston kääntämiseksi package.json-tiedostoon seuraavasti:

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

Lopullisen tiedoston kääntämiseksi suorita seuraava komento:

npm run start

Kun suoritat yllä olevan komennon, se kääntää tiedostot ja ilmoittaa sinulle, jos tapahtuu virhe. Jos kaikki näyttää hyvältä, se avaa selaimen ja suorittaa sivun osoitteessa http://localhost:3000/

Komento: npm ajon aloitus:

C:\reactproj>npm run start

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

Vaihe 4) Tarkista lähtö.
URL http://localhost:3000 avautuu selaimessa, kun koodi on käännetty, kuten alla näkyy:

Reactin käyttöönotto Viten avulla (moderni lähestymistapa)

Yllä oleva react-skriptien asennus on peräisin Create React Appista (CRA), joka oli vakioaloitustyökalu vuosien ajan. React-tiimi vanhensi Create React Appin virallisesti helmikuussa 2025, joten uusien projektien tulisi käyttää sen sijaan modernia rakennustyökalua. Nykyään suosituin vaihtoehto on ruuvi, joka käynnistyy nopeammin ja tuottaa pienempiä koonnoksia.

Näin luot uuden React-projektin Vitellä:

Vaihe 1) Suorita scaffolding-komento terminaalissasi:

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

Vaihe 2) Siirry kansioon ja asenna riippuvuudet:

cd my-react-app
npm install

Vaihe 3) Käynnistä kehityspalvelin:

npm run dev

Vite tarjoaa sovellusta osoitteessa http://localhost:5173/ oletuksena ja latautuu uudelleen välittömästi, kun tallennat tiedoston.

Tärkeimmät erot tällä sivulla olevaan vanhempaan asetukseen verrattuna:

• Merkintätiedosto on src/main.jsx src/index.js:n sijaan.
• Se asentaa uusimman Reactin, joka käyttää createRoot ReactDOM.renderin sijaan.
• index.html sijaitsee projektin juuressa, ei public/-hakemistossa.
• Rakennukset tuotetaan npm run build dist/-kansioon.

Täyden pinon tarpeisiin, kuten reititykseen ja palvelimen renderöintiin, React-tiimi suosittelee myös frameworkeja, kuten Next.jsKaikki alla olevissa luvuissa opittu – JSX, komponentit, tila ja propsit – pätee muuttumattomana Vite- tai Next.js-projektissa.

Mikä on JSX?

JSX on laajennus JavaSkripti. Se on malliskripti, jossa voit käyttää HTML:ää ja JavaKäsikirjoitus yhdessä.

Tässä on yksinkertainen esimerkki JSX-koodista.

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

Miksi tarvitsemme JSX:ää Reactissa?

Käyttöliittymää varten tarvitsemme HTML:ää, ja jokaisella DOM-elementillä on käsiteltävät tapahtumat, tilamuutokset jne.

Reactin tapauksessa se antaa meille mahdollisuuden hyödyntää HTML:ää ja JavaSkriptaa samaan tiedostoon ja hoida DOM:n tilamuutokset tehokkaasti.

JSX:n lausekkeet

Tässä on yksinkertainen esimerkki lausekkeiden käytöstä JSX:ssä.

Aiemmissa ReactJS-esimerkeissä olimme kirjoittaneet jotain tällaista:

index.js

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

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

Muutamme nyt yllä olevaa koodia lisätäksemme lausekkeita. Lausekkeita käytetään aaltosulkeiden {} sisällä, ja niitä laajennetaan suorituksen aikana. Reactin lausekkeet ovat samat kuin JavaSkriptilausekkeet.

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

Testataan nyt samaa selaimessa.

Yllä olevasta kuvakaappauksesta näet, että {display}-lauseketta ei korvata. React ei tiedä, mitä tehdä, kun lauseketta käytetään .js-tiedoston sisällä.

Lisätään nyt muutoksia ja luodaan .jsx-tiedosto alla olevan kuvan mukaisesti:

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;

Olemme lisänneet tarvittavan koodin ja käytämme test.jsx-tiedostoa index.js-tiedostossa. Haluamme, että h1tag muuttujaa käytetään index.js-tiedoston sisällä, joten sama viedään kuten yllä on esitetty test.jsx-tiedostossa.

Tässä on muokattu koodi index.js-tiedostossa:

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

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

Jotta voimme käyttää test.jsx-tiedostoa index.js-tiedostossa, meidän on ensin tuotava se alla olevan mukaisesti:

import h1tag from './test.jsx';

Voimme käyttää h1tagia nyt ReactDOM.renderissä alla esitetyllä tavalla:

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

Tässä on tulos, kun tarkistamme saman selaimessa:

Mitä komponentit ovat ReactJS:ssä?

Komponentit ovat kuin puhtaita JavaSkriptifunktiot, jotka helpottavat koodia jakamalla logiikan uudelleenkäytettäväksi itsenäiseksi koodiksi.

Komponentit funktioina

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;

Olemme luoneet funktion nimeltä Hei joka palauttaa h1-tagin, kuten yllä on esitetty. Funktion nimi toimii elementtinä, kuten alla on esitetty:

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

Komponentti Hei käytetään HTML-tagina, ts. , osoitettu Hello_comp muuttuja, ja sama viedään vientikomennolla.

Käytetään nyt tätä komponenttia index.js-tiedostossa alla olevan mukaisesti:

index.js

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

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

Tässä tuloste selaimessa:

Luokka komponentiksi

Tässä on ReactJS-esimerkki, joka käyttää luokkaa komponenttina.

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;

Voimme käyttää index.js-tiedoston Hello-komponenttia seuraavasti:

index.js

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

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

Hello-komponenttia käytetään HTML-tagina, ts. .

Tässä saman tulos.

Luokkakomponentit vs. funktiokomponentit ja koukut

Olet nyt nähnyt molemmat tavat kirjoittaa komponentti, joten kumpaa sinun pitäisi käyttää? Tämä sivu opettaa luokkakomponentteja, koska ne tekevät tila- ja elinkaarikäsitteet eksplisiittiseksi, mikä on hyödyllistä aloittelijoille ja esiintyy edelleen vanhoissa koodikannoissa. Koska React 16.8 esitteli Hookit, myös funktiokomponentit voivat sisältää tilan, ja ne ovat suositeltu tyyli kaikelle uudelle koodille.

Aspect	Luokan komponentti	Toimintokomponentti koukkujen kanssa
Osavaltio	this.state ja this.setState()	useState()-koukku
Lifecycle	komponenttiDidMount, komponenttiDidUpdate, komponenttiWillUnmount	useEffect() Hook kattaa kaikki kolme
Syntaksi	Lisää mallipohjaa (konstruktori, sidonta, tämä)	Lyhyempi, ei tätä avainsanaa
Tila	Tuettu, vanha tyyli	Suositellaan uudelle koodille

Tässä on tältä sivulta löytyvä tilaesimerkki, joka on kirjoitettu uudelleen useState-koukulla:

import React, { useState } from 'react';

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

Molemmat versiot renderöivät saman tulosteen. Opi alla olevissa luvuissa käytetty luokkasyntaksi ja harjoittele sitten kunkin esimerkin muuntamista Hookeiksi.

Mikä on tila ReactJS:ssä?

Valtio on JavaSkriptiobjekti, samanlainen kuin props, joka sisältää ReactJS-renderöinnin kanssa käytettävää dataa. Tiladata on yksityinen objekti ja sitä käytetään luokan sisällä olevissa komponenteissa.

Esimerkki valtiosta

Tässä on toimiva esimerkki tilan käytöstä luokan sisällä.

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

Tämän saamme, kun testaamme sitä selaimessa:

Mitä rekvisiitta ReactJS:ssä ovat?

Propit ovat komponentin sisällä käytettäviä ominaisuuksia. Ne toimivat globaaleina objekteina tai muuttujina, joita voidaan käyttää komponentin sisällä.

Rekvisiitta toiminnalliseen komponenttiin

Tässä on esimerkki rekvisiittajen välittämisestä funktiokomponenttiin.

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;

Kuten yllä on esitetty, olemme lisänneet mm. msg ominaisuus komponentti. Samaan pääsee käsiksi nimellä rekvisiitta Hello-funktion sisällä, joka on objekti, jolla on msg attribuutin tiedot, ja samaa käytetään lausekkeena.

Komponenttia käytetään index.js:ssä seuraavasti:

index.js

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

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

Tässä tuloste selaimessa:

Rekvisiitta luokan komponenttiin

Päästäksemme käsiksi luokan propseihin, voimme tehdä sen seuraavasti:

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 attribuutti välitetään index.js:n komponentille seuraavasti:

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

Tämä on selaimen tulos:

Tarkista myös: - AngularJS-opastus aloittelijoille: Opi AngularJS askel askeleelta

Komponentin elinkaari

Kun komponentit, tila ja propsit on käsitelty, seuraava askel on ymmärtää, milloin React kutsuu komponenttiesi metodeja. Komponentin elinkaari jaetaan alustus-, asennus-, päivitys- ja irrotusvaiheisiin.

Tässä on yksityiskohtainen selitys jokaisesta vaiheesta.

ReactJS:n komponentilla on seuraavat vaiheet:

Alustus: Tämä on komponenttien elinkaaren ensimmäinen vaihe.

Täällä sillä on oletusrekvisiitta ja tila alkuperäisellä tasolla.

AsennusTässä vaiheessa komponentti renderöidään DOM:n sisällä. Käytettävissämme ovat seuraavat metodit liitostilassa:

• render(): Tämä metodi on käytettävissä kaikille luoduille komponenteille. Se palauttaa HTML-solmun.
• componentDidMount(): Tätä kutsutaan heti komponentin lisäämisen jälkeen DOM:iin.

PäivityksetTässä tilassa käyttäjä on vuorovaikutuksessa DOM:n kanssa ja se päivittyy. Esimerkiksi kirjoittamalla jotain tekstikenttään, tilan ominaisuudet päivittyvät.

Päivitystilassa käytettävissä olevat menetelmät ovat seuraavat:

• shouldComponentUpdate(): kutsutaan ennen uudelleenrenderöintiä; sen avulla voit päättää, päivitetäänkö komponentti. Arvolla true komponentti renderöidään uudelleen.
• componentDidUpdate(): kutsutaan komponentin päivityksen jälkeen.

Irrottaminen: Tämä tila tulee kuvaan, kun komponenttia ei tarvita tai se poistetaan.

Seuraava on irrotustilassa käytettävissä oleva menetelmä:

• componentWillUnmount(): kutsutaan juuri ennen komponentin poistamista tai tuhoamista.

Elinkaarimenetelmien työesimerkki

Tässä on toimiva esimerkki, joka näyttää kussakin vaiheessa kutsuttavat metodit.

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

Kun tarkistat tulosteen selaimessa:

Selainkonsolissa näet:

Kun käyttäjä kirjoittaa tekstiruutuun:

Konsolissa näkyvät seuraavat viestit:

Nyt kun tiedät, milloin komponentti renderöidään ja päivittyy, sovelletaanpa tilaa ja tapahtumia käytännön käyttötapaukseen: käyttäjän syötteen käsittelyyn lomakkeiden kautta.

Lomakkeiden kanssa työskentely

ReactJS:ssä HTML-syöteelementit, kuten , , ja <select /> :lla on oma tilansa ja ne on päivitettävä käyttäjän vuorovaikutuksessa setState()-metodin avulla.

Tässä luvussa näemme, miten lomakkeiden kanssa työskennellään ReactJS:ssä.

Tässä toimiva esimerkki:

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;

Syöttökenttien osalta meidän on ylläpidettävä tilaa, joten sitä varten React tarjoaa erityisen metodin nimeltä setState, joka auttaa ylläpitämään tilaa aina muutoksen tapahtuessa. Todellisessa sovelluksessa kutsutaan myös event.preventDefault() formSubmit-komennon sisällä estääksesi selainta lataamasta sivua uudelleen lähetyksen yhteydessä.

Olemme käyttäneet tekstiruudussa ja lähetä-painikkeessa onChange- ja onClick-tapahtumia. Kun käyttäjä kirjoittaa tekstiruutuun, kutsutaan onChange-tapahtumaa ja tilaobjektin sisällä oleva nimikenttä päivittyy alla olevan mukaisesti:

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

Tulostus selaimessa on seuraava:

Vaihe 1) Kirjoita nimesi tekstikenttään:

Vaihe 2) Klikkaa lähetyspainiketta:

Työskentely tapahtumien kanssa ReactJS:ssä

Lomakkeet ovat vain yksi käyttäjän vuorovaikutuksen lähde. Tapahtumien kanssa työskentely ReactJS:ssä on sama kuin mitä olisit tehnyt aiemminkin. JavaSkripti. Voit käyttää kaikkia tapahtumankäsittelijöitä, joita käytetään JavaSkripti. setState()-metodia käytetään tilan päivittämiseen, kun käyttäjä on vuorovaikutuksessa minkä tahansa HTML-elementin kanssa.

Tässä on toimiva esimerkki tapahtumien käytöstä ReactJS:ssä.

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;

Syöttökenttien osalta meidän on ylläpidettävä tilaa, joten React tarjoaa sitä varten setState menetelmä, joka auttaa ylläpitämään tilaa aina, kun tapahtuu muutos.

Olemme hyödyntäneet tapahtumia muutamme ja klikkaamalla tekstikentässä ja painikkeessa. Kun käyttäjä kirjoittaa tekstikenttään, muutamme tapahtumaa kutsutaan ja tilaobjektin sisällä oleva nimikenttä päivitetään alla olevan mukaisesti:

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

Tässä tuloste selaimessa:

Kun käyttäjä syöttää nimen:

Kun käyttäjä napsauttaa Napsauta tästä -painiketta:

Työskentely Inline CSS:n kanssa ReactJS:ssä

Kun komponenttisi käsittelevät dataa ja tapahtumia, viimeinen vaihe on niiden muotoilu. Tarkastelemme toimivaa esimerkkiä ymmärtääksemme ReactJS:n inline-CSS:ää.

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;

Olen lisännyt värin 'punainen' tyylin h1-tagiin.

index.js

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

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

Tulostus selaimessa on seuraava:

Voit luoda objektin, jonka elementtiin haluat tyylin, ja käyttää lauseketta tyylin lisäämiseen, kuten yllä olevassa esimerkissä on esitetty.

Työskentely ulkoisen CSS:n kanssa ReactJS:ssä

Luodaan ulkoinen CSS-tiedosto. Sitä varten luodaan kansio css/ ja lisätään siihen style.css.

style.css

.h1tag {
color:red;
}

Lisää style.css index.html-tiedostoosi

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

Lisätään nyt luokka .jsx-tiedoston h1-tagiin.

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-attribuutille annetaan luokan tiedot. Huomaa, että JSX käyttää luokan nimi HTML-luokka-attribuutin sijaan, koska luokka on varattu avainsana HTML-koodissa JavaSkripti. Testataanpa sitä nyt selaimessa.

Näet tämän, kun tarkastelet h1-tagia selaimessa:

Voit nähdä, että class="h1tag" on lisätty onnistuneesti h1-tagiin.

Miksi ReactDOM.render korvattiin createRootilla

Jokainen tällä sivulla oleva esimerkki liittää sovelluksen ReactDOM.renderillä, mikä pätee React 16- ja 17-versioihin, joihin tämä kurssi on suunnattu. Maaliskuussa 2022 julkaistu React 18 korvasi kyseisen aloituskohdan createRoot-rajapinnalla, ja React 19 poisti ReactDOM.renderin kokonaan. Syynä on samanaikaisuus: createRoot mahdollistaa Reactin valmistella useita käyttöliittymäversioita samanaikaisesti, keskeyttää matalan prioriteetin renderöinnin ja pitää ty...ping ja animaatiot ovat sujuvia. Ominaisuudet, kuten automaattinen eräajo, useTransition ja jännityspohjainen suoratoisto, ovat kaikki siitä riippuvaisia.

Tällä sivulla käytetyn index.js:n moderni vastine näyttää tältä:

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

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

Kaikki muu tässä oppimasi – komponentit, JSX, tila, propsit ja tapahtumat – toimivat samalla tavalla tämän aloituskohdan yhden rivin muutoksen jälkeen. Tällaisia ​​versioeroja esiintyy usein React JS -haastattelukysymykset, joten kannattaa ymmärtää molemmat API:t.

UKK

Tarkista myös: - 70 suosituinta React-haastattelun kysymystä ja vastausta (päivitetty)