Kuidas teisendada rakendus AngularJS 1.x rakenduseks React, üks komponent korraga.

Teisendame nurkkomponendid reageerimiskomponentideks

Nurgeline ja reaalajas on mõlemad suurepärased raamistikud / teegid. Nurga all on määratletud MVC struktuur (mudel, vaade, kontroller). React pakub olekumuutusel põhinevat kerget renderdusmehhanismi. Sageli on arendajatel AngularJS-is pärandkoodiga rakendusi, kuid nad tahavad ReactJS-is uusi funktsioone luua.

Ehkki AngularJS-i rakenduse on võimalik loobuda ja ReactJS-i rakendus nullist üles ehitada, pole see suuremahuliste rakenduste jaoks toimiv lahendus. Sellistes olukordades on lihtsam Reakti komponent isoleeritult üles ehitada ja see nurgelisse importida.

Selles postituses aitan teil luua nurgarakenduses React komponendi, kasutades react2angular.

Kavandage rakendus

Siin on see, mida me tegema hakkame -

Antud: nurkne rakendus, mis nimetab linna ja selle peamisi vaatamisväärsusi.

Eesmärk: lisage rakendus Nurgakomponent reaalajas. Komponent Reakt näitab vaatamisväärsuse esiletõstetud pilti.

Plaan: loome React komponendi, edastame imageUrl rekvisiitide kaudu ja kuvame pildi React komponendina.

Alustame!

0 samm: teil on nurkne rakendus

Vaatame selle artikli jaoks lihtsana rakenduse Nurga keerukust. Plaanin 2018. aastal euroreisi, seega on minu Nurgarakendus sisuliselt ämbriloend kohtadest, mida sooviksin külastada.

Meie andmestiku kogumiloend näeb välja järgmine:

const bucketlist = [{
  linn: 'Veneetsia',
  positsioon: 3,
  saidid: ['Grand Canal', 'Ohutuste sild', 'Piazza San Marco'],
  img: 'https://unsplash.com/photos/ryC3SVUeRgY',
}, {
  linn: 'Pariis',
  positsioon: 2,
  saidid: ['Eiffeli torn', 'Louvre', 'Notre-Dame de Paris'],
  img: 'https://unsplash.com/photos/R5scocnOOdM',
}, {
  linn: 'Santorini',
  positsioon: 1,
  saidid: ['Imerovigli', 'Akrotiri', 'Santorini kunstitehas'],
  img: 'https://unsplash.com/photos/hmXtDtmM5r0',
}];

See näeb välja angularComponent.js:

funktsioon AngularComponentCtrl () {
  var ctrl = see;
  ctrl.bucketlist = kopploend;
};
angular.module ('demoApp'). komponent ('angularComponent', {
  templateUrl: 'angularComponent.html',
  kontroller: AngularComponentCtrl
});

ja see on nurkkomponent.html:

  

{{item.city}}

  

Ma tahan näha {{sight}}

Super lihtne! Võiks kohe Santorinisse minna, kuigi ...

See hetk, kui tulete puhkuselt tagasi ja ei saa järgmist puhkust oodata. Foto autor Alexandre Chambon saidil Unsplash

1. samm: installige sõltuvused

Kui teie redaktor pole konfigureeritud, võib nurga alt reaalmaailma liikumine olla tagumiku jaoks tohutu valu. Teeme selle kõigepealt ära. Kõigepealt paigaldame häälestusvooderduse.

npm install - salvestage eslint babel-eslint

Seejärel installime react2angular. Kui te pole kunagi Reactit installinud, peate installima ka react, react-dom ja prop-tüüpi.

npm install --save react2angular react react-dom prop-tüüpi

2. samm: looge komponent React

Nüüd on meil juba olemas nurkkomponent, mis annab linna nime. Järgmisena peame esitletud pildi renderdama. Oletagem nüüd, et pilt on meile rekvisiitide kaudu saadaval (ja saame teada, kuidas rekvisiidid toimivad vaid minutiga). Meie React komponent näeb välja selline:

importige {komponent} 'reageerima';

klass RenderImage laiendab komponenti {

  renderdama () {
    const imageUrl = this.props.imageUrl;
    tagasi (
      
               
      );   } }

3. samm: läbige rekvisiidid

Pidage meeles, et 2. etapis eeldasime, et pilt on saadaval rekvisiitide kaudu. Asume nüüd rekvisiidid. Tugipostide abil saate sõltuvusi Reakti komponendist edasi anda. Pidage meeles, et ükski teie nurksõltuvustest pole reaktori komponendi jaoks saadaval. Mõelge sellele nii - komponent React on nagu konteiner, mis on ühendatud rakenduse Nurk abil. Kui vajate konteinerit teabe pärimiseks vanemalt, peate selle selgesõnaliselt läbi rekvisiitide sisestama.

Niisiis, sõltuvuste läbimiseks lisame parameetrina komponendi renderImage nurga all ja pildi imageUrl-is:

 angular.module ('demoApp', [])
.komponent ('renderImage', react2angular (RenderImage, ['imageUrl']));

4. samm: lisage nurgelisse malli

Nüüd saate selle komponendi nagu ka kõik muud komponendid rakenduses Nurk lihtsalt importida:

  

{{item.city}}

  

Ma tahan näha {{site}}

   

Ta Da! See on võlu! Mitte päris. See on raske töö ja higi. Ja kohvi. Palju sellest.

Kohv Kohv Kohv. Foto autor Christiana Rivers saidil Unsplash
Ehitage nüüd mõned Reaxi komponendid, te julge sõdalane!

Eriline hüüe David Gee'le, et ta tutvustas mind reageerimise nurga all ja aitas mul näha valgust tunneli lõpus, kui olin põlve all nurkmaailmas.

Ressursid:

  1. See artikkel aitas mind palju.
  2. Ametlik dokumentatsioon react2angular

Kui see artikkel aitas teid, klõpsake nuppu , et see jõuaks teiste arendajateni.