ReactJS-opastus aloittelijoille: Opi vaiheittaisella esimerkillä

Mikä on ReactJS?

ReactJS on avoimen lähdekoodin käyttöliittymä JavaSkriptikirjasto käyttöliittymien rakentamiseen. ReactJS ylläpitää Facebook ja yksittäisten kehittäjien ja yritysten yhteisö. Sitä käytetään laajasti tukikohtana yksisivuisten verkkosivustojen ja mobiilisovellusten rakentamisessa. Se on erittäin helppokäyttöinen, ja sen avulla käyttäjät voivat luoda uudelleenkäytettäviä käyttöliittymäkomponentteja.

ReactJS:n ominaisuudet

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

komponentit: Komponentit ovat kuin puhtaita javascript-funktioita, jotka tekevät koodista helppoa jakamalla logiikan uudelleen käytettäväksi itsenäiseksi koodiksi. Voimme käyttää komponentteja funktioina ja komponentteja luokkina. Komponenteilla on myös tila, rekvisiitta, joka tekee elämästä helppoa. Luokan sisällä jokaisen rekvisiitin tila säilyy.

Virtuaalinen DOM: React luo virtuaalisen dom:n eli muistin sisäisen datarakenteen välimuistin. Vain viimeiset DOM-muutokset on myöhemmin päivitetty selaimissa DOM.

Javascript Ilmaisut: JS-lausekkeita voidaan käyttää jsx-tiedostoissa käyttämällä hakasulkeita, esimerkiksi {}.

ReactJS:n edut

Tässä on tärkeitä ReactJS:n käytön etuja/etuja:

ReactJS käyttää virtuaalista domia, joka hyödyntää muistissa olevaa tietorakenteen välimuistia, ja vain lopulliset muutokset päivitetään selaimen domeihin. Tämä tekee sovelluksesta nopeamman.
Voit luoda valitsemiasi komponentteja käyttämällä reagoida komponenttiominaisuutta. Komponentteja voidaan käyttää uudelleen ja ne ovat myös hyödyllisiä koodin ylläpidossa.
Reactjs on avoimen lähdekoodin javascript-kirjasto, joten se on helppo aloittaa.
ReactJS on tullut erittäin suosituksi lyhyessä ajassa, ja sitä ylläpitävät Facebook ja Instagram. Sitä käyttävät monet kuuluisat yritykset, kuten Apple, Netflix, Jne
Facebook ylläpitää ReactJS-kirjastoa, joten se on hyvin ylläpidetty ja päivitetty.
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 Javascript HTML:n sijaan.

ReactJS:n haitat

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

Suurin osa koodista on kirjoitettu JSX:llä, eli HTML ja css ovat osa javascriptiä, se voi olla melko hämmentävää, koska useimmat muut puitteet haluavat pitää HTML:n erillään javascript-koodista.
ReactJS:n tiedostokoko on suuri.

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

Jotta voimme aloittaa reactin käytön, meidän on ensin asennettava reactjs. Voit helposti aloittaa reactjs:n käytön käyttämällä CDN javascript -tiedostoja alla olevan kuvan mukaisesti.

Siirry reactjs:n viralliselle sivustolle saadaksesi CDN-linkit, esim. https://reactjs.org/docs/cdn-links.html ja saat tarvittavat tiedostot seuraavan kuvan selittämiseksi.

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 uusimmalla react-versiolla sekä react-development.js:lle että react-dom.developement.js:lle. Voit isännöidä tiedostoja lopussa aloittaaksesi työskentelyn reactjs:n kanssa.

Jos aiot käyttää CDN-tiedostoja, muista säilyttää cross-origin-attribuutti verkkotunnusten välisten ongelmien välttämiseksi. Reactjs-koodia ei voi suorittaa suoraan selaimessa, ja se on muutettava Babelin avulla javascriptiksi ennen kuin se suoritetaan 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 cdn-tiedostoilla ja babeljs-skriptillä.

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

Käsittelemme koodin yksityiskohtia seuraavassa luvussa, katsotaanpa täällä työskentely CDN-tiedostojen kanssa. Sanotaan, että babel-skriptin käyttäminen suoraan ei ole hyvä käytäntö, ja uudet tulokkaat voivat vain käyttää sitä oppiakseen reagoimaan toistaiseksi. Tuotannossa sinun on asennettava react käyttämällä npm-pakettia.

NPM-pakettien käyttö

Varmista, että sinulla on nodejs asennettuna. Jos sitä ei ole asennettu, käy läpi tämä opetusohjelma solmukohtaisille (https://www.guru99.com/node-js-tutorial.html) asennus.

Kun nodejs on asennettu, luo kansio reactproj/.

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

Tältä kansiorakenne näyttää:

reactproj\
package.json

Nyt asennamme tarvitsemamme paketit.

Tässä on luettelo reactjs-paketteista:

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

Avaa komentokehote ja suorita yllä olevat komennot kansion reactproj/ sisällä.

Luo kansio src / jossa kaikki js-koodi tulee kyseiseen kansioon. Kaikki reactjs-projektin koodi on saatavilla src/-kansiossa. Luo tiedosto index.js ja lisää tuontireact ja react-dom alla olevan kuvan mukaisesti.

index.js

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

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

Olemme palauttaneet reactjs:n peruskoodin. Selitämme sen yksityiskohdat seuraavassa luvussa. Haluamme näyttää Hei, Guru99 Tutorialsista ja sama annetaan dom-elementille, jonka tunnus on "root". Se on otettu index.html-tiedostosta, joka on aloitustiedosto, kuten alla on esitetty.

Luo kansio public/ 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>

Paketin react-skriptit huolehtivat koodin kokoamisesta ja palvelimen käynnistämisestä näyttämään html-tiedostoa eli index.html. Sinun on lisättävä tiedostoon package.json komento, joka huolehtii react-skriptien käytöstä koodin kääntämiseen ja palvelimen käynnistämiseen alla kuvatulla tavalla:

 "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",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Aloita reactjs-testaus suorittamalla komento

npm run start

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

Se avaa selaimen URL-osoitteella 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 JavaScript-tiedostojen suorittamiseen myös seuraavissa luvuissa. Lisää kaikki js- ja .jsx-tiedostosi src/-kansioon. Tiedostorakenne on seuraava:

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

Kuinka luoda First React -projektiasetuksesi

Tässä on vaiheittainen opas tässä ReactJS-opetusohjelmassa aloittaaksesi ensimmäisestä react-sovelluksesta.

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 kansioon src/

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

ReactDOM.render(

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

ReactDOM.render lisää tagi elementtiin, jonka tunnus on root. Tässä meillä oleva html-tiedosto:

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

Vaihe 3) Kokoa koodi.

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

Kääntääksesi lopullisen tiedoston, suorita seuraava komento:

npm run start

Kun suoritat yllä olevan komennon, se kokoaa tiedostot ja ilmoittaa virheistä. Jos kaikki näyttää hyvältä, se avaa selaimen ja suorittaa index.html-tiedoston osoitteessa http://localhost:3000/index.html

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-osoite http://localhost:3000 avautuu selaimessa, kun koodi on käännetty alla olevan kuvan mukaisesti:

Mikä on JSX?

JSX on javascriptin laajennus. Se on malliskripti, jossa sinulla on valta käyttää HTML- ja Javascript yhteen.

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-koodin, ja jokaisella dom-elementillä on käsiteltävä tapahtumia, tilamuutoksia jne.

Reactin tapauksessa sen avulla voimme käyttää HTML- ja javascriptiä samassa tiedostossa ja huolehtia dom-tilan tilan muutoksista 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ä olevan koodin lausekkeiden lisäämiseksi. Lausekkeita käytetään hakasulkeissa {}, ja niitä laajennetaan ajon aikana. React-lausekkeet ovat samat kuin JavaScript-lausekkeet.

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.

Voit nähdä, että {display}-lauseketta ei ole korvattu. 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 vaaditun koodin ja käytämme text.jsx-tiedostoa index.js:ssä. Haluamme h1tag muuttuja käytettäväksi script.js:n sisällä, joten sama viedään yllä esitetyllä tavalla test.jsx:ssä

Tässä on index.js:n muokattu koodi

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

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

Käyttääksemme test.jsx-tiedostoa index.js:ssä meidän on ensin tuotava se alla kuvatulla tavalla:

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 javascript-funktioita, jotka tekevät koodista helppoa jakamalla logiikan uudelleen kä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 palautti yllä olevan h1-tunnisteen. Toiminnon nimi toimii elementtinä, kuten alla:

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

Komponentti Hei käytetään HTML-tunnisteena, esim. ja määrätty Hello_comp muuttuja ja sama viedään käyttämällä vientiä.

Käytämme nyt tätä komponenttia index.js-tiedostossa alla esitetyllä tavalla:

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ää Hello-komponenttia index.js-tiedostossa seuraavasti:

index.js

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

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

Komponenttia Hello käytetään HTML-tunnisteena eli .

Tässä saman tulos.

Mikä on tila ReactJS:ssä?

Tila on JavaScript-objekti, joka on samanlainen kuin rekvisiitta, jossa on dataa käytettäväksi reactjs-renderöinnin kanssa. Tilatieto on yksityinen objekti ja sitä käytetään luokan sisällä.

Esimerkki valtiosta

Tässä on toimiva esimerkki tilan käytöstä luokassa.

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?

Props ovat ominaisuuksia, joita käytetään komponentin sisällä. 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ä näkyy, olemme lisänneet msg omistaa Komponentti. Samaan pääsee käsiksi kuin 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

Jotta pääset luokan rekvisiittiin, 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

Komponenttien elinkaari on jaettu alustus-, asennus-, päivitys- ja irrotusvaiheisiin.

Tässä on yksityiskohtainen selitys jokaisesta komponentista.

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.

Asennus: Tässä vaiheessa komponentti renderöidään dom:n sisällä. Altistumme seuraaville menetelmille asennustilassa.

componentDidMount(): Tätä kutsutaan myös, kun komponentti on juuri lisätty domiin.

render(): Sinulla on tämä menetelmä kaikille luoduille komponenteille. Se palauttaa HTML-solmun.

Päivitykset: Tässä tilassa käyttäjä on vuorovaikutuksessa domiin ja se päivitetään. Kirjoitat esimerkiksi tekstiruutuun jotain, jolloin tilan ominaisuudet päivitetään.

Seuraavat menetelmät ovat käytettävissä päivitystilassa:

shouldComponentUpdate() : kutsutaan kun komponentti päivitetään.

componentDidUpdate() : komponentin päivityksen jälkeen.

Irrottaminen: tämä tila tulee kuvaan, kun Komponenttia ei tarvita tai sitä ei poisteta.

Seuraavat ovat käytettävissä olevat menetelmät irrotustilassa:

Komponentti willUnmount(): kutsutaan, kun komponentti poistetaan tai tuhotaan.

Toimiva esimerkki

Tässä on toimiva esimerkki, joka näyttää kussakin tilassa kutsutut menetelmät.

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

Kun käyttäjä kirjoittaa tekstiruutuun:

Konsolissa näytetään seuraavat viestit:

Lomakkeiden kanssa työskentely

Reactjsissa HTML-syöttöelementit, kuten , ja <select /> on oma tila, ja se on päivitettävä, kun käyttäjä on vuorovaikutuksessa setState()-metodilla.

Tässä luvussa näemme kuinka käsitellä lomakkeita reactjsissa.

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ötekenttiä varten meidän on säilytettävä tila, joten sitä varten react tarjoaa erityisen menetelmän nimeltä setState, joka auttaa ylläpitämään tilaa aina muutoksen sattuessa.

Olemme käyttäneet tapahtumia onChange- ja onClick-tekstiruutua ja lähetä -painiketta. Kun käyttäjä tulee tekstiruutuun, kutsutaan onChange-tapahtuma ja tilaobjektin tilan sisällä oleva nimikenttä päivitetään alla olevan kuvan 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 tekstiruutuun:

Napsauta Lähetä-painiketta

Työskentely tapahtumien kanssa ReactJS:ssä

Työskentely tapahtumien kanssa reactjsissa on sama kuin olisit tehnyt javascriptissä. Voit käyttää kaikkia javascriptissä käytettyjä tapahtumakäsittelijöitä. Metodia setState() 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äyttämisestä reactjsissa.

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ötekenttiä varten meidän on säilytettävä tila, joten sitä varten react tarjoaa erityisen menetelmän nimeltä setState, joka auttaa ylläpitämään tilaa aina muutoksen sattuessa.

Olemme käyttäneet tapahtumia muutamme ja klikkaamalla tekstikentässä ja painikkeessa. Kun käyttäjä tulee tekstiruutuun muutamme tapahtuma kutsutaan ja nimikenttä tilaobjektin tilassa päivitetään alla olevan kuvan 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ä kirjoittaa nimen:

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

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

Tarkastellaan toimivaa esimerkkiä ymmärtääksesi inline css:n toiminnan reactjsissa.

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 h1-tunnisteeseen värin: "punainen".

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 elementille haluamasi tyyliobjektin ja lisätä tyylin lausekkeen avulla yllä olevan esimerkin mukaisesti.

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

Luodaan ulkoinen css , luokaa sitä varten kansio css/ ja lisääkää 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>
    <script src = "out/script.min.js"></script>
  </body>
</html>

Lisätään nyt luokka h1-tunnisteeseen .jsx-tiedostossa

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

Attribuutille className annetaan luokan tiedot. Testataan nyt selaimessa.

Tämän näet, kun tarkistat h1-tunnisteen selaimessa:

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

Yhteenveto

ReactJS on avoimen lähdekoodin käyttöliittymä JavaSkriptikirjasto käyttöliittymän rakentamiseen. Sitä ylläpitää Facebook, ja monet yritykset käyttävät sitä nykyään käyttöliittymän kehittämiseen.
ReactJS:n ydinominaisuudet sisältävät JSX:n, komponentit (toiminnalliset komponentit ja luokkapohjaiset komponentit), komponentin elinkaaren, rekvisiitta ja tilan tuen komponentille, javascript-lausekkeiden kanssa.
ReactJS:n projektin asennus selitetään käyttämällä CDN-tiedostoja ja myös npm-paketteja projektin rakentamiseen.
JSX on javascriptin laajennus. Se on malliskripti, jossa voit käyttää HTML- ja javascriptiä yhdessä.
Komponentit ovat kuin puhtaita javascript-funktioita, jotka tekevät koodista helppoa jakamalla logiikan uudelleen käytettäväksi itsenäiseksi koodiksi.
Tila on JavaScript-objekti, joka on samanlainen kuin rekvisiitta, jossa on dataa käytettäväksi reactjs-renderöinnin kanssa. Tilatieto on yksityinen objekti ja sitä käytetään luokan sisällä.
Props ovat ominaisuuksia, joita käytetään komponentin sisällä.
Komponenttien elinkaari on jaettu alustus-, asennus-, päivitys- ja irrotusvaiheisiin.
Reactjs:ssa html-syöteelementit kuten , ja <select /> on oma tila, ja se on päivitettävä, kun käyttäjä on vuorovaikutuksessa setState()-metodilla.
Työskentely tapahtumien kanssa reactjsissa on sama kuin olisit tehnyt javascriptissä. Voit käyttää kaikkia javascriptissä käytettyjä tapahtumakäsittelijöitä. Metodia setState() käytetään tilan päivittämiseen, kun käyttäjä on vuorovaikutuksessa minkä tahansa HTML-elementin kanssa.
ReactJS:n avulla voit työskennellä sekä ulkoisen css:n että sisäisen css:n kanssa JavaScript-lausekkeen avulla.

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

Saatat tykätä:

5 PARAS Reaktiokurssia…

Mikä on ReactJS?

ReactJS:n ominaisuudet

ReactJS:n edut

ReactJS:n haitat

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

Kehittäjälle

Tuot

AIHEESEEN LIITTYVÄT ARTIKKELIT

NPM-pakettien käyttö

Kuinka luoda First React -projektiasetuksesi

Mikä on JSX?

Miksi tarvitsemme JSX:ää Reactissa?

JSX:n lausekkeet

Mitä komponentit ovat ReactJS:ssä?

Komponentit funktioina

Luokka komponentiksi

Mikä on tila ReactJS:ssä?

Esimerkki valtiosta

Mitä rekvisiitta ReactJS:ssä ovat?

Rekvisiitta toiminnalliseen komponenttiin

Rekvisiitta luokan komponenttiin

Komponentin elinkaari

Toimiva esimerkki

Lomakkeiden kanssa työskentely

Työskentely tapahtumien kanssa ReactJS:ssä

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

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

Yhteenveto