ReactJS oktatóanyag kezdőknek: Tanuljon lépésről lépésre példával

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 Facebook és az egyes fejlesztőkből és cégekből álló közösség tartja karban. Széles körben használják bázisként egyoldalas webhelyek és mobil alkalmazások készítéséhez. Nagyon könnyen használható, és lehetővé teszi a felhasználók számára, hogy újrafelhasználható felhasználói felület összetevőket hozzanak létre.

A ReactJS jellemzői

JSX: A JSX a javascript kiterjesztése. Bár nem kötelező a JSX használata reactben, ez az egyik jó tulajdonság és könnyen használható.

alkatrészek: Az összetevők olyanok, mint a tiszta javascript függvények, amelyek megkönnyítik a kódot azáltal, hogy a logikát újrafelhasználható független kódra osztják. A komponenseket függvényként, a komponenseket pedig osztályként használhatjuk. Az alkatrészeknek is van állapotuk, kellékeik, amelyek megkönnyítik az életet. Egy osztályon belül az egyes kellékek állapota megmarad.

Virtuális DOM: A React létrehoz egy virtuális dom-ot, azaz a memórián belüli adatstruktúra gyorsítótárat. Csak a DOM utolsó módosításai frissültek később a DOM böngészőkben.

Javascript Kifejezések: JS-kifejezések használhatók a jsx-fájlokban zárójelek használatával, például {}.

A ReactJS előnyei

Íme, a ReactJS használatának fontos előnyei/előnyei:

  • A ReactJS virtuális dom-ot használ, amely a memórián belüli adatstruktúra gyorsítótárat használja, és csak a végső módosítások frissülnek a böngészők dom-jában. Ez gyorsabbá teszi az alkalmazást.
  • Létrehozhat tetszőleges összetevőket a react összetevő funkció használatával. Az összetevők újra felhasználhatók, és a kód karbantartásában is hasznosak lehetnek.
  • A Reactjs egy nyílt forráskódú javascript könyvtár, így könnyű elkezdeni.
  • A ReactJS rövid időn belül nagyon népszerűvé vált, és a Facebook és az Instagram tartja karban. Számos híres cég használja, mint például az Apple, NetflixStb
  • A Facebook fenntartja a ReactJS-t, a könyvtárat, így jól karbantartott és folyamatosan frissített.
  • 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 Javascript nem pedig HTML-en.

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 van írva, azaz a HTML és a css a javascript része, ez meglehetősen zavaró lehet, mivel a legtöbb más keretrendszer jobban szereti a HTML-t elkülöníteni a javascript kódtól.
  • A ReactJS fájlmérete nagy.

A ReactJS használata a CDN-ből

A react használatához először telepítenünk kell a reactjs-t. Könnyen elkezdheti használni a reactjs használatát a CDN javascript fájlok használatával, az alábbiak szerint.

Látogassa meg a reactjs hivatalos webhelyét a CDN-hivatkozások beszerzéséhez, pl. https://reactjs.org/docs/cdn-links.html és megkapja a szükséges fájlokat a következő kép magyarázatához.

A ReactJS használata a CDN-ből

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 react-development.js és a react-dom.developement.js legújabb react verziójával. A reactjs-szal való munka megkezdéséhez a fájlokat a végén tárolhatja.

Abban az esetben, ha CDN-fájlokat kíván használni, ügyeljen arra, hogy megtartsa a cross-origin attribútumot, hogy elkerülje a tartományok közötti problémákat. A Reactjs kódot nem lehet közvetlenül a böngészőben végrehajtani, és a Babel segítségével javascriptbe kell átadni, mielőtt a böngészőben végrehajtaná.

Íme a használható BabelJS szkript:

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

Itt van a működő ReactJS példa cdn fájlokkal és babeljs szkripttel.

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

Prod kimenethez

A kód részleteire a következő fejezetben térünk ki, lássuk itt a CDN fájlokkal való munkát. Azt mondják, hogy a babel script közvetlen használata nem jó gyakorlat, és az újoncok egyelőre csak a reactjs megtanulására használhatják. A termelés során telepítenie kell a react-ot az npm csomag használatával.

NPM-csomagok használata

Győződjön meg arról, hogy a nodejs telepítve van. Ha nincs telepítve, olvassa el ezt a nodejs (https://www.guru99.com/node-js-tutorial.html) telepítés.

A nodejs telepítése után hozzon létre egy mappát reactproj/.

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

Így fog kinézni a mappaszerkezet:

reactproj\
package.json   

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

Íme a reactjs csomagok listája:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

Nyissa meg a parancssort, és futtassa a fenti parancsokat a reactproj/ mappában.

Hozzon létre egy mappát src / ahol az összes js-kód meg fog jönni abban a mappában. A reactjs projekt összes kódja elérhető lesz az src/ mappában. Hozzon létre egy index.js fájlt, és adja hozzá a react és a react-dom importálását 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')
);

Visszaküldtük a reactjs alapkódját. Ennek részleteit a következő fejezetben ismertetjük. Meg akarjuk jeleníteni Üdvözlöm a Guru99 oktatóprogramjait és ugyanezt kapja a „root” azonosítójú dom elem is. Az index.html fájlból származik, amely a kezdőfájl, az alábbiak szerint.

Hozzon létre egy public/ mappát, és adja 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 lefordí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 adnia egy parancsot a package.json fájlhoz, amely gondoskodik a react-scriptek használatáról a kód lefordításához és a szerver elindításához, 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",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

A reactjs tesztelésének megkezdéséhez futtassa a parancsot

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

Megnyílik a böngésző url-lel 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>

NPM-csomagok használata

Ugyanezt a folyamatot fogjuk használni a javascript fájlok futtatásához a következő fejezetekben is. Adja hozzá az összes js és .jsx fájlt az src/ mappába. A fájl szerkezete a következő lesz:

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

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

Ebben a ReactJS oktatóanyagban egy lépésről lépésre bemutatjuk az első react alkalmazással kezdődő útmutató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) Írj egyszerű kódot.
Ebben a React JS oktatóanyagban egy egyszerű kódot írunk, amelyben megjelenítjük az üzenetet „Üdvözlöm a Guru99 oktatóprogramjait!”

ReactDOM.render(

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

ReactDOM.render hozzáadja a tag az elemhez az id root azonosítóval. Itt van a nálunk lévő html fájl:

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

Step 3) Állítsa össze a kódot.

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égső fájl lefordításához futtassa a következő parancsot:

npm run start

A fenti parancs futtatásakor lefordítja a fájlokat, és hiba esetén értesíti Önt, ha minden rendben van, megnyitja a böngészőt, és futtatja az index.html fájlt http://localhost:3000/index.html

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 megnyílik a böngészőben, miután a kódot összeállították az alábbiak szerint:

A First React projekt kimenete

Mi az a JSX?

A JSX a javascript kiterjesztése. Ez egy sablonszkript, amelyben a HTML és a Javascript 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 szükségünk van a HTML-re, és a dom minden elemében lesznek kezelendő események, állapotváltozások stb.

A React esetén lehetővé teszi, hogy ugyanabban a fájlban használjuk a Html-t és a javascriptet, és hatékonyan gondoskodjunk a dom állapotváltozásairól.

Kifejezések JSX-ben

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

A korábbi ReactJS példákban 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 megváltoztatjuk a fenti kódot kifejezések hozzáadásához. A kifejezések a zárójelben {} találhatók, és a futási idő alatt kibővülnek. A react kifejezések ugyanazok, mint a javascript kifejezé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.

Kifejezések a JSX kimenetben

Látható, hogy a {display} kifejezés nincs lecserélve. A React nem tudja, mit tegyen, ha egy kifejezést használnak a .js fájlban.

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 text.jsx fájlt fogjuk használni az index.js fájlban. Azt akarjuk, hogy a h1tag változót a script.js fájlon belül kell használni, így ugyanazt a program exportálja, ahogyan fentebb a test.jsx fájlban látható

Itt található 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')
);


A test.jsx index.js-ben való használatához először importálni kell 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:

teljesítmény

Mik azok a komponensek a ReactJS-ben?

Az összetevők olyanok, mint a tiszta javascript függvények, amelyek megkönnyítik a kódot azáltal, hogy a logikát újrafelhasználható független kódra bontjá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 a fentiek szerint h1 címkét adott vissza. A függvény neve elemként működik, az alábbiak szerint:

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

A komponens Helló Html címkeként használják, pl. és hozzá van rendelve Hello_comp változót, és ugyanez exportálásra kerül az export segítségével.

Használjuk most ezt az összetevőt 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:

A ReactJS összetevőinek kimenete

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;

A Hello összetevőt az index.js fájlban 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 komponens HTML címkeként használatos, pl. .

Itt van ugyanennek a kimenete.

Osztály komponens kimenetként

Mit jelent az állapot a ReactJS-ben?

Az állapot egy JavaScript-objektum, amely hasonló azokhoz a kellékekhez, amelyek a reactjs rendereléséhez használandó adatokat tartalmaznak. Az állapotadatok egy privát objektum, és egy osztályon belüli összetevőkben használatosak.

Példa az államra

Itt van egy működő példa az állapot használatára 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:

Állapot a ReactJS kimenetben

Mik azok a kellékek a ReactJS-ben?

A kellékek 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;

Ahogy fentebb látható, hozzáadtuk msg tulajdonít neki Összetevő. Ugyanaz elérhető, mint lábak belül Hello függvény, amely egy objektum, amely a 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 a funkciókomponens kimenethez

Kellékek az osztálykomponenshez

Az osztály kellékeinek 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;

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

Osztálykomponens-kimenet kellékei

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

Egy komponens életciklusa

Az alkatrész életciklusa inicializálási, beszerelési, frissítési és leszerelési szakaszokra oszlik.

Itt található egy részletes magyarázat az egyes komponensekről.

A reactjs egyik összetevője a következő szakaszokbó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és: Ebben a fázisban a komponens a dom belsejében jelenik meg. Szerelési állapotban a következő módszereknek vagyunk kitéve.

  • componentDidMount(): Ez akkor is meghívásra kerül, ha a komponenst éppen a dom-hoz adják hozzá.
  • render(): Ez a metódus az összes létrehozott komponenshez használható. Visszaadja a HTML csomópontot.

Frissítések: Ebben az állapotban a dom-ot egy felhasználó kezeli és frissíti. Például beír valamit a szövegdobozba, így az állapottulajdonságok frissülnek.

Az alábbi módszerek állnak rendelkezésre frissítési állapotban:

  • shouldComponentUpdate() : az összetevő frissítésekor hívják meg.
  • componentDidUpdate() : a komponens frissítése után.

Leszerelés: ez az állapot akkor jelenik meg a képben, ha az Összetevőre nincs szükség, vagy nincs szükség eltávolítva.

A következő módszerek állnak rendelkezésre leválasztási állapotban:

A komponens willUnmount(): akkor hívódik meg, ha az összetevőt eltávolítják vagy megsemmisítik.

Működési példa

Itt van egy működő példa, amely bemutatja az egyes állapotokban 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 ellenőrzi a kimenetet a böngészőben

teljesítmény

A böngészőkonzolban a következőket kapja:

Böngészőkonzol kimenet

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

Felhasználói értékek kimenete

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

Konzol kimenet

Munka az űrlapokkal

A reactjs Html bemeneti elemei, mint pl , és a <select />-nek saját állapota van, és frissíteni kell, amikor a felhasználó a setState() metódussal interakcióba lép.

Ebben a fejezetben látni fogjuk, hogyan dolgozhatunk az űrlapokkal a reactjs-ban.

Í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 fenn kell tartanunk az állapotot, ezért ehhez a react egy speciális metódust biztosít, az úgynevezett setState, amely változás esetén segít fenntartani az állapotot.

Eseményeket használtunk az onChange és onClick a szövegdobozra és a küldés gombra. Amikor a felhasználó belép a szövegmezőbe, az onChange esemény meghívódik, és az állapotobjektum állapotában lévő névmező az alábbiak szerint frissül:

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

Munka az űrlapkimenettel

1. lépés) Írja be a nevét a szövegmezőbe:

Munka az űrlapkimenettel

  1. Kattintson a beküldés gombra

Munka az űrlapkimenettel

Az események kezelése a ReactJS-ben

Az eseményekkel való munka a reactjs-ban ugyanaz, mint a javascriptben. Használhatja a javascriptben használt összes eseménykezelőt. A setState() metódus az állapot frissítésére szolgál, amikor a felhasználó kölcsönhatásba lép bármely HTML-elemmel.

Íme egy működő példa arra, hogyan lehet eseményeket használni a reactjs-ban.

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őkhöz fenn kell tartanunk az állapotot, ezért ehhez a react egy speciális metódust biztosít, az úgynevezett setState, amely változás esetén segít fenntartani az állapotot.

Eseményeket használtunk változunk és a kattintásra a szövegdobozon és a gombra. Amikor a felhasználó belép a szövegmezőbe a változunk esemény meghívásra kerül, és az állapotobjektum állapotán belüli névmező az alábbiak szerint frissül:

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:

Az Events Output használata

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

Az Events Output használata

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

Az Events Output használata

Az Inline CSS használata a ReactJS-ben

Vessen egy pillantást egy működő példára, hogy megértse az inline css működését a reactjs-ban.

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;

Szín: "piros" stílust adtam a h1 címkéhez.

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

Munkavégzés Inline CSS kimenettel

Létrehozhat egy kívánt stílusobjektumot az elemen, és egy kifejezést használhat stílus hozzáadásához, a fenti példában látható módon.

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

Hozzon létre egy külső css-t, ehhez hozzon létre egy css/ mappát, és adja hozzá 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>
    <script src = "out/script.min.js"></script>
  </body>
</html>

Most adjuk hozzá az osztályt a h1 címkéhez a .jsx fájlban

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 megkapja az osztály részleteit. Most teszteljük a böngészőben.

Munka külső CSS kimenettel

Ezt látja, amikor megvizsgálja a h1 címkét a böngészőben:

Munka külső CSS kimenettel

Látható, hogy a class=” h1tag” sikeresen hozzáadásra került a h1 címkéhez.

Összegzésként

  • A ReactJS egy nyílt forráskódú előtér JavaSzkriptkönyvtár a felhasználói felület felépítéséhez. A Facebook tartja karban, és manapság sok vállalat használja felhasználói felület fejlesztésére.
  • A ReactJS alapvető szolgáltatásai közé tartozik a JSX, az összetevők (funkcionális összetevők és az osztályalapú összetevők), az összetevő életciklusa, a kellékek és az összetevő állapotának támogatása, amely JavaScript-kifejezésekkel dolgozik.
  • A ReactJS projektbeállítását CDN-fájlok és npm-csomagok használatával magyarázzák a projekt felépítéséhez.
  • A JSX a javascript kiterjesztése. Ez egy sablonszkript, amelyben a Html és a javascript együttes használatára lesz képes.
  • Az összetevők olyanok, mint a tiszta javascript függvények, amelyek megkönnyítik a kódot azáltal, hogy a logikát újrafelhasználható független kódra bontják.
  • Az állapot egy JavaScript-objektum, amely hasonló azokhoz a kellékekhez, amelyek a reactjs rendereléséhez használandó adatokat tartalmaznak. Az állapotadatok egy privát objektum, és egy osztályon belüli összetevőkben használatosak.
  • A kellékek olyan tulajdonságok, amelyeket egy komponensen belül kell használni.
  • Az alkatrész életciklusa inicializálási, beszerelési, frissítési és leszerelési szakaszokra oszlik.
  • A reactjs-ban html bemeneti elemek, mint pl , és a <select />-nek saját állapota van, és frissíteni kell, amikor a felhasználó a setState() metódussal interakcióba lép.
  • Az eseményekkel való munka a reactjs-ban ugyanaz, mint a javascriptben. Használhatja a javascriptben használt összes eseménykezelőt. A setState() metódus az állapot frissítésére szolgál, amikor a felhasználó kölcsönhatásba lép bármely HTML-elemmel.
  • A ReactJS lehetővé teszi, hogy külső css-sel, valamint beépített css-szel dolgozzon a javascript kifejezés használatával.

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