Kako da kreirate svoju React Native aplikaciju?

Često mi se dešavalo da kad dobijem ideju za novu aplikaciju ili neku super komponentu krenem da je kodiram što je pre moguće, naravno od samog početka, i na kraju provedem nekoliko sati u postavljanju testova, strukture aplikacija, lintera itd, neprekidno razmišljajući o toj jednoj funkcionalnosti koju sam želeo da napravim. Toliko vremena sam znao da izgubim na tako očitim, ponavljajućim stvarima.

Kada mi je to napokon dosadilo, kao što je verujem i mnogima pre mene, odlučio sam da pripremim jednostavan, čist i uredan bojler sa samo jednom komponentom datom kao primer. Ovde ga možete pronaći. Dizajniran je tako da može odmah da se koristi. Uz njega ćete moći brzo da počnete sa testiranjem komponenti ili implementacijom najnovije Facebook-wannabe ideje.

Ako nemate vremena za čitanje ovog detaljnog uputstva, možete samo klonirati ovaj projekat, instalirati dependensije i početi. Ipak preporučio bih vam da pogledate uputstvo ispod. Tokom mog istraživanja otkrio sam da postoji mnogo tutorijala koji govore kako započeti React Native projekat, sa mnogo odvojenih uputstva za spoljne pakete, ali nijedan koji pokriva sve to zajedno. 

Kreiranje React Native projekata

Ovo vam je iznenađenje, zar ne? Da, prvo moramo da napravimo RN projekat. Neki više vole da koriste create-react-native-app (repozitorium), ali u ovom tutorijalu držaću se dobre stare react-native init komande. Započećemo otvaranjem terminala u direktorijum u kojem želimo da naša aplikacija bude smeštena i onda pokrenemo:

react-native init RNComponentsTester    

ESLint podešavanje

Pre nego što krenete sa i jednom linijom koda, predlažem da pogledate linter. To je savršena početna tačka, jer sa njom nećete imati glavobolje kada započinjete sa pravljenjem svojih komponenti.

Veoma popularan izbor je eslint-config-airbnb i ja se lično odlučujem za istu. Naša ESLint konfiguracija će proširiti ovu konfiguraciju, ali će nam trebati nekoliko dodataka. Kako koristimo Flow, dobra je ideja da instalirate eslint-plugin-flowtype. Da bi smo izbegli probleme sa importovanjem i JSKS sintaksom, moramo dodati odgovarajuće dodatke. Na kraju ga u potpunosti instaliramo tako što ćemo izvršiti:

yarn add --dev eslint babel-eslint eslint-config-airbnb eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Sve što sada treba da uradimo je da dodamo .eslintrc datoteku u root direktorijum našeg projekta. Pravila koja ćete definisati u tom fajlu su potpuno na vama – postoji solidna dokumentacija o tome. Moja omiljena konfiguracija je:

{

  "parser": "babel-eslint",

  "extends": "airbnb",

  "plugins": [

    "react",

    "flowtype",

    "jsx-a11y",

    "import"

  ],

  "rules": {

    "react/jsx-filename-extension": [

      1, { "extensions": [".js", ".jsx"] }

    ],

    "react/prefer-stateless-function": [

      2, { "ignorePureComponents": true }

    ],

    "react/forbid-prop-types": [0, { "forbid": [] }],

    "import/extensions": [1, "never", { "svg": "always" }],

    "import/no-extraneous-dependencies": [

      "error",

      {

        "devDependencies": true,

        "optionalDependencies": false,

        "peerDependencies": false

      }

    ],

    "semi": ["error", "never"]

  },

  "env": {

    "jest": true

  }

}

Na kraju, kreirajte skriptu u package.json datoteki kako biste mogli brzo pokrenuti lint kroz celu aplikaciju. Pod scripts jednostavno unosimo:

"scripts": {

  // ...

  "lint": "eslint src"

}

src je direktorijum, gde ćemo držati naš kod. Od ovog momenta moći ćemo da proverimo našu aplikaciju jednostavnim pozivom yarn lint.

Prettier

Prettier je jedna od najboljih stvari za upravljanje kodom. Ako nikada niste čuli za to, uveravam vas da će vam se svideti. Nećete morati da razmišljate o stilizovanju koda i bićete 100% sigurni da će sintaksa biti konzistentna svim developerima koji rade na istom repozitorijumu. Samo se opustite i fokusirajte se na ono što pravite.

Konfiguracija prettier je prilično jednostavna, ali kako bi se što bolje iskoristila, najbolje je probati je sa lint-staged i husky paketima. Ponovo ih instaliramo zajedno pod devDependencies:

yarn add --dev prettier husky lint-staged

Sva magija se dešava u package.json i nema potrebe za promenom bilo koje druge datoteke. Prvo, definišemo pravila koja želimo da sledimo. Kreiramo još jednu skriptu:

"scripts": {

  // ...

  "pretty": "prettier --semi false --print-width 100 --single-quote

    --trailing-comma all --write "src/**/*.js""

}

Poslednji argument je regex match koji ukazuje na koje datoteke želimo pretty. U ovom slučaju, sve su Javascript datoteke iz našeg direktorija src. Kada imamo pretty definisan, možemo da napravimo još jedan korak i pozovemo lint-staged na zabavu. Nakon toga definišemo scripts:

"scripts": {

  // ...

},

"lint-staged": {

  "*.js": [

    "yarn pretty",

    "git add"

  ]

}

Husky je alat koji nam omogućava da definišemo git hooks, kao što je precommit. Da bi je koristili, druga skripta  mora doći u naš paket package.json:

"scripts": {

  "precommit": "lint-staged && yarn test"

}

Kada koristite husky i yarn možda ćete se susreti sa ovim problemom: https://github.com/typicode/husky/issues/84

Jednostavno ga rešite sa: 

yarn add —-dev husky --force

Sada je naš kod zaštićen od bilo kakve zloupotrebe stila i možemo izvršiti naše promene sa sigurnošću da će sve greške automatski biti ispravljene.

Uložili smo dosta truda u naš projekat a da nismo napisali ni jednu liniju koda – hajde da to promenimo.

Uhvatite Flow

Konačno je vreme da napravimo neku komponentu. Odlučio sam se za dugme, jer bi bilo korisno za testiranje drugih komponenti u budućnosti. Ovde možete naći resurse za AwesomeButton. Neću pisati mnogo o samom dugmetu, ali vam dajem ovaj repozitorijum kao primer na kome možete testirati vaše komponente.

Prvo, hajde da se fokusiramo na podešavanje Flowa za naš projekat. Jedna napomena:

Veoma je jednostavno!

Zaista. React Native obezbeđuje već pripremljen .flovconfig u root direktorijumu. Sve što je potrebno je:

1. Otvorite datoteku .flovconfig.
2. Skrolujte do samog dna ove datoteke.
3. Proverite broj verzije.

Verzija koju vidite je tačna verzija flow-bin paketa koju treba da instalirate. U mom slučaju, broj je bio 0.61.0. Hajde da pokrenemo komandu:

yarn add --dev [email protected] babel-preset-flow

Zapravo potrebna je još jedna stvar, a to je  babel-preset-flow, koji ne predstavlja veliki problem. Samo instalirajte ovaj paket i dodajte unapred postavljenu datoteku u .babelrc datoteku, na primer:

{

  "presets": ["react-native", "flow"]

}

Sada kreirajmo dve pomoćne skripte za jednostavno pokretanje komandi:

"scripts": {

  // ...

  "flow": "flow",

  "flow-stop": "flow stop"

}

I konačno smo spremni. Na flow sajtu možete pronaći informacije kako da ga koristite unutar komponenti, a možete pogledati i moju AwesomeButton komponentu. Zapamtite da stavite //@flow potpis na vrhu datoteke koju nameravate da ga koristite i spremni ste.

Jest, a šala je na tebi

Zaboravite na sve probleme iza sebe. Sada dolazi prava stvar. Postavka Jesta.

Jest je nešto što može da pretvori vaše popodne u haos, ali u isto vreme poštedeće vas mnogo problema u budućnosti. Kako biste konfigurirali Jest i fenomenalnu  Enzyme biblioteku koju su napravili ljudi iz Airbnb-a, i uspeli da oba funkcionišu na novom React Native projektu, uradite sledeće:

Instalirajte dependensije

yarn add --dev enzyme enzyme-adapter-react-16 enzyme-to-json react-dom

Postavite Jest konfiguraciju u package.json

"scripts": {

  // ...

},

"jest": {

  "preset": "react-native",

  "testMatch": [

    "**/?(*.)test.js?(x)"

  ],

  "snapshotSerializers": [

    "enzyme-to-json/serializer"

  ],

  "setupFiles": [

    "<rootDir>/jest/setup.js"

  ]

}

Nekoliko zanimljivih stvari se desilo iznad. Prvo, opisujemo konvenciju imenovanja (the naming convention) testnih fajlova u našoj aplikaciji. ”**/?(*.)test.js?(x)” izraz znači da se svaka datoteka sa imenom kao što su my-component.test.js , my-better-component.test.jsx, /src/components/commons/my-text/test.js itd. tretirana kao test datoteka.

Takođe možemo videti polje snapshotSerializers, gde se koristi enzyme-to-json paket koji smo prethodno instalirali. Zahvaljujući ovom serializeru, naši snapshoti će imati lako čitljivu formu.

I na kraju, podešavanje lokacije jests datoteke. Morali smo kreirati jest datoteku u okviru našeg root direktorijuma i postaviti setup.js datoteku unutar njega. Unutar ove datoteke, postoji jedna stvar koju moramo da dodamo:

import { configure } from 'enzyme'

import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

Ovo je neophodno zbog mnogih promena koje su uvedene u verziji React@16.
Konačno, u našoj package.json datoteki dodajemo dve finalne skripte:

"scripts": {

  // ...

  "test:unit": "jest",

  "test": "yarn lint && yarn flow && jest"

}

To je to! Ovu skriptu možete proveriti tako što ćete pokrenuti yarn test iz root terminala projekta. Zapamtite, testovi će proći samo ako je kreirana barem jedna .test.js datoteka sa definisanim testovima unutar nje.

Kao primer kako definisati testove i održavati test datoteke, možete pogledati moje AwesomeButton testove.

Nadam se da sada imate dobro konfigurisanu React Native aplikaciju, spremnu za nove ideje i eksperimente i setite se da uvek možete uporediti svoj kod sa ovim kompletnim primerom.

Ekipa Aurity-a širi svoj tim, a trenutno je otvorena remote pozicija za React Native developera.