10 tipů, jak vytvořit svůj kód ReactJS jako PRO

Mnoho z nás, vývojářů frontendu, vývojářů js a také reagujících vývojářů pracuje v týmech, které zahrnují vývojáře s různou úrovní dovedností. Nejlepší metodou pro zlepšení našeho kódu je PŘEZKUM DOBRÉHO KVALITNÍHO KÓDU - ale ne to, že zkontrolujeme, zda si všichni myslí, že fungují, ale také, jak naše školy dosáhly tohoto výsledku - takže musíme zajistit čistý kód.

Proč? To je jednoduché - pokud váš tým počítá až 5 osob, je snadné se zeptat, jak to funguje. Ale pokud je váš tým obrovský nebo existuje mnoho dynamických změn, tento kvalitní kód nám a dalším vývojářům pomůže porozumět a samozřejmě se můžete cítit jako PRO; P

Vzal jsem 10 nejlepších postupů, které pomáhají mně a mému týmu zlepšit kvalitu kódu v našich reakčních projektech. Tyto tipy jsou obecně založeny na funkčnosti ES6, ale nepoužíváme je vždy. Hledejte je a neváhejte je také použít !!

1. Komponenty třídy VS Funkční komponenty

Všichni jsme velmi rádi, že v ES6 byla implementována podpora třídy - líbí se mi to! V reakci můžeme vytvořit součást rozšířením jednoduché třídy nazvané „React.Component“. Existují jednoduché metody správy stavu, podpora událostí událostí atd. Někdy je toho příliš mnoho, co potřebujeme, ale víme, že je můžeme použít.

importovat React, {Component} z 'reagovat'
třída MyComponent rozšiřuje komponentu {
  poskytnout() {
    return 

Dobrý den {this.props.text}

  } }

Ale v reakčním vývoji mnoho vývojářů zapomíná, jak můžeme vyrobit komponentu jednoduše pomocí funkční komponenty, která by mohla být funkcí s jedním parametrem - rekvizity.

import Reagovat z 'reagovat'
const MyComponent = (props) => 

Dobrý den {props.text}

Použití těchto dvou komponent však vypadá stejně!

Dobře - tak proč bych měl používat funkční komponenty? Protože existuje mnohem lehčí než rozšířená třída. Nezapomeňte, že používáme React a další reaktivní rámec, protože uvažujeme o využití paměti - tyto rámce vytvářejí virtuální DOM bez zbytečných rekvizit a metod, které je spravují jednodušší, rychlejší a rezervují méně paměti. Pokud tedy uvažujeme o optimalizaci, musíme myslet na tento rozdíl.

Dobře - takže kdy bychom mohli používat komponenty třídy a kdy funkční komponentu? Pravidla jsou velmi jednoduchá - KDYŽ POTŘEBUJETE SOMETHOVÁNÍ, ŽE FUNKČNÍ KOMPONENT NEMÁ - NEPOUŽÍVEJTE KOMPONENTU TŘÍDY!

Docela snadné? To jo! Začněte psát komponenty z náčrtu jako funkční součást. Když zjistíte, že potřebujete použít něco jako stavy nebo zjistit nějaké změny ve vaší komponentě - jako komponentaWillMount () atd., Můžete ji transformovat na komponentu Class.

Když o tom přemýšlíte, jaký typ komponenty použijete, stanete se jako PRO!

2. Příkazy „If“ v šabloně součásti

Podívejte se níže ... Víte, co je špatného na této metodě příkazu if?

{a> b? : null}

Pokud je podmínka nekonzistentní, React způsobí neplatnost. Hmm ... to je v pořádku - nevidím to, takže není problém ... NE !!!

Tato null stále existuje ve vašem DOMu, takže pokud si chcete vzít všechny děti ze svého seznamu nebo vyzvat nth-děti, bude tato null započítána !!!

Řešení?

{a> b && }

Tak snadné, tak elegantní. Jako profík!

3. Funkční vazba

I LOVE ES6! I LOVE ARROW FUNCTIONS !!! Pokud ale pochopíte, jak skutečně fungují, je jejich použití v reakci mnohem snadné. Více o nich (zde). Ve velmi krátké - šipkové funkci získejte rozsah od jejich přímého rodiče, který tam byl prohlášen.

Proč mluvím o odkazu na funkční vázání? Protože existuje velmi snadný trik, díky kterému budete kód čistit. Standardní funkční vazba na událost vypadá takto:

třída MyComponent rozšiřuje komponentu {
  konstruktor (rekvizity) {
    super (rekvizity)
    this.clickHander = this.clickHander.bind (this)
  }
  clickHander (e) {
    e.preventDefault ();
    alert ('Hello' + this.props.text)
  }
  poskytnout() {
    return  
  }
}

Vyhlašujeme funkci clickHandler, ale jejich hlavní kontext (toto) je tlačítko, na které klikneme. Takže pokud to chceme svázat jako naši třídu, musíme ji v konstruktoru svázat.

Mohu to usnadnit? SAMOZŘEJMĚ!!! Pomocí funkce šipek, protože získává rozsah od jejich přímého rodiče, že tam byla deklarována (kopie shora).

třída MyComponent rozšiřuje komponentu {
  clickHander = (e) => {
    alert ('Hello' + this.props.text)
  }
 poskytnout() {
    return  
  }
}

Jednodušší, rychlejší a vypadá jako PRO !!!!

** DŮLEŽITÉ **

Pokud chcete tuto strukturu použít - pamatujte, že právě teď je v experimentu, takže ji musíme přeložit babelem pomocí vlastnosti transform-class-property, což je standard v aplikaci create-reagovat-app. Reference zde

4. Kratší rekvizity a stavy

Další věc, kterou můžeme použít z ES6, ale zapomněli jsme - destruktivní. V mnoha recenzích kódu vidíme, že velké objekty jsou zničení pro malé části.

...
var width = this.props.myObject.width,
    height = this.props.myObject.height,
    color = this.props.myObject.color;
...

To je příliš dlouhé a ne flexibilní řešení. Existuje velmi snadný způsob, jak zničit tuto chytřejší.

...
var {width, height, color} = this.props.myObject;
...

Poměrně snadné, když chceme mít proměnnou se stejným názvem jako klíč objektu.

Jak to můžeme použít v reakci?

importovat React, {Component} z 'reagovat'
třída MyComponent rozšiřuje komponentu {
  poskytnout() {
    let {name, age} = this.props
    návrat 

Jmenuji se {jméno}. Je mi {věk} let.

  } }

nebo s funkční složkou

import Reagovat z 'reagovat'
const MyComponent = ({name, age}) => 

Jmenuji se {name}. Je mi {věk} let.

Další příklad? Když používáte velkou strukturu rekvizit nebo stavů.

importovat React, {Component} z 'reagovat'
třída MyComponent rozšiřuje komponentu {
  state = {
    tým: [
      {
        osoba: {
          základní informace: {
            jméno: 'Michal',
            věk: 27 let
          }
        }
      }
    ]
  }
  poskytnout() {
    let {name, age} = this.props.team [0] .person.basicInfo
    
    návrat 

Jmenuji se {jméno}. Je mi {věk} let.

  } }

Snadný, jednoduchý? Snadný, jednoduchý! A vypadá jako PRO;)

5. Oddělení stylů

Velmi rychlá rada - NEJLEPŠÍ STYLY !!! : D

Ale máme dvě situace:

  1. Můžeme použít externí styly ze souborů (.css, .scss)
  2. Používáme některé komponenty, které používají jejich styly budov, ale používají inline pouze jako materiál-ui

První situace je celkem jednoduchá, vložena do webového sass a zavaděče stylů a to je vše!

Druhá situace je ale trochu obtížná a já vám chci ukázat několik řešení:

# 1. Const se styly

importovat React, {Component} z 'reagovat'
const styles = {
  odstavec: {
    'fontSize': '10px',
    'color': '# ff0000'
  }
}
třída MyComponent rozšiřuje komponentu {
  poskytnout() {
    vrátit se (
      
        

Toto je můj první text

        

Toto je můj druhý text

      
    )   } }

# 2. Moduly CSS

Je to dobrý nápad načíst CSS jako objekt a odkaz ve vašem kódu do třídy, která existuje ve vašem css souboru.

importovat React, {Component} z 'reagovat'
importovat třídy z './style.css'
třída MyComponent rozšiřuje komponentu {
  poskytnout() {
    vrátit se (
      
        

Toto je můj první text

        

Toto je můj druhý text

      
    )   } }

Rychlé video, jak vás připravit na webpack pro CSS

A nezapomeňte - pokud můžete oddělit soubory a usnadnit jejich úpravy, pak pracujete jako PRO!

6. Závislosti prostředí

Rád něco prototypujeme, ale nechtěli jsme dát něco do produkční verze. Jak skrýt své fragmenty nebo něco k dispozici pouze pro vývojáře nebo v režimu vývoje?

Použijte proměnné prostředí - extra proměnná, kterou můžete přiřadit při zahájení nebo stavbě vašeho projektu. Když zahajujete jakoukoli akci z terminálu, můžete do procesu vložit další proměnné, které jsou do aplikace tlačeny uzlem v procesu.env, pak můžete tlačit cokoli.

ex. MY_VARIABLE = "Ahoj svět!" npm běh startu

Pak v process.env.MY_VARIABLE bychom měli vidět naši hodnotu.

Pokud používáte aplikaci create-React-Reaction, máte vytvořenou proměnnou typu NODE_ENV, která vrací režim sestavení, jako je vývoj, výroba nebo test. A to vše pro základní použití.

const isDebug = process.env.NODE_ENV === 'vývoj'

Jak je používat v praxi?

importovat React, {Component} z 'reagovat'
const isDebug = process.env.NODE_ENV === 'vývoj'
třída MyComponent rozšiřuje komponentu {
  poskytnout() {
    vrátit se (
      
        

Toto je můj veřejný text

        {isDebug &&

Toto je můj vývojový text

}       
    )   } }

Nejsem si jistý, zda je to jako PRO, ale můžete předat ENV VARIABLE některé informace týkající se prostředí, jako je adresa URL root root, nebo adresu projektu atd.

** Důležité **

Nezapomeňte, že pokud vám někdo chce dekódovat zdrojový kód, uvidí vás závislosti.

7. Pamatujte na možnosti testování součástí

To je docela snadné pochopit - pokud uvažujete o testování, reagujete na aplikaci, pak pravděpodobně budete chtít použít Jest pro testování. Ale musíte si uvědomit, že pokud spojíte vaše komponenty s nějakým backendem jako Apollo (pro GraphQL) nebo státním strojem jako Redux nebo jiným HOC, pak si musíte pamatovat, že tato rozšíření nebudou dostupná v jednoduchém testování komponent. A to je normální. Pokud chcete otestovat svou SINGLE komponentu, pak testujete pouze funkčnost - zkontrolujete, zda vstupní rekvizity a akce na komponentě fungují správně.

Jak tedy připravit vaše komponenty na testování?

Pokud nemáte žádný HOC, exportujte normálně:

importovat React, {Component} z 'reagovat'
třída MyComponent rozšiřuje komponentu {
  poskytnout() {
    let {name, age} = this.props
    návrat 

Jmenuji se {jméno}. Je mi {věk} let.

  } }
exportovat výchozí MyComponent

ale pokud chcete použít jakýkoli HOC, použijte tento vzor:

importovat React, {Component} z 'reagovat'
exportní třída MyComponent rozšiřuje komponentu {
  poskytnout() {
    let {name, age} = this.props
    návrat 

Jmenuji se {jméno}. Je mi {věk} let.

  } }
exportovat výchozí myHocFunction (MyComponent)

Proč? Protože když chcete importovat do jiného dokumentu, který komponentujete s HOC, použijete:

importovat MyComponent z './components/MyComponent'

ale v testech můžete použít

importovat {MyComponent} z './components/MyComponent'

Jednoduchý kód, jednoduché řešení, ale mnoho možností použití - protože jsme samozřejmě PRO;)

8. Použijte pomocníky

Velmi, velmi jednoduchá a důležitá věc. Někdy používáte stejné funkce nebo máte stejná pravidla v mnoha komponentách. Není nutné duplikovat kód. Pouze oddělte pomocné funkce od jiného souboru a vložte jej do globálního pomocného adresáře:

veřejnost
src
  pomocníky
    globals.js
  moduly
    Uživatelé
      pomocníky
        index.js
      UserList.js
      User.js
  app.js

** Důležité **
Pokud kód duplikujete - měli byste jej vylepšit!

Oddělení souborů je nejlepší způsob, jak se stát jako PRO!

9. Reagujte fragmenty

Připravili jste své nejlepší rozvržení, HTML značení je nejlepší, každý si myslí, že vypadá pěkně ... ARHHHH AMAZING, jen reagujte na implementaci ... záhlaví… vypadá perfektně ... jumbotron… úžasné… počkejte… Mám jednu sekci, která není zabalena… OH NE … Reagovat ... SHIT!

To byl problém, když chcete vyrobit komponentu, která neměla obal. Po dlouhou dobu musíme vše zabalit:

třída MyComponent rozšiřuje komponentu {
  poskytnout() {
    vrátit se (
      
        

Toto je můj první text

        

Toto je můj druhý text

      
    )   } }

protože reakce nám nedovolila dát to sama. proč - nebyl použit, pokud každý prvek uvnitř má svůj vlastní klíč Uniq, který dokáže rozpoznat, která část DOM je jeho komponentou.

VUT v Brně přidalo novou funkci nazvanou „Reagovat fragmenty“, která vám umožní sestavit komponentu, která seskupuje mnoho prvků, aniž by se zabalila do DOM. Funguje to stejně jako div obtékání, ale místo div používáme příkaz nebo krátkou verzi <>

Př.

třída MyComponent rozšiřuje komponentu {
  poskytnout() {
    vrátit se (
      
        

Toto je můj první text

        

Toto je můj druhý text

      
    )   } }

nebo

třída MyComponent rozšiřuje komponentu {
  poskytnout() {
    vrátit se (
      <>
        

Toto je můj první text

        

Toto je můj druhý text

           )   } }

Úžasné - jste jako PRO, přečtěte si celý článek z dokumentace

10. PRO používají typy prop a výchozí rekvizity

Pokud jste PRO, přemýšlíte o věcech, které potřebujete komponenty. Proč bych měl používat PropTypes?

Během vývoje si můžete být jisti, že jim vaše ostatní komponenty předávají správně hodnotu. Pokud chcete použít řetězec, pak ve vašich rekvizitách by měl být řetězec, protože např. můžete udělat uvnitř komponenty specifické věci pro řetězec. Přidání defaultProps, pokud není vyžadován váš propType, vás ochrání, abyste vy / nebo vaše projektová vysoká škola zapomněli přidat nějakou komponentu do komponenty.

importovat React, {Component} z 'reagovat'
import PropTypes z 'prop-types'
třída MyComponent rozšiřuje komponentu {
  poskytnout() {
    return 

Dobrý den {this.props.text.toLocaleUpperCase ()}

  } }
MyComponent.propTypes = {
  text: PropTypes.string
}
MyComponent.defaultProps = {
  text: 'Svět'
}

A chcete vědět více o PropTypes - Úplná dokumentace

SOUHRN

Jak vidíte, těchto 10 tipů je velmi snadné implementovat do vašeho kódu. Přečtěte si to ještě jednou, přidejte reakci, pokud se vám líbí, a napište komentáře, pokud existuje něco nejasného nebo pokud si chcete přečíst něco konkrétnějšího! Hodně štěstí!