Kasutaja:Thenouan/React (JavaScripti raamistik)

Arvutiteaduses, React (mõnikord nimetatud ka kui React.js või ReactJS) on JavaScripti raamistik kasutajaliideste loomiseks.

Seda haldab Facebook, Instagram, kogukond individuaalsetest arendajatest ja korporatsioonid.

React võimaldab arendajatel luua suuremahulisi veebirakendusi, mis kasutavad andmeid ja muutuvad ajas ilma veebilehe uuesti laadimiseta. Selle eesmärk on eelkõige kiiruse, lihtsuse ja skaleeritavuse tagamine. React tegeleb rakendustes ainult kasutajaliidestega. See vastab View osale Model-View-Controller (MVC) mudelis ja on võimalik kombineerida teiste JavaScripti teekide või raamistikega MVC mudelis, näiteks AngularJS.

Ajalugu

Reacti looja on Jordan Walke, tarkvaraarendaja Facebookis. Idee sai alguse raamistikust XHP, mis on HTML komponentide raamistik PHP-le. See võeti esmakordselt kasutusele Facebooki ajajoonel 2011 aastal ja hiljem ka Instagram.com veebilehel 2012 aastal. Lähtekood avaldati JSConf US konverentsil mai kuus 2013.

React Native, mis võimaldab Android, iOS, and UWP rakenduste arendamist Reactiga, avaldati Facebooki React.js Conf konverentsil veebruar 2015 and lähtekood avaldati märtsis 2015.

Aprill 18, 2017, Facebook avaldas React Fiberi, React raamistiku uue algoritmi kasutajaliideste loomiseks. React Fiber on alus edaspidistele täiustustele ja uute funktsioonide arendamisele.

Kasutamine

Järgnev on algeline näide, kuidas kasutada React html koodis kasutades JSX ja ECMAScript 2015 JavaScripti süntaksi.

<div id="myReactApp"></div>

<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>

Klass Greeter on Reacti komponent, mis aksepteerib argumenti greeting. Meetod ReactDOM.render loob isendi Greeter komponendist, seab greeting muutuja väärtuseks 'Hello World' ja paigutab rendertatud komponendi alamelemendina DOM elementi, mille id on myReactApp.

Babel transpileerib ülaloleva ECMAScript 2015 koodi ES5 koodiks, mis näeb välja järgmisena:

React.createElement(
        "h1",
        null,
        this.props.greeting
      );

Brauseris kuvades on tulemus järgmine:

<div id="myReactApp">
  <h1>Hello World!</h1>
</div>

Iseärasused

Ühesuunaline andmete liikumine

To use React to its greatest potential, Properties (or props)—ideally a set of immutable values—are passed to a component's render function. Komponent ei tohi otseselt muuta ühtegi omadust, mis sellele anti. Selle asemel tuleb alamkomponendile anda kaasa funktsioon, mis muudab seda omadust ülemkomponendis. Teisisõnu omadused liiguvad komponentide suhtes ülevalt alla, aga andmetemuutused liiguvad funktsiooni kutsetena alt üles. Seda mehhanismi tuntakse Flux nime all. Mitmeid Fluxi implementatsioone on loodud selle loomisest saati, kuid populaarseimaks on välja kujunenud Redux.

Virtuaalne DOM

Teine märkimisväärne detail on "virtuaalne Document Object Model" või teisisõnu "virtuaalne DOM" kasutamine. React hoiab mälus rakenduse andmestruktuuri, arvutab struktuuri muutumise korral erinevuse eelmise struktuuriga ja siis uuendab muutunud osad brauseri kuvatavas DOM-is efektiivselt. See võimaldab arendajal programmeerida nagu terve leht rendertatakse uuesti muudatuse järel kuigi React uuendab ainult need osad, mis tegelikult muutusid.

JSX

React komponendid on tavaliselt kirjutatud JSX abil, mis on JavaScripti süntaksi laiendus, mis lubab kasutada HTML notatsiooni ja HTML märgendite süntaksi alamkomponentide renderdamiseks. See on Reacti spetsiifiline grammatika laiendus JavaScriptile nagu nüüdseks vananenud E4X. HTML süntaks töödeltakse React raamistiku JavaScripti väljakutseteks. Arendajad võivad võivad kirjutada ka puhtas JavaScriptis. JSX on sarnane ka PHP-le Facebooki poolt välja töötatud süntaksi laiendusega XHP. JSX näeb välja kui tavaline HTML. Näide JSX koodist:

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

export default App;

Mitmetasemelised elemendid

Elemendid peavad olema ümbritsetud konteiner elemendiga nagu <div> element üleval näidatuna. Alates Reacti versioonist 16.0 on võimalik tagastada massiiv elementidest, fragmentidest ja sõnedest.

Attribuudid

Lisaks tavalistele HTML attribuutidele on võimalik kasutada vabaltvalitud attribuute. Sellised attribuudid peavad olema lisatud data- eesliitega. Versioonist 16.0 lastakse vabaltvalitud attribuudid läbi DOMi ilma data- eesliitea.

JavaScripti väljendid

JavaScripti väljendeid (aga mitte avaldised) saab kasutada JSX sees koos loogeliste sulgudega {}:

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>{10+1}</h1>
      </div>
    );
  }
}

export default App;

Ülalolev näide renderdub brauseris järgmisena:

<div>
  <h1>11</h1>
</div>

Tingimuslikud avaldised

If–else avaldisi ei saa kasutada JSX sees, aga tingimuslikke avaldisi saab kasutada sellegi poolest kolmekomponentsete väljenditena. Allolev näide renderdab { i === 1 ? 'true' : 'false' } sõnena 'true', sest i on võrdne arvuga 1.

import React from 'react';

class App extends React.Component {
  render() {
    const i = 1;
    return (
      <div>
        <h1>{ i === 1 ? 'true' : 'false' }</h1>
      </div>
    );
  }
}

export default App;

Lisaks sõnede tagastamisele läbi tingimuslike operaatorite saab tagastada funktsioone ja koodi fragmente.

import React from 'react';

class App extends React.Component {
  render() {
    const arr = [1, 2, 3];
    return (
      <div>
        { 
          arr.length > 0 ?
            arr.map(function(int) {
              return (<div>Section {int}</div>)
            })
            : null
        }
      </div>
    );
  }
}

export default App;

Ülal näites kui arr massiiv sisaldab elemente (neid on näites 3), siis renderdub järgmine:

<div>
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

ReactJS kriitika

ReactJS murekohaks on suur mälu (RAM) kasutus, kuna see kasutab "Virtualne DOM" konseptsiooni. See tähendab, et kasutajaliidese kujutust hoitakse mälus ja sünkroniseeritakse reaalse DOM-ga, mille eest vastutab ReactDOM teek.