ReactJS oktatóanyag kezdőknek

Mi az a ReactJS?

ReactJS egy nyílt forráskódú front-end JavaSzkriptkönyvtár felhasználói felületek létrehozásához. ReactJS A Meta (korábban Facebook) és egyéni fejlesztőkből és vállalatokból álló közösség tartja karban. Széles körben használják egyoldalas alkalmazások és mobilalkalmazások fejlesztésének alapjául. Nagyon könnyen használható, és lehetővé teszi a felhasználók számára újrafelhasználható felhasználói felület komponensek létrehozását.

Mielőtt megírnád a React kód első sorát, hasznos tudni, hogy miben különbözik a könyvtár a sima kódtól. JavaSzkript. A következő szakasz a főbb funkcióit mutatja be.

A ReactJS jellemzői

JSX: A JSX egy kiterjesztés a JavaSzkript. Bár nem kötelező JSX-et használni a Reactben, ez az egyik jó tulajdonsága és könnyen használható.

alkatrészekAz alkatrészek olyanok, mint a tiszta JavaSzkriptfüggvények, amelyek megkönnyítik a kódot azáltal, hogy a logikát újrafelhasználható, független kódokra bontják. A komponenseket függvényként, a komponenseket pedig osztályként használhatjuk. A komponenseknek állapotuk és propjaik is vannak, ami megkönnyíti az életet. Egy osztálykomponensen belül az állapot és a propok kerülnek karbantartásra.

Virtuális DOM: A React létrehoz egy virtuális DOM-ot, azaz egy memórián belüli adatstruktúra-gyorsítótárat. Csak a végső változtatások frissülnek később a böngésző DOM-jában, ami folyamatosan gyors renderelést biztosít.

JavaSzkriptkifejezések: A JS kifejezések a JSX fájlokban kapcsos zárójelek használatával használhatók, például {}.

A ReactJS előnyei

Íme a ReactJS használatának fontos előnyei/kedvező hatásai:

• A ReactJS egy virtuális DOM-ot használ, amely egy memórián belüli adatstruktúra-gyorsítótárat használ, és csak a végső változtatások frissülnek a böngésző DOM-jában. Ez gyorsabbá teszi az alkalmazást.
• A React komponens funkciójával tetszés szerint létrehozhatsz komponenseket. A komponensek újrafelhasználhatók, és a kód karbantartásában is hasznosak.
• A ReactJS egy nyílt forráskódú JavaSzkriptkönyvtár, így könnyű vele kezdeni.
• A ReactJS rövid idő alatt nagyon népszerűvé vált, és olyan termékeket működtet, mint a Facebook és a InstagramSzámos híres cég használja, mint például az Apple, NetflixStb
• A Meta tartja karban a ReactJS könyvtárat, így az jól karbantartott és naprakész.
• A ReactJS gazdag felhasználói felület fejlesztésére használható asztali és mobilalkalmazásokhoz egyaránt.
• Könnyű hibakeresés és tesztelés, mivel a legtöbb kódolás be van fejezve JavaForgatókönyv a HTML helyett.

A ReactJS hátrányai

Íme a ReactJS használatának hátrányai/hátrányai:

• A kód nagy része JSX-ben íródott, azaz a HTML és a CSS is része a JSX-nek. JavaSzkript. Ez elég zavaró lehet, mivel a legtöbb más keretrendszer a kee-t részesíti előnyben.ping A HTML elkülönül a JavaSzkript kódja.
• A ReactJS fájlmérete viszonylag nagy.

Ismerve a kompromisszumokat, készen állsz a React beállítására. A leggyorsabb módja a kipróbálásnak közvetlenül egy CDN-ről, amelyet először tárgyalunk; a valós projektekhez készült npm-alapú beállítások ezt követően következnek.

A ReactJS használata a CDN-ből

Ahhoz, hogy elkezdhessük a Reacttel való munkát, először hozzá kell adnunk a ReactJS-t az oldalunkhoz. A ReactJS használatát könnyen elkezdheted a CDN-nel. JavaSzkriptfájlok, ahogy az alább látható.

A CDN linkekért látogassa meg a régi React dokumentációs oldalt, azaz https://legacy.reactjs.org/docs/cdn-links.html, és a szükséges fájlokat a következő képen ismertetjük.

A fejlesztő számára

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

Cserélje változat a kívánt React verzióval mind a react.development.js, mind a react-dom.development.js fájlokhoz. Ezen az oldalon a 16-os verziót használjuk, így az alábbi példák változatlanul futnak.

Ha CDN-fájlokat tervezel használni, mindenképpen tartsd meg a crossorigin attribútumot a domainek közötti problémák elkerülése érdekében. A ReactJS kód nem futtatható közvetlenül a böngészőben, és a Babel segítségével kell átírni plainre. JavaSzkript a böngészőben való végrehajtás előtt.

Íme a használható BabelJS szkript:

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

Íme egy működő ReactJS példa CDN fájlok és BabelJS szkript használatával.

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

output:

A kód részleteit a következő fejezetben tárgyaljuk; nézzük meg, hogyan kell itt dolgozni a CDN fájlokkal. A Babel szkript közvetlen használata nem ajánlott, és a kezdőknek egyelőre csak a ReactJS elsajátítására kell használniuk. Éles környezetben a Reactet az npm csomaggal kell telepíteni.

NPM-csomagok használata

Győződjön meg róla, hogy telepítve van a Node.js. Ha nincs telepítve, tekintse át ezt az oktatóanyagot a Node.js-ről (https://www.guru99.com/node-js-tutorial.html) telepítés.

Miután telepítetted a Node.js-t, hozz létre egy mappát reactproj/.

A projekt beállításához futtassa a parancsot npm init.

Így fog kinézni a mappastruktúra:

reactproj\
package.json

Most telepítjük a szükséges csomagokat.

Itt található a ReactJS csomagok listája. A Reactet a 16-os verzióhoz rögzítettük, így a ReactDOM.render Az oldalon található példák pontosan úgy futnak, ahogy látható:

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

Nyisd meg a parancssort, és futtasd a fenti parancsokat a reactproj/ mappában.

Hozzon létre egy mappát src / ahová az összes JS kód kerülni fog. A ReactJS projekthez tartozó összes kód elérhető lesz az src/ mappában. Hozz létre egy index.js fájlt, és importáld a react és a react-dom fájlokat az alábbiak szerint.

index.js

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

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

Megírtuk a ReactJS alapkódját. A részleteket a következő fejezetben ismertetjük. Be szeretnénk mutatni Üdvözlet, innen Guru99 oktatóanyag, és ugyanezt kapja a „root” azonosítójú DOM elem is. Ez az index.html fájlból származik, ami a start fájl, ahogy az alább látható.

Hozz létre egy public/ mappát, és add hozzá az index.html fájlt az alábbiak szerint.

index.html

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

A react-scripts csomag gondoskodik a kód fordításáról és a szerver elindításáról a HTML fájl, azaz az index.html megjelenítéséhez. Hozzá kell adnod a package.json fájlhoz a parancsot, amely a react-scripts használatával fordítja le a kódot és indítja el a szervert, az alábbiak szerint:

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

Az összes csomag telepítése és a fenti parancs hozzáadása után az utolsó package.json a következő:

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

A ReactJS tesztelésének megkezdéséhez futtassa a következő parancsot:

npm run start

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

Megnyitja a böngészőt a következővel: URL http://localhost:3000/ az alábbiak szerint:

public/index.html

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

Ugyanazt a folyamatot fogjuk használni a végrehajtáshoz JavaSzkriptfájlok a következő fejezetekben is. Add hozzá az összes .js és .jsx fájlodat az src/ mappához. A fájlszerkezet a következő lesz:

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

Hogyan készítsd el a First React projektbeállítást

Íme egy lépésről lépésre útmutató ebben a ReactJS oktatóanyagban, amely bemutatja az első React alkalmazás használatát.

Step 1) Importálja a reakciócsomagokat.
1. A ReactJS használatához először importálnunk kell a react csomagokat az alábbiak szerint.

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

2. Mentse el a fájlt index.js néven az src/ mappába.

Step 2) Egyszerű írás Code.
Ebben a React JS oktatóanyagban egy egyszerű kódot írunk, amelyben megjelenítjük az üzenetet „Üdvözlet innen: Guru99 oktatóanyag!

ReactDOM.render(

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

ReactDOM.render hozzá fogja tenni a tag a root azonosítójú elemhez. Itt látható a HTML fájl, amivel rendelkezünk:

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

Step 3) Fordítsd le a Code.

Ebben a React.js oktatóanyagban ezután le kell fordítanunk a kódot, hogy a kimenetet megkapjuk a böngészőben.

Íme a mappa szerkezete:

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

A következőképpen adtuk hozzá a parancsokat a csomag.json fájl végső fájljának fordításához:

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

A végleges fájl összeállításához futtassa a következő parancsot:

npm run start

A fenti parancs futtatásakor a program lefordítja a fájlokat, és értesít, ha bármilyen hiba történik. Ha minden jól néz ki, akkor megnyitja a böngészőt, és futtatja az oldalt a következő címen: http://localhost:3000/

Parancs: npm futás indítása:

C:\reactproj>npm run start

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

Step 4) Ellenőrizze a kimenetet.
Az URL http://localhost:3000 a kód lefordítása után megnyílik a böngészőben, az alábbiak szerint:

A React beállítása Vite-tal (modern megközelítés)

A fenti react-scripts beállítás a Create React App (CRA) alkalmazásból származik, ami évekig a standard indítóeszköz volt. A React csapata hivatalosan 2025 februárjában elavulttá tette a Create React App alkalmazást, így az új projekteknek modern build eszközt kell használniuk. A mai legnépszerűbb választás a életek, ami gyorsabban indul és kisebb buildeket hoz létre.

Így hozhatsz létre egy új React projektet a Vite-tal:

Step 1) Futtassa az állványozás parancsot a terminálban:

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

Step 2) Helyezd át a mappát és telepítsd a függőségeket:

cd my-react-app
npm install

Step 3) Indítsd el a fejlesztői szervert:

npm run dev

A Vite az alkalmazást a következő címen üzemelteti: http://localhost:5173/ alapértelmezés szerint, és azonnal újratöltődik, amikor ment egy fájlt.

A legfontosabb különbségek az ezen az oldalon található régebbi beállításhoz képest:

• A bejegyzésfájl a következő: src/main.jsx az src/index.js helyett.
• Telepíti a legújabb Reactet, amely a következőt használja: createRoot a ReactDOM.render helyett.
• Az index.html a projekt gyökerében található, nem pedig a public/ könyvtárban.
• Az építmények a következőkkel készülnek: npm run build egy dist/ mappába.

A teljes körű igényekhez, mint például az útválasztás és a szerver renderelés, a React csapata olyan keretrendszereket is ajánl, mint a Next.jsMinden, amit az alábbi fejezetekben tanulsz – JSX, komponensek, állapot és propok – változatlanul érvényes egy Vite vagy Next.js projektben.

Mi az a JSX?

A JSX egy kiterjesztés a JavaSzkript. Ez egy sablonszkript, amelyben HTML-t használhatsz és JavaForgatókönyv együtt.

Íme egy egyszerű példa a JSX kódra.

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

Miért van szükségünk JSX-re a Reactban?

Egy felhasználói felülethez HTML-re van szükségünk, és a DOM minden elemének kezelnie kell az eseményeket, az állapotváltozásokat stb.

A React esetében ez lehetővé teszi számunkra a HTML használatát és JavaSzkriptelj ugyanabban a fájlban, és hatékonyan kezeld az állapotváltozásokat a DOM-ban.

Kifejezések JSX-ben

Íme egy egyszerű példa a kifejezések használatára JSX-ben.

Korábbi ReactJS példákban valami ilyesmit írtunk:

index.js

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

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

Most módosítjuk a fenti kódot kifejezések hozzáadásával. A kifejezéseket kapcsos zárójelek {} között használjuk, és futásidőben kibővítjük őket. A Reactben a kifejezések ugyanazok, mint a JavaSzkriptkifejezések.

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

Teszteljük most ugyanezt a böngészőben.

A fenti képernyőképen látható, hogy a {display} kifejezés nincs lecserélve. A React nem tudja, mit tegyen, ha egy kifejezést egy .js fájlon belül használunk.

Adjunk hozzá változtatásokat, és hozzunk létre egy .jsx fájlt az alábbiak szerint:

teszt.jsx

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

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Hozzáadtuk a szükséges kódot, és a test.jsx fájlt fogjuk használni az index.js-ben. Azt szeretnénk, hogy a h1tag változót kell használni az index.js fájlon belül, tehát ugyanezt exportáljuk a test.jsx fájlban fent látható módon.

Itt van a módosított kód az index.js-ben:

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

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

Ahhoz, hogy a test.jsx fájlt az index.js fájlban használhassuk, először importálnunk kell azt az alábbiak szerint:

import h1tag from './test.jsx';

Használhatjuk a h1tag-et a ReactDOM.renderben, az alábbiak szerint:

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

Íme a kimenet, amikor megnézzük ugyanezt a böngészőben:

Mik azok a komponensek a ReactJS-ben?

Az összetevők olyanok, mint a tiszták JavaSzkriptfüggvények, amelyek megkönnyítik a kódot azáltal, hogy a logikát újrafelhasználható, független kódokra osztják.

A komponensek mint függvények

teszt.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;

Létrehoztunk egy függvényt Helló amely egy h1 taget ad vissza, ahogy fentebb látható. A függvény neve elemként működik, ahogy az alább látható:

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

Az alkatrész Helló HTML-címkeként használják, azaz , a következőhöz rendelve: Hello_comp változó, és ugyanez exportálható az export paranccsal.

Használjuk most ezt a komponenst az index.js fájlban az alábbiak szerint:

index.js

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

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

Íme a kimenet a böngészőben:

Osztályozás komponensként

Itt van egy ReactJS példa, amely egy osztályt használ összetevőként.

teszt.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;

Az index.js fájl Hello komponensét a következőképpen használhatjuk:

index.js

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

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

A Hello komponenst HTML tagként használjuk, azaz .

Itt van ugyanennek a kimenete.

Osztálykomponensek vs. függvénykomponensek és hookok

Most már mindkét módszert láttuk a komponensek írására, szóval melyiket érdemesebb használni? Ez az oldal az osztálykomponenseket tanítja, mert explicitté teszik az állapot- és életciklus-fogalmakat, ami értékes a kezdők számára, és még mindig megjelenik a régi kódbázisokban. Azonban, mióta a React 16.8 bevezette a Hooks-okat, a függvénykomponensek is tárolhatnak állapotot, és ezek az ajánlott stílusok minden új kódhoz.

Aspect	Osztálykomponens	Függvénykomponens horgokkal
Állami	this.state és this.setState()	useState() Hook
Életciklus	komponensDidMount, komponensDidUpdate, komponensWillUnmount	A useEffect() Hook mindhármat lefedi
Szintaxis	További sablonszövegek (constructor, bind, this)	Rövidebb, nincs ez a kulcsszó
Állapot	Támogatott, hagyományos stílus	Új kódhoz ajánlott

Íme az ezen az oldalon található állapotpélda, amelyet a useState Hook segítségével írtunk át:

import React, { useState } from 'react';

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

Mindkét verzió ugyanazt a kimenetet adja vissza. Tanuld meg az alábbi fejezetekben használt osztályszintaxist, majd gyakorold az egyes példák Horgokká konvertálását.

Mit jelent az állapot a ReactJS-ben?

Egy állam egy JavaEgy props-hoz hasonló szkript objektum, amely a ReactJS rendereléshez használandó adatokat tárolja. Az állapotadat egy privát objektum, amelyet egy osztályon belüli komponenseken belül használunk.

Példa az államra

Íme egy működő példa arra, hogyan használhatod az állapotot egy osztályon belül.

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

Ezt kapjuk, amikor teszteljük a böngészőben:

Mik azok a kellékek a ReactJS-ben?

A propok olyan tulajdonságok, amelyeket egy komponensen belül kell használni. Globális objektumként vagy változóként működnek, amelyek a komponensen belül használhatók.

Kellékek a funkcionális komponenshez

Íme egy példa a kellékek átadására egy függvénykomponensnek.

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;

Amint fentebb látható, hozzáadtuk a msg attribútum a komponens. Ugyanez érhető el, mint lábak a Hello függvényen belül, ami egy olyan objektum, ami a következővel fog rendelkezni: msg attribútum részleteit, és ugyanazt használják kifejezésként.

Az összetevő az index.js fájlban a következőképpen használatos:

index.js

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

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

Íme a kimenet a böngészőben:

Kellékek az osztálykomponenshez

Egy osztály propjainak eléréséhez a következőképpen tehetjük meg:

teszt.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;

Az msg attribútum a következőképpen kerül átadásra az index.js komponensének:

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

Ez a kimenet a böngészőben:

Ellenőrizze még:- AngularJS oktatóanyag kezdőknek: Ismerje meg az AngularJS-t lépésről lépésre

Egy komponens életciklusa

Miután a komponensekkel, az állapottal és a propokkal foglalkoztunk, a következő lépés annak megértése, hogy a React mikor hívja meg a komponensed metódusait. Egy komponens életciklusa inicializálásra, csatolásra, frissítésre és leválasztásra oszlik.

Itt található az egyes szakaszok részletes magyarázata.

A ReactJS-ben egy komponens a következő fázisokból áll:

Inicializálás: Ez az alkatrész életciklusának első szakasza.

Itt lesznek az alapértelmezett kellékek és az állapot a kezdeti szinten.

FelszerelésEbben a fázisban a komponens a DOM-on belül kerül renderelésre. A következő metódusok állnak rendelkezésünkre a csatolási állapotban:

• render(): Ez a metódus az összes létrehozott komponenshez rendelkezésre áll. Visszaadja a HTML csomópontot.
• componentDidMount(): Ez a függvény közvetlenül a komponens DOM-hoz való hozzáadása után hívódik meg.

FrissítésekEbben az állapotban a felhasználó interakcióba lép a DOM-mal, és az frissül. Például, ha beír valamit a szövegmezőbe, az állapottulajdonságok frissülnek.

A frissítési állapotban a következő módszerek érhetők el:

• shouldComponentUpdate(): újrarenderelés előtt hívódik meg; lehetővé teszi annak eldöntését, hogy a komponenst frissíteni kell-e. A „true” érték visszaadásakor a komponens újrarenderelésre kerül.
• componentDidUpdate(): a komponens frissítése után hívódik meg.

Leszerelés: Ez az állapot akkor jön létre, amikor az alkatrészre nincs szükség, vagy eltávolítják.

A következő metódus érhető el leválasztási állapotban:

• componentWillUnmount(): közvetlenül a komponens eltávolítása vagy megsemmisítése előtt hívódik meg.

Az életciklus-módszerek működő példája

Íme egy működő példa, amely bemutatja az egyes szakaszokban meghívott metódusokat.

Példa: 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')
);

Amikor a böngészőben ellenőrzi a kimenetet:

A böngésző konzoljában a következőket kapjuk:

Amikor a felhasználó beírja a szövegdobozba:

A konzolon a következő üzenetek jelennek meg:

Most, hogy tudjuk, mikor jelenik meg és frissül egy komponens, alkalmazzuk az állapotot és az eseményeket egy gyakorlati esetre: a felhasználói bevitel kezelésére űrlapokon keresztül.

Munka az űrlapokkal

A ReactJS-ben a HTML bemeneti elemek, mint például , , és a <select /> saját állapottal rendelkezik, és frissíteni kell őket, amikor a felhasználó interakcióba lép velük a setState() metódus használatával.

Ebben a fejezetben megnézzük, hogyan kell űrlapokkal dolgozni ReactJS-ben.

Íme egy működő példa:

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;

A beviteli mezőkhöz meg kell őriznünk az állapotot, ezért a React egy speciális metódust biztosít, az úgynevezett setState, amely segít fenntartani az állapotot, amikor változás történik. Egy valós alkalmazásban hívjuk meg még event.preventDefault() a formSubmit függvényen belül, hogy a böngésző ne töltse újra az oldalt a beküldéskor.

Az onChange és onClick eseményeket használtuk a szövegmezőn és a submit gombra kattintva. Amikor a felhasználó gépel a szövegmezőbe, az onChange esemény meghívódik, és a state objektumon belüli név mező frissül, az alábbiak szerint:

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

A böngészőben a kimenet a következő:

Step 1) Írd be a neved a szövegmezőbe:

Step 2) Kattintson a beküldés gombra:

Az események kezelése a ReactJS-ben

Az űrlapok csak egy forrásai a felhasználói interakciónak. Az eseményekkel való munka a ReactJS-ben ugyanúgy történik, mint ahogyan azt a ...-ban tetted volna. JavaSzkript. Használhatod az összes eseménykezelőt, amit a JavaSzkript. A setState() metódus az állapot frissítésére szolgál, amikor a felhasználó bármilyen HTML elemmel interakcióba lép.

Íme egy működő példa arra, hogyan használhatunk eseményeket a ReactJS-ben.

események.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;

A beviteli mezők esetében fenn kell tartanunk az állapotot, ehhez a React biztosítja a setState módszer, amely segít fenntartani az állapotot, amikor változás történik.

Kihasználtuk az eseményeket változunk és a kattintásra a szövegmezőn és a gombon. Amikor a felhasználó gépel a szövegmezőbe, a változunk Az esemény meghívódik, és az állapotobjektumon belüli név mező frissül, az alábbiak szerint:

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

Íme a kimenet a böngészőben:

Amikor a felhasználó beírja a nevet:

Amikor a felhasználó a Kattintson ide gombra kattint:

Az Inline CSS használata a ReactJS-ben

Miután a komponenseid kezelték az adatokat és az eseményeket, az utolsó lépés a formázásuk. Megnézünk egy működő példát, hogy megértsük a ReactJS-ben lévő beágyazott CSS-t.

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;

Hozzáadtam a 'piros' stílust a h1 taghez.

index.js

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

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

A böngészőben a kimenet a következő:

Létrehozhatsz egy objektumot a kívánt stílussal, és egy kifejezéssel hozzáadhatod a stílust, ahogy a fenti példában látható.

Munka külső CSS-szel a ReactJS-ben

Hozzunk létre egy külső CSS fájlt. Ehhez hozzunk létre egy css/ mappát, és tegyük bele a style.css fájlt.

style.css

.h1tag {
color:red;
}

Adja hozzá a style.css fájlt az index.html fájlhoz

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

Most adjuk hozzá az osztályt a .jsx fájl h1 tagjéhez.

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

A className attribútum az osztály részleteit tartalmazza. Fontos megjegyezni, hogy a JSX ezt használja. osztály név a HTML class attribútum helyett, mivel az class egy foglalt kulcsszó a JavaSzkript. Most teszteljük a böngészőben.

Ezt látod, amikor a böngészőben megvizsgálod a h1 taget:

Láthatjuk, hogy a class="h1tag" sikeresen hozzáadódott a h1 címkéhez.

Miért cserélték le a ReactDOM.rendert a createRoot-ra?

Az ezen az oldalon található összes példa a ReactDOM.renderrel csatolja az alkalmazást, ami helyes a React 16 és 17 verziókra, amelyeket ez a kurzus céloz meg. A 2022 márciusában kiadott React 18 ezt a belépési pontot a createRoot API-val helyettesítette, a React 19 pedig teljesen eltávolította a ReactDOM.render-t. Ennek oka a párhuzamosság: a createRoot lehetővé teszi a React számára, hogy egyszerre több felhasználói felület verziót készítsen elő, megszakítsa az alacsony prioritású renderelést, és megőrizze a typing és az animációk gördülékenyek. Az olyan funkciók, mint az automatikus kötegelés, a useTransition és a feszültségalapú streamelés, mind ettől függenek.

Az index.js modern megfelelője, amelyet ezen az oldalon használunk, így néz ki:

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

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

Minden más, amit itt tanultál – komponensek, JSX, állapot, propok és események – ugyanúgy működik a belépési pontnál végrehajtott egysoros módosítás után. Az ehhez hasonló verzióbeli különbségek gyakran előfordulnak a következőben: React JS interjúkérdések, ezért érdemes mindkét API-t megérteni.

GYIK

Ellenőrizze még:- A 70 legjobb React interjú kérdése és válasza (frissítve)