ReactJS-i õpetus algajatele: õppige samm-sammult näitega

Mis on ReactJS?

ReactJS on avatud lähtekoodiga esiots JavaSkriptiteek kasutajaliideste loomiseks. ReactJS haldab Facebook ning üksikutest arendajatest ja ettevõtetest koosnev kogukond. Seda kasutatakse laialdaselt alusena üheleheliste veebisaitide ja mobiilirakenduste loomisel. Seda on väga lihtne kasutada ja see võimaldab kasutajatel luua korduvkasutatavaid kasutajaliidese komponente.

ReactJS-i omadused

JSX: JSX on javascripti laiendus. Kuigi JSX-i kasutamine reaktsioonis ei ole kohustuslik, on see üks häid omadusi ja seda on lihtne kasutada.

Kompkletis: komponendid on nagu puhtad javascripti funktsioonid, mis aitavad muuta koodi lihtsaks, jagades loogika korduvkasutatavaks sõltumatuks koodiks. Komponente saame kasutada funktsioonidena ja komponente klassidena. Komponentidel on ka olek, rekvisiidid, mis teevad elu lihtsaks. Klassi sees säilitatakse iga rekvisiidi olek.

Virtuaalne DOM: React loob virtuaalse dom-i, st mälusisese andmestruktuuri vahemälu. Ainult viimased DOM-i muudatused on hiljem brauserites DOM värskendatud.

Javascript Väljendid: JS-avaldisi saab kasutada jsx-failides, kasutades sulgusid, näiteks {}.

ReactJS-i eelised

Siin on ReactJS-i kasutamise olulised plussid / eelised:

ReactJS kasutab virtuaalset domi, mis kasutab mälusisest andmestruktuuri vahemälu ja brauseri dom-is värskendatakse ainult viimaseid muudatusi. See muudab rakenduse kiiremaks.
Saate luua oma valitud komponente, kasutades funktsiooni reageerida komponent. Komponente saab taaskasutada ja need on abiks ka koodi hooldamisel.
Reactjs on avatud lähtekoodiga JavaScripti teek, seega on sellega lihtne alustada.
ReactJS on lühikese aja jooksul muutunud väga populaarseks ning seda haldavad Facebook ja Instagram. Seda kasutavad paljud kuulsad ettevõtted, nagu Apple, NetflixJne
Facebook haldab raamatukogu ReactJS, seega on see hästi hooldatud ja ajakohastatud.
ReactJS-i saab kasutada rikkaliku kasutajaliidese arendamiseks nii töölaua- kui ka mobiilirakenduste jaoks.
Lihtne siluda ja testida, kuna suurem osa kodeerimisest on tehtud Javascript HTML-i asemel.

ReactJS-i puudused

Siin on ReactJS-i kasutamise miinused / puudused:

Suurem osa koodist on kirjutatud JSX-s, st HTML ja css on javascripti osad, see võib olla üsna segane, kuna enamik teisi raamistikke eelistab hoida HTML-i javascripti koodist eraldi.
ReactJS-i failimaht on suur.

CDN-i ReactJS-i kasutamine

Reactiga töötamise alustamiseks peame esmalt installima reactjs. Saate hõlpsasti alustada reactjs-i kasutamist, kasutades CDN-i javascripti faile, nagu allpool näidatud.

CDN-i linkide hankimiseks minge reactjs'i ametlikule saidile, st https://reactjs.org/docs/cdn-links.html ja saate järgmise pildi selgitamiseks vajalikud failid.

Arendaja jaoks

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Prod

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>		
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

asendama versioon uusima react versiooniga nii react-development.js kui ka react-dom.developement.js jaoks. Reactjs-iga töötamise alustamiseks saate faile hostida.

Kui plaanite kasutada CDN-faile, jätke domeeniüleste probleemide vältimiseks kindlasti alles cross-origin atribuut. Reactjs-koodi ei saa brauseris otse käivitada ja see tuleb enne brauseris käivitamist javascripti kasutada Babeli abil.

Siin on BabelJS-i skript, mida saab kasutada:

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Siin on töötav ReactJS-i näide cdn-failide ja babeljs-skripti abil.

<!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/[email protected]/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

Väljund:

Koodi üksikasjadesse jõuame järgmises peatükis, vaatame siin CDN-failidega töötamist. Väidetavalt pole babeli skripti otsene kasutamine hea tava ja uustulnukad saavad seda praegu lihtsalt reactjs-i õppimiseks kasutada. Tootmises peate installima reacti paketi npm abil.

NPM-pakettide kasutamine

Veenduge, et teil oleks installitud nodejs. Kui pole installitud, läbige see õpetus nodejs (https://www.guru99.com/node-js-tutorial.html) paigaldus.

Kui olete nodejs installinud, looge kaust reageerimisprojekt/.

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

Kausta struktuur näeb välja selline:

reactproj\
package.json

Nüüd installime vajalikud paketid.

Siin on reactjs pakettide loend:

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

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

Looge kaust src / kuhu kogu js-kood sellesse kausta tuleb. Kogu reactjs projekti kood on saadaval kaustas src/. Looge fail index.js ja lisage impordi react ja react-dom, nagu allpool näidatud.

index.js

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

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

Oleme tagastanud reactjs põhikoodi. Selle üksikasju selgitame järgmises peatükis. Me tahame näidata Tere, Guru99 õpetused ja sama antakse elemendile dom ID-ga “root”. See on võetud failist index.html, mis on algusfail, nagu allpool näidatud.

Looge kaust public/ ja lisage sinna index.html, nagu allpool näidatud

index.html

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

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

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

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

Package.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Reactjs'i testimise alustamiseks käivitage käsk

npm run start

C:\reactproj>npm run start		
> [email protected] start C:\reactproj		
> react-scripts start

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

public/index.html

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

Kasutame sama protsessi javascripti failide käivitamiseks ka järgmistes peatükkides. Lisage kõik oma js- ja jsx-failid kausta src/. Faili struktuur on järgmine:

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

Kuidas luua oma esimese reaktsiooni projekti seadistus

Siin on selle ReactJS-i õpetuse samm-sammult juhised, et alustada esimese reaktsioonirakendusega.

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

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

2. Salvestage fail nimega index.js kaustas src/

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

ReactDOM.render(

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

ReactDOM.render lisab märgi elemendile ID-ga juur. Siin on html-fail, mis meil on:

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

Step 3) Koostage kood.

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

Siin on kausta struktuur:

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

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

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

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

npm run start

Kui käivitate ülaltoodud käsu, kompileerib see failid ja teavitab teid tõrke korral. Kui kõik näeb hea välja, avab brauseri ja käivitab faili index.html aadressil http://localhost:3000/index.html

Käsk: npm käivitus:

C:\reactproj>npm run start

> [email protected] start C:\reactproj
> react-scripts start

Step 4) Kontrollige väljundit.
URL http://localhost:3000 avaneb brauseris, kui kood on kompileeritud, nagu allpool näidatud:

Mis on JSX?

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

Siin on lihtne näide JSX-koodist.

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

Miks me vajame Reactis JSX-i?

Kasutajaliidese jaoks vajame HTML-i ja igal domeeni elemendil on käsitletavad sündmused, olekumuutused jne.

Reacti puhul võimaldab see kasutada samas failis HTML-i ja javascripti ning hoolitseda tõhusalt domi olekumuutuste eest.

Avaldised JSX-is

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

Varasemates ReactJS-i näidetes olime kirjutanud midagi sellist:

index.js

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

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

Nüüd muudame avaldiste lisamiseks ülaltoodud koodi. Avaldisi kasutatakse lokkis sulgudes {} ja neid laiendatakse käitamise ajal. Reactis olevad avaldised on samad, mis JavaScripti avaldised.

index.js

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

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Proovime nüüd sama brauseris.

Näete, et avaldist {display} ei asendata. React ei tea, mida teha, kui js-failis kasutatakse väljendit.

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

test.jsx

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

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

Oleme lisanud vajaliku koodi ja kasutame faili text.jsx failis index.js. Soovime h1tag muutuja, mida kasutatakse failis script.js, nii et sama eksporditakse, nagu on näidatud ülal failis test.jsx

Siin on failis index.js muudetud kood

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

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

Faili test.jsx kasutamiseks failis index.js peame selle esmalt importima, nagu allpool näidatud:

import h1tag from './test.jsx';

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

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

Siin on väljund, kui kontrollime sama brauseris:

Mis on ReactJS-i komponendid?

Komponendid on nagu puhtad javascripti funktsioonid, mis aitavad muuta koodi lihtsaks, jagades loogika korduvkasutatavaks sõltumatuks koodiks.

Komponendid kui funktsioonid

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
} 
const Hello_comp = <Hello />;
export default Hello_comp;

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

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

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

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

index.js

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

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

Siin on väljund brauseris:

Klassige komponendina

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

test.jsx

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

class Hello extends React. Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Saame failis index.js kasutada komponenti Hello järgmiselt:

index.js

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

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

Komponenti Hello kasutatakse HTML-märgena, st .

Siin on sama väljund.

Mis on olek ReactJS-is?

Olek on JavaScripti objekt, mis sarnaneb rekvisiitidega, millel on reactjs-i renderdamisel kasutatavad andmed. Olekuandmed on privaatne objekt ja neid kasutatakse klassisiseste komponentide sees.

Osariigi näide

Siin on toimiv näide oleku kasutamise kohta klassi sees.

test.jsx

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

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

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

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

Seda saame brauseris testides:

Mis on ReactJS-i rekvisiidid?

Rekvisiidid on omadused, mida kasutatakse komponendi sees. Need toimivad globaalsete objektide või muutujatena, mida saab kasutada komponendi sees.

Funktsioonikomponendi rekvisiidid

Siin on näide rekvisiitide edastamisest funktsioonikomponendile.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Nagu ülal näidatud, oleme lisanud msg omistada Komponent. Sama pääseb ligi kui rekvisiidid funktsiooni Hello sees, mis on objekt, millel on msg atribuudi üksikasjad ja sama kasutatakse väljendina.

Seda komponenti kasutatakse failis index.js järgmiselt:

index.js

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

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

Siin on väljund brauseris:

Rekvisiidid klassi komponendile

Klassi rekvisiitide juurde pääsemiseks saame seda teha järgmiselt:

test.jsx

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

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

. msg atribuut edastatakse faili index.js komponendile järgmiselt:

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

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

See on brauseri väljund:

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

Komponendi elutsükkel

Komponendi elutsükkel on jagatud initsialiseerimise, paigaldamise, värskendamise ja lahtiühendamise etappideks.

Siin on üksikasjalik selgitus iga komponendi kohta.

Reactjs'i komponendil on järgmised etapid:

Vormindamine: see on komponendi elutsükli esimene etapp.

Siin on sellel vaikerekvisiidid ja olek algtasemel.

Paigaldamine: selles faasis renderdatakse komponent domi sees. Paigaldusolekus puutume kokku järgmiste meetoditega.

componentDidMount(): Seda kutsutakse ka siis, kui komponent lisatakse just dom-ile.

render(): See meetod on kõigi loodud komponentide jaoks. See tagastab HTML-sõlme.

Värskendused: selles olekus kasutab doomi kasutaja ja värskendab seda. Näiteks sisestate tekstikasti midagi, nii värskendatakse oleku atribuute.

Värskenduse olekus on saadaval järgmised meetodid.

shouldComponentUpdate() : kutsutakse välja, kui komponenti värskendatakse.

componentDidUpdate() : pärast komponendi värskendamist.

Lahtimonteerimine: see olek tuleb pildile, kui komponenti ei nõuta või see pole eemaldatud.

Lahtiühendamise olekus on saadaval järgmised meetodid.

Komponent willUnmount(): kutsutakse välja, kui komponent eemaldatakse või hävitatakse.

Töönäide

Siin on töönäide, mis näitab igas olekus kutsutud meetodeid.

Näide: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }
  
  componentDidMount() {  
    console.log('Mounting State : calling method componentDidMount');
  }   
 
  shouldComponentUpdate() {  
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }  

  componentDidUpdate() {  
    console.log('Update  State : calling method componentDidUpdate')  
  }  
  componentWillUnmount() {  
    console.log('UnMounting State : calling method componentWillUnmount');
  }  

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

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

Kui kontrollite brauseris väljundit

Brauseri konsoolis saate:

Kui kasutaja sisestab tekstikasti:

Konsoolis kuvatakse järgmised teated:

Töötamine vormidega

In reactjs HTML-i sisendelemendid nagu , ja <select /> on oma olek ja seda tuleb värskendada, kui kasutaja suhtleb meetodi setState() abil.

Selles peatükis näeme, kuidas reactjs vormidega töötada.

Siin on toimiv näide:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Sisestusväljade jaoks peame säilitama oleku, nii et react pakub selleks spetsiaalset meetodit, mida nimetatakse setState, mis aitab säilitada seisundit alati, kui toimub muutus.

Oleme kasutanud sündmusi onChange ja onClick tekstikastil ja esitamisnupul. Kui kasutaja siseneb tekstikasti, kutsutakse välja sündmus onChange ja olekuobjekti olekus olevat nimevälja värskendatakse järgmiselt:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

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

Väljund brauseris on järgmine:

Samm 1) Sisestage oma nimi tekstikasti:

Klõpsake nuppu Esita

ReactJS-i sündmustega töötamine

Sündmustega töötamine reactjsis on sama, mis oleks teinud JavaScriptis. Saate kasutada kõiki javascriptis kasutatavaid sündmuste töötlejaid. SetState() meetodit kasutatakse oleku värskendamiseks, kui kasutaja suhtleb mis tahes HTML-elemendiga.

Siin on toimiv näide sündmuste kasutamisest reactjsis.

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;

Sisestusväljade jaoks peame säilitama oleku, nii et react pakub selleks spetsiaalset meetodit, mida nimetatakse setState, mis aitab säilitada seisundit alati, kui toimub muutus.

Oleme kasutanud üritusi me muutume ja onClick tekstikastil ja nupul. Kui kasutaja siseneb tekstikasti me muutume kutsutakse välja sündmus ja olekuobjekti olekus olevat nimevälja värskendatakse järgmiselt:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

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

Siin on väljund brauseris:

Kui kasutaja sisestab nime:

Kui kasutaja klõpsab nuppu Click Here:

Inline CSS-iga töötamine ReactJS-is

Heitke pilk töönäidetele, et mõista, kuidas reactjs'is toimib 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 lisanud h1-sildile stiili "punane".

index.js

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

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

Väljund brauseris on järgmine:

Saate luua elemendile soovitud stiiliobjekti ja kasutada stiili lisamiseks väljendit, nagu on näidatud ülaltoodud näites.

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

Loome välise css , loome selleks kaust css/ ja lisame sinna style.css.

style.css

.h1tag {
color:red;
}

Lisage style.css oma index.html faili

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head> 
  <body>
    <div id = "root"></div>
    <script src = "out/script.min.js"></script>
  </body>
</html>

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

addstyle.jsx

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

let classforh1 = 'h1tag';
  
function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

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

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

Atribuudile className antakse klassi üksikasjad. Nüüd testime brauseris.

Seda näete, kui kontrollite brauseris märgendit h1:

Näete, et klass=” h1tag” lisati edukalt h1-sildile.

kokkuvõte

ReactJS on avatud lähtekoodiga esiots JavaSkriptiteek kasutajaliidese loomiseks. Seda haldab Facebook ja paljud ettevõtted kasutavad seda kasutajaliidese arendamiseks.
ReactJS-i põhifunktsioonid hõlmavad JSX-i, komponente (funktsionaalseid komponente ja klassipõhiseid komponente), komponendi elutsüklit, rekvisiite ja komponendi olekutuge, töötades JavaScripti avaldistega.
ReactJS-i projekti seadistamist selgitatakse CDN-failide ja ka npm-pakettide kasutamisega projekti koostamiseks.
JSX on javascripti laiendus. See on malliskript, kus saate HTML-i ja JavaScripti koos kasutada.
Komponendid on nagu puhtad javascripti funktsioonid, mis aitavad muuta koodi lihtsaks, jagades loogika korduvkasutatavaks sõltumatuks koodiks.
Olek on JavaScripti objekt, mis sarnaneb rekvisiitidega, millel on reactjs-i renderdamisel kasutatavad andmed. Olekuandmed on privaatne objekt ja neid kasutatakse klassisiseste komponentide sees.
Rekvisiidid on omadused, mida kasutatakse komponendi sees.
Komponendi elutsükkel on jagatud initsialiseerimise, paigaldamise, värskendamise ja lahtiühendamise etappideks.
In reactjs html sisendelemendid nagu , ja <select /> on oma olek ja seda tuleb värskendada, kui kasutaja suhtleb meetodi setState() abil.
Sündmustega töötamine reactjsis on sama, mis oleks teinud JavaScriptis. Saate kasutada kõiki javascriptis kasutatavaid sündmuste töötlejaid. SetState() meetodit kasutatakse oleku värskendamiseks, kui kasutaja suhtleb mis tahes HTML-elemendiga.
ReactJS võimaldab teil töötada nii välise css-iga kui ka sisemise css-iga, kasutades javascripti väljendit.

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

Teile võib meeldida:

5 PARIMAT reageerimiskursust koos…

Mis on ReactJS?

ReactJS-i omadused

ReactJS-i eelised

ReactJS-i puudused

CDN-i ReactJS-i kasutamine

Arendaja jaoks

Prod

SEOTUD ARTIKLID

NPM-pakettide kasutamine

Kuidas luua oma esimese reaktsiooni projekti seadistus

Mis on JSX?

Miks me vajame Reactis JSX-i?

Avaldised JSX-is

Mis on ReactJS-i komponendid?

Komponendid kui funktsioonid

Klassige komponendina

Mis on olek ReactJS-is?

Osariigi näide

Mis on ReactJS-i rekvisiidid?

Funktsioonikomponendi rekvisiidid

Rekvisiidid klassi komponendile

Komponendi elutsükkel

Töönäide

Töötamine vormidega

ReactJS-i sündmustega töötamine

Inline CSS-iga töötamine ReactJS-is

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

kokkuvõte