Izveidojiet React lietojumprogrammu no jauna (7. daļa): Reakcijas un paraugprakses iestatīšana

Šī ziņa ir daļa no iesācēju līmeņa ziņu sērijas, kas paredzēta lietotājiem, kuri to izmanto
gatavus rīkus, veidnes vai katlu plāksnes React, bet jau no paša sākuma vēlaties uzzināt un saprast, kā izveidot React lietojumprogrammu.

Visas ziņas šajā sērijā:
1. daļa: Ievads
2. daļa: Inicializācija un pirmā datne
3. daļa: ES2015 sintakses izmantošana
4. daļa: Stila rokasgrāmatas ieviešana
5. daļa: Express servera iestatīšana
6. daļa: Moduļu saišķa izmantošana
7. daļa: Reakcijas izveidošana un paraugprakse
8. daļa: Redux iestatīšana
9. daļa: React Router iestatīšana
10. daļa: TDD un Jest iestatīšana

Reakcijas iestatīšana

Šajā rakstā mēs uzstādīsim React un izveidosim ļoti vienkāršu komponentu, pēc tam mēs iepazīsimies ar labāko praksi, kas jums jāpatur prātā, izstrādājot React komponentus. Šeit sākas jautrā daļa, tāpēc iesakīsimies iekšā!

Instalējiet paketes React un React Dom kā atkarības:

USD npm instalēšana - ir jāreaģē, reaģējot

Pēc tam atveriet index.js un izveidojiet ļoti vienkāršu komponentu React, kas attēlo mūsu lietojumprogrammu. Mūsu index.pug veidnes failā jau ir elements ar id lietotni, tāpēc izmantosim to lietojumprogrammas uzstādīšanai.

/ **
 * indekss.js
 * /
importēt Reaģēt no 'reaģēt';
importēt {render} no 'react-dom';
const MainApp = () => (
  

Sveiki, reaģējiet!

);
// renderēt lietotni
render (, document.getElementById ('app'));

Šis vienkāršais kods izveido bezvalstnieku funkcionālo komponentu MainApp un ievieto to DOM elementā, kuram ir id lietotne. Šis kods nedarbosies uzreiz, un, mēģinot izveidot paketi vai iedarbināt serveri, jūs saņemat kļūdu.

Šīs kļūdas iemesls ir tas, ka mūsu index.js failā ir JSX sintakse, kuru Bābele vēl nesaprot. Lai ļautu Bābelei interpretēt šo sintakse ar parasto JavaScript, mēs izmantosim Bābeles sākotnējo iestatījumu React.

Instalējiet pakotni kā atkarību:

Instalēt npm USD - saglabājiet babel-preset-react

Pēc tam pievienojiet sākotnējo iestatījumu sākotnējo iestatījumu sarakstam failā .babelrc:

{
  "sākotnējie iestatījumi": [
    "es2015",
    "skatuve-0",
    "reaģēt"
  ],
  "spraudņi": ["pārveidot-inline-vidē mainīgie"]
}

Jābūt arī iekrāsošanas kļūdai, kas neļaus jums veidot paketi. Līnija sūdzas, jo index.js ir JavaScript fails, kas satur JSX sintakse, bet jsx vietā izmanto js paplašinājumu.

Jūs varat izlasīt šī noteikuma aprakstu šeit. Sadaļā “Kad to nelietot” teikts, ka jums nevajadzētu lietot šo noteikumu, ja jums nerūp ierobežot to failu paplašināšanu, kuros ir JSX sintakse.

Jūs varat turpināt izmantot šo noteikumu, bet es labprātāk visiem failiem izmantoju paplašinājumu js, tāpēc es atspējošu šo kārtulu:

{
  "paplašina": "airbnb",
  "env": {
    "es6": patiess,
    "pārlūks": taisnība,
    "mezgls": patiess
  },
  "noteikumi": {
    "reaģēt / jsx-faila paplašinājums": 0
  }
}

Iespējo HMR

Karstā moduļa nomaiņas iespējošana ir tikpat vienkārša kā koda bloka pievienošana:

/ **
 * indekss.js
 * /
importēt Reaģēt no 'reaģēt';
importēt {render} no 'react-dom';
if (module.hot) {
  module.hot.accept ();
}
const MainApp = () => (
  

Sveiki, reaģējiet!

);
// renderēt lietotni
render (, document.getElementById ('app'));

Padomi un paraugprakse

Pirms apmācības turpināšanas mēs iepazīsimies ar apkopotu padomu un labākās prakses sarakstu, ko esmu iemācījies no savas pieredzes darbā ar React, kā arī no lasīšanas un meklēšanas tīmeklī. Paturiet tos prātā, veidojot savus React komponentus.

Atkarības imports vs vietējais imports

Atdaliet atkarības importu no vietējā importa ar jaunu līniju. Vispirms vajadzētu būt atkarības importam.

importēt React, {Component} no 'react';
importēt noderīgu moduli no “noderīgs modulis”;
importēt myLocalModule no './my-local-module';

Bezvalstnieki funkcionālie komponenti

Ja komponents ir tikai renderēts komponents vai nav jāizmanto valsts objekts, klases vietā izmantojiet vienkāršu JavaScript funkciju. To sauc par bezvalstnieku funkcionālo komponentu.

Tā vietā, lai to izdarītu:

importēt React, {Component} no 'react';
klase MyComponent paplašina komponentu {
  render () {
    atgriezties (
      
Sveiki!
    );   } }
eksportēt noklusējuma MyComponent;

Dari šo:

importēt Reaģēt no 'reaģēt';
const MyComponent = () => 
Labdien!
;
eksportēt noklusējuma MyComponent;

Skatiet, cik liela jucekļa tika noņemta? Jūs arī varētu to padarīt vienkāršāku, eksportējot pašu funkciju:

importēt Reaģēt no 'reaģēt';
eksportēt noklusējuma () => 
Sveiki!
;

Tomēr es nevēlos to darīt, jo tas apgrūtina atkļūdošanu. Ja pārbaudīsit React Dev Tools, redzēsit, ka komponenta nosaukums ir “Nezināms”, jo funkcija ir anonīma.

Anonīms funkcionāls komponents

Labāka pieeja būtu izmantot parasto nosaukto funkciju, nevis anonīmu:

importēt Reaģēt no 'reaģēt';
eksportēt noklusējuma funkciju MyComponent () {
  atgriezties 
Sveiki!
; }
Nosaukts funkcionāls komponents

Sāciet ar prezentācijas komponentiem

Prezentācijas komponentus ir vienkāršāk definēt, vieglāk saprotamus, un tos var atkal un atkal izmantot, jo tie ir neatkarīgi no pārējās lietojumprogrammas.

Ja sadalīsit savu pieteikumu līdz prezentācijas komponentu kopumam, varat tos visus ievietot vienā lappusē un pielāgot to noformējumu un variācijas, lai visā lietojumprogrammā panāktu vienotu izskatu.

Veidojiet savu komponentu kā prezentācijas komponentu un pievienojiet stāvokli tikai tad, kad tas ir nepieciešams, un tas mūs ved pie nākamā padoma.

Samaziniet valsts izmantošanu

Savos komponentos taupīgi izmantojiet stāvokli un pārliecinieties, ka UI viņi izmanto statusu, nevis datus, citiem vārdiem sakot, ja jūs to nelietojat render (), tad tam nevajadzētu būt stāvoklī. Atcerieties, ka jums vajadzētu izmantot setState tikai tad, ja vēlaties atkārtoti atveidot savu komponentu.

Teiksim, ka mums ir komponents, kas sastāv no vienas pogas. Uz šo pogu var noklikšķināt tikai vienu reizi, un pēc tam, kad uz tā noklikšķinās, konsoles logā tiks ielozēts ziņojums:

importēt React, {Component} no 'react';

klase MyComponent paplašina komponentu {
  štats = {
    clickedOnce: nepatiess,
  };
  handleClick = () => {
    if (! this.state.clickedOnce) {
      console.log ('Noklikšķinājis');
    }
    this.setState ({
      clickedOnce: taisnība,
    });
  }
  komponentDidUpdate () {
    console.log ('Atjaunināts!');
  }
  render () {
    atgriezties (
      
         Noklikšķiniet uz manis       
    );   } }
eksportēt noklusējuma MyComponent;

Šis ir sliktas ieviešanas piemērs, kurā stāvoklis tiek izmantots, lai iestatītu karodziņu clickedOnce, kurā norādīts, vai uz pogas var vēlreiz noklikšķināt. Katru reizi noklikšķinot uz pogas, komponents tiks renderēts, kaut arī tas nav nepieciešams.

Lietojumprogramma atkārtoti tiek parādīta, noklikšķinot uz pogas

Tas būtu labāk:

importēt React, {Component} no 'react';

klase MyComponent paplašina komponentu {
  clickedOnce = nepatiess;
  
  handleClick = () => {
    if (! this.clickedOnce) {
      console.log ('Noklikšķinājis');
    }
    this.clickedOnce = patiess;
  }
  komponentDidUpdate () {
    console.log ('Atjaunināts!');
  }
  render () {
    atgriezties (
      
         Noklikšķiniet uz manis       
    );   } }
eksportēt noklusējuma MyComponent;

Šajā ieviešanā stāvokļa atslēgas vietā tiek izmantots klases īpašums, jo karodziņš “clickkedOnce” neatspoguļo lietotāja saskarnes stāvokli un tāpēc tam nevajadzētu dzīvot komponenta stāvoklī. Izmantojot šo jauno ieviešanu, vairākkārt noklikšķinot uz pogas, atjaunināšana vairs netiek aktivizēta.

Vienmēr definējiet propTypes un defaultProps

Visiem komponentiem vajadzētu būt propTypes un defaultProps komponentiem definētiem pēc iespējas augstāk. Tie kalpo kā komponentu dokumentācija, un tiem nekavējoties jābūt redzamiem citiem izstrādātājiem, kas lasa failu.

Kopš React v15.5, React.PropTypes ir pārcēlies uz citu paketi, tāpēc instalēsim šo pakotni kā atkarību:

Instalēt USD npm - saglabājiet prop-tipus

Bezvalstniekiem funkcionāliem komponentiem:

Funkcijas tiek uzvilktas JavaScript, kas nozīmē, ka varat izmantot funkciju pirms tās deklarēšanas:

importēt Reaģēt no 'reaģēt';
importēt PropTypes no “prop-tips”;
MyComponent.propTypes = {
  nosaukums: PropTypes.string,
};
MyComponent.defaultProps = {
  nosaukums: “Vienkāršs skaitītājs”,
};
eksportēt noklusējuma funkciju MyComponent (rekvizīti) {
  atgriezties 

{props.title}

; }

ESLint sūdzēsies par funkcijas izmantošanu pirms tās definīcijas, bet labākas komponentu dokumentācijas labad atspēkosim šo funkciju uzlaušanas kārtulu, mainot .eslintrc failu:

{
  ...
  "noteikumi": {
    "reaģēt / jsx-faila paplašinājums": 0,
    "nelieto-pirms definē": [
      "kļūda",
      {
        "funkcijas": nepatiesa
      }
    ]
  }
}

Klases komponentiem:

Atšķirībā no funkcijām, JavaScript klases netiek paceltas, tāpēc pirms pašas klases definēšanas mēs nevaram vienkārši izdarīt MyComponent.propTypes = ..., bet kā statiskās klases īpašības varam definēt propTypes un defaultProps:

importēt React, {Component} no 'react';
importēt PropTypes no “prop-tips”;
klase MyComponent paplašina komponentu {
  statiskā propTypes = {
    nosaukums: PropTypes.string,
  };
  static defaultProps = {
    nosaukums: “Vienkāršs skaitītājs”,
  };
  render () {
    atgriezties 

{this.props.title}

;   } }
eksportēt noklusējuma MyComponent;

Valsts iniciēšana

Stāvokli var inicializēt komponenta konstruktorā:

klase MyComponent paplašina komponentu {
  konstruktors (rekvizīti) {
    super (rekvizīti);
    this.state = {
      skaits: 0,
    };
  }
}

Labāks veids ir inicializēt valsti kā klases īpašumu:

klase MyComponent paplašina komponentu {
  konstruktors (rekvizīti) {
    super (rekvizīti);
  }
  štats = {
    skaits: 0,
  };
}

Tas izskatās daudz labāk, tīrāk, lasāmāk un arī veicina komponentu dokumentāciju. Stāvokļa objekts jāinicializē pēc propTypes un defaultProps:

importēt React, {Component} no 'react';
importēt PropTypes no “prop-tips”;
klase MyComponent paplašina komponentu {
  // propTypes ir pirmais
  statiskā propTypes = {
    nosaukums: PropTypes.string,
  };
  // defaultProps ir otrais
  static defaultProps = {
    nosaukums: “Vienkāršs skaitītājs”,
  };
  // šeit ierodas konstruktors
  konstruktors () {
    ...
  }
  // tad nāk valsts
  štats = {
    skaits: 0,
  };
}

Pāriet funkciju setState

React dokumentācija neļauj paļauties uz this.state un this.props vērtībām nākamā stāvokļa aprēķināšanai, jo React tos atjaunina asinhroni. Tas nozīmē, ka stāvoklis nevar mainīties uzreiz pēc izsaukšanas setState ().

klase MyComponent paplašina komponentu {
  štats = {
    skaits: 10,
  }
  onClick = () => {
    console.log (this.state.count); // 10
    
    // skaits tūlīt nemainīsies
    this.setState ({skaits: this.state.count + this.props.step});
    
    console.log (this.state.count); // joprojām 10
  }
}

Lai gan tas darbojas vienkāršos scenārijos un stāvoklis joprojām tiks pareizi atjaunināts, sarežģītākos scenārijos tas var izraisīt neparedzētu rīcību.

Apsveriet šo scenāriju, ja jums ir komponents, kas piešķir vienu pogu. Noklikšķinot uz šīs pogas, tiek saukta HandClick metode:

klase MyComponent paplašina komponentu {
  static defaultProps = {
    solis: 5,
  }
  statiskā propTypes = {
    solis: PropTypes.number,
  }
  
  štats = {
    skaits: 10,
  }
  
  handleClick = () => {
    this.doSomething ();
    this.doSomethingElse ();
  }
  doSomething = () => {
    this.setState ({skaits: this.state.count + this.props.step});
  }
  doSomethingElse = () => {
    this.setState ({skaits: this.state.count - 1});
  }
  render () {
    atgriezties (
      
        

Pašreizējais skaits ir: {this.state.count}

         Noklikšķiniet uz manis       
    );   } }

Poga zvana, kad tiek noklikšķināta uz KäVClick (), kas savukārt izsauc doSomething (), tad doSomethingElse (). Abas funkcijas mainīs skaitīšanas vērtību stāvokļa iekšpusē.

Loģiski, ka 10 + 5 ir 15, tad atņem 1 un rezultātam jābūt 14, vai ne? Šajā gadījumā tā nav - skaita skaits pēc pirmā klikšķa ir 9, nevis 14. Tas notiek tāpēc, ka this.state.count vērtība joprojām ir 10, kad tiek izsaukts doSomethingElse (), nevis 15.

Lai to labotu, varat izmantot otro setState () formu, kas pieņem funkciju, nevis objektu. Šī funkcija saņems iepriekšējo stāvokli kā pirmais arguments, un rekvizīti atjauninājuma piemērošanas laikā kā otrais arguments:

this.setState ((prevState, rekvizīti) => ({
  skaits: prevState.count + props.step
}))

Mēs varam izmantot šo veidlapu, lai labotu mūsu piemēru:

klase MyComponent paplašina komponentu {
  ...
  handleClick = () => {
    this.doSomething ();
    this.doSomethingElse ();
  }
  doSomething = () => {
    this.setState ((prevState, rekvizīti) => ({
      skaits: prevState.count + props.step
    }));
  }
  doSomethingElse = () => {
    this.setState (prevState => ({
      skaits: prevState.count - 1
    }));
  }
  ...
}

Ar šo ieviešanu skaits tiek pareizi atjaunināts no 10 līdz 14 līdz 18 un tā tālāk. Vienkāršai matemātikai atkal ir jēga!

Izmantojiet bultu funkcijas kā klases rekvizītus

Šis atslēgvārds vienmēr ir mulsinājis JavaScript izstrādātājus, un tā izturēšanās ir ne mazāk mulsinoša React komponentos. Vai jūs zināt, kā šis atslēgvārds mainās komponentā React? Apsveriet šādu piemēru:

importēt React, {Component} no 'react';
klase MyComponent paplašina komponentu {
  štats = {
    skaits: 0,
  };
  onClick () {
    console.log (this.state);
  }
  render () {
    atgriezties (
      
        

Skaits ir: {this.state.count}

         Noklikšķiniet uz manis       
    );   } }
eksportēt noklusējuma MyComponent;

Noklikšķinot uz pogas, tiks parādīta kļūda:

Neuzņemts TypeError: Nevar nolasīt nenoteiktu īpašumu “state”

Tas notiek tāpēc, ka onClick kā klases metode pēc noklusējuma nav saistoša. Ir daži veidi, kā to labot. (pun paredzēts, dabūsi?)

Viens veids ir saistīt funkciju pareizajā kontekstā, nododot to renderēšanas () funkcijai:

 Noklikšķiniet uz manis 

Varat arī izvairīties no konteksta maiņas, izmantojot render () bultiņas funkciju:

 this.onClick (e)}> Noklikšķiniet uz manis 

Tomēr šīm abām metodēm ir nelielas veiktspējas izmaksas, jo funkcija tiks pārdalīta katram apmetumam. Lai izvairītos no šīm nelielajām veiktspējas izmaksām, varat saistīt funkciju konstruktora iekšpusē:

importēt React, {Component} no 'react';
klase MyComponent paplašina komponentu {
  konstruktors (rekvizīti) {
    super (rekvizīti);
    this.onClick = this.onClick.bind (this);
  }
  ...
  render () {
    ...
     Noklikšķiniet uz manis 
    ...
  }
}
eksportēt noklusējuma MyComponent;

Šis paņēmiens ir labāks, bet jūs varat viegli aizraut un novest pie kaut kas šāda:

konstruktors (rekvizīti) {
  // tas ir slikti, tiešām slikti
  this.onClick = this.onClick.bind (this);
  this.onChange = this.onChange.bind (this);
  this.onSubmit = this.onSubmit.bind (this);
  this.increaseCount = this.increaseCount.bind (this);
  this.decreaseCount = this.decreaseCount.bind (this);
  this.resetCount = this.resetCount.bind (this);
  ...
}

Tā kā mēs izmantojam Bābeli un mums ir atbalsts klases īpašībām, labāks veids, kā definēt klases metodes, būtu izmantot bultas funkcijas:

klase MyComponent paplašina komponentu {
  ...
  onClick = () => {
    // 'šis' ir saglabāts
    console.log (this.state);
  }
  render () {
    atgriezties (
      
        

{this.state.count}

         Noklikšķiniet uz manis       
    );   } }

Iznīcini butaforijas objektu

Ja komponentam ir daudz butaforiju, iznīciniet butaforijas objektu, novietojot katru īpašumu uz savas līnijas.

Bezvalstniekiem funkcionāliem komponentiem:

eksportēt noklusējuma funkciju MyComponent ({
  vārds,
  uzvārds,
  epasta adrese,
  apraksts,
  onChange,
  onSubmit,
}) {
  atgriezties (
    
      

{firstName}

      ...     
  ); }

Noklusējuma argumenti nav attaisnojums, lai pamestu defaultProps. Kā minēts iepriekš, jums vienmēr jādefinē propTypes un defaultProps.

Klases komponentiem:

klase MyComponent paplašina komponentu {
  ...
  render () {
    const {
      vārds,
      uzvārds,
      epasta adrese,
      apraksts,
      onChange,
      onSubmit,
    } = this.props;
    atgriezties (
      
        

{firstName}

        ...       
    );   } }

Tas ir tīrāks, atvieglo rekvizītu atkārtotu pasūtīšanu un atvieglo rekvizītu pievienošanu / noņemšanu no saraksta / no tā, vienlaikus radot Git lasāmu diff. Apsveriet šādus apstākļus:

Diferenciācija ir lasāmāka, ja katrs īpašums atrodas jaunā rindā

Labajā pusē varat viegli pateikt, kurš īpašums tika pievienots, taču kreisajā pusē jūs tikai zināt, ka šajā līnijā kaut kas ir mainījies, un jums ir jāskatās ļoti uzmanīgi, lai noskaidrotu, kura līnijas daļa bija mainīts.

Nosacīta renderēšana

Ja, pamatojoties uz nosacījumu, jums ir jāpierāda viens no diviem JSX koda komponentiem vai blokiem, izmantojiet trīskāršu izteiksmi:

isLoggedIn
  ? 
Laipni lūdzam, {username}!
  : Pieteikšanās

Ja kods sastāv no vairāk nekā vienas rindas, izmantojiet iekavas:

irLoggedIn? (
  
    Laipni lūdzam, {usename}!   
): (        Pieslēgties    )

Ja, pamatojoties uz kādu nosacījumu, jums ir jāatveido atsevišķa sastāvdaļa vai JSX koda bloks, tā vietā izmantojiet īssavienojuma novērtējumu:

ir pabeigts && 
esat pabeidzis!

Vairāk nekā vienai rindai izmantojiet iekavas:

ir pilnīgs && (
  
    Tu esi pabeidzis!   
)

Galvenais atribūts

Array.prototype.map un līdzīgu masīvu metožu izmantošana render () funkcijā ir ierasts modelis, un ir viegli aizmirst par atslēgas atribūtu. Samierināšana ir pietiekami grūta, nepadariet to grūtāk. Vienmēr atcerieties novietot atslēgu tur, kur tas pieder. (pun atkal paredzēts, dabūsi?)

render () {
  atgriezties (
    
    {       {         items.map (item => (           
  •             {priekšmeta nosaukums}           
  •         ))        }     
  ); }

Ja izmantojat karti (), filtru () vai līdzīgas masīva metodes, atzvanīšanas otrais parametrs ir vienības indekss. Parasti ir slikta ideja izmantot šo indeksu kā atslēgu. React izmanto atslēgas atribūtu, lai identificētu, kuri priekšmeti ir mainīti, pievienoti vai noņemti, un atslēgas vērtībai jābūt stabilai, un tai unikāli jāidentificē katrs vienums.

Gadījumos, kad masīvs ir sakārtots vai masīva sākumam ir pievienots elements, indekss tiks mainīts, lai arī elements, kas apzīmē šo indeksu, var būt vienāds. Tā rezultātā tiek iegūti nevajadzīgi atveidojumi un dažos gadījumos nepareizi dati.

Izmantojiet UUID vai ShortID, lai ģenerētu unikālu id katram vienumam, kad tas pirmo reizi izveidots, un izmantojiet to kā galveno vērtību.

Normalizēt stāvokli

Centieties normalizēt valsts objektu un turiet to pēc iespējas līdzenāku. Ligzdojot datus ligzdā, ir nepieciešama sarežģītāka loģika, lai tos atjauninātu. Iedomājieties, cik neglīti būtu atjaunināt dziļi ligzdotu lauku - pagaidiet, neiedomājieties, šeit:

// valsts objekts
štats = {
  ...
  ziņas: [
    ...,
    {
      meta: {
        id: 12,
        autors: '...',
        publisks: nepatiess,
        ...
      },
      ...
    },
    ...
  ],
  ...
};
// atjaunināt “publisks” uz “patiess”
this.setState ({
  ... šī valsts,
  ziņas: [
    ... this.state.posts.slice (0, indekss),
    {
      ... this.state.posts [indekss],
      meta: {
        ... this.state.posts [indekss] .meta,
        publisks: patiess,
      }
    },
    ... šī.valsts.posts.slice (indekss +1),
  ]
});

Šis kods ir ne tikai neglīts, bet arī var piespiest nesaistītus komponentus atjaunot, pat ja dati, kurus tie attēlo, faktiski nav mainījušies. Tas ir tāpēc, ka mēs esam atjauninājuši visus senčus valsts kokā ar jaunām objektu atsaucēm.

Tā paša lauka atjaunināšana būtu vienkāršāka, ja mēs valsts struktūru pārstrukturētu:

štats = {
  ziņas: [
    10,
    11,
    12,
  ],
  meta: {
    10: {
      id: 10,
      autors: 'autor-a',
      publisks: nepatiess,
    },
    11: {
      id: 11,
      autors: 'author-b',
      publisks: nepatiess,
    },
    12: {
      id: 12,
      autors: 'author-c',
      publisks: nepatiess,
    },
  },
}
this.setState ({
  meta: {
    ... šī.valsts.meta,
    [id]: {
      ... this.state.meta [id],
      publisks: patiess,
    }
  }
})

Izmantojiet klases nosaukumus

Ja kādreiz esat nonācis situācijā, kad jums ir jāizmanto nosacīts klases nosaukums, iespējams, esat uzrakstījis kaut ko šādu:

  ...

Tas kļūst patiešām neglīts, ja jums ir vairāki nosacīti klases vārdi. Tā vietā, lai izmantotu trīskāršu versiju, izmantojiet pakešvārdu paketi:

importēt klases vārdus no “klases nosaukumiem”;
const klases = klašu nosaukumi ('cilne', {'ir aktīva': isActive});
  ...

Viens komponents vienā failā

Šis nav grūts noteikums, bet es labāk gribētu katru komponentu glabāt vienā failā un pēc tam noklusēti eksportēt šo komponentu. Man nav konkrēta iemesla tam, bet es uzskatu, ka tas ir tīrāks un sakārtotāks - piecnieks, ja jūs arī to darāt!

Secinājums

Nav viens pareizais veids, kā attīstīt React komponentu. Mēs esam izgājuši cauri dažām labākajām praksēm un modeļiem, kas palīdzēs jums izstrādāt atkārtoti lietojamas un uzturamas sastāvdaļas, un es ļoti vēlos uzzināt, kādus modeļus un praksi jūs dodat priekšroku un kāpēc.

Nākamajā šīs sērijas daļā mēs izveidosim vienkāršu lietojumprogrammu “To-Do” un piemērosim dažus no šiem labākajiem paņēmieniem un modeļiem.

Vai šis raksts bija noderīgs? Lūdzu, noklikšķiniet uz zemāk esošās pogas Clap vai sekojiet man, lai uzzinātu vairāk.

Paldies par lasīšanu Ja jums ir atsauksmes, atstājiet komentāru zemāk.

Doties uz 7-b daļu: Vienkāršas ToDo lietotnes izveide (drīz)