{"id":20504486,"url":"https://github.com/tiknil/react-native-style-guide","last_synced_at":"2026-02-15T01:32:06.779Z","repository":{"id":113422005,"uuid":"155538832","full_name":"tiknil/react-native-style-guide","owner":"tiknil","description":"Tiknil's style guide \u0026 coding conventions for React Native projects","archived":false,"fork":false,"pushed_at":"2021-02-10T15:55:06.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-12T14:02:16.997Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tiknil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-31T10:27:07.000Z","updated_at":"2021-02-10T15:55:09.000Z","dependencies_parsed_at":"2023-04-24T18:43:41.990Z","dependency_job_id":null,"html_url":"https://github.com/tiknil/react-native-style-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tiknil/react-native-style-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiknil%2Freact-native-style-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiknil%2Freact-native-style-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiknil%2Freact-native-style-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiknil%2Freact-native-style-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tiknil","download_url":"https://codeload.github.com/tiknil/react-native-style-guide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiknil%2Freact-native-style-guide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29464051,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T01:01:38.065Z","status":"ssl_error","status_checked_at":"2026-02-15T01:01:23.809Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T19:38:23.162Z","updated_at":"2026-02-15T01:32:06.765Z","avatar_url":"https://github.com/tiknil.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-style-guide\nGuida di riferimento per i progetti React Native gestiti da Tiknil e i suoi collaboratori.\n\nL'obiettivo è darsi delle **best practices** sulla stesura del codice per agevolare il lavoro in team e velocizzare la comprensione del codice.\n\n## Riferimenti\nAlcuni contenuti di questa guida sono ispirati dai seguenti interessanti articoli di settore:\n\n* *[AirBnb JavaScript Style Guide](https://github.com/airbnb/javascript)*: ottima linea guida per la stesura del codice JavaScript creata da *AirBnb* nel periodo in cui ha investito molto su React Native.\n\n## Sommario\n- [react-native-style-guide](#react-native-style-guide)\n  - [Riferimenti](#Riferimenti)\n  - [Sommario](#Sommario)\n  - [Prerequisiti](#Prerequisiti)\n  - [Boilerplate](#Boilerplate)\n  - [Stile della sintassi](#Stile-della-sintassi)\n      - [Let e Const](#Let-e-Const)\n      - [Destructuring](#Destructuring)\n      - [Moduli](#Moduli)\n      - [Classi](#Classi)\n      - [Parametri di default](#Parametri-di-default)\n      - [Template strings](#Template-strings)\n      - [Arrow functions](#Arrow-functions)\n      - [this](#this)\n    - [ESLint](#ESLint)\n    - [Altro](#Altro)\n  - [IDE](#IDE)\n  - [Tecnologie utilizzate](#Tecnologie-utilizzate)\n  - [Struttura del progetto](#Struttura-del-progetto)\n  - [React Native](#React-Native)\n  - [Redux](#Redux)\n  - [Immutable](#Immutable)\n  - [Navigation](#Navigation)\n  - [Persistenza dei dati](#Persistenza-dei-dati)\n  - [Test](#Test)\n\n## Prerequisiti\nPer realizzare un'applicazione in **React Native** è (ovviamente) un prerequisito fondamentale la conoscenza di **JavaScript**.\n\n## Boilerplate\nImpostando il progetto a partire dal [boilerplate tiknil](https://github.com/tiknil/react-native-boilerplate) si ottiene un progetto già configurato secondo le convenzioni Tiknil, con i moduli principali già installati e pronto per lo sviluppo 🚀\n\n\n## Stile della sintassi\n\nIn _JavaScript_ i `;` sono opzionali e noi preferiamo non utilizzarli perché il codice rimane più pulito e in molti casi ne agevola il mantenimento.\n\u003cbr\u003eAd esempio in questo caso:\n\n```\n// 👎\npromise()\n\t.then(thenCallback)\n\t.catch(catchCallback);\n\t\n// 👍\npromise()\n\t.then(thenCallback)\n\t.catch(catchCallback)\n```\nInfatti se devo aggiungere il metodo `finally` mi basta aggiungere una riga senza dover cancellare (o spostare) il `;`.\n\n```\npromise()\n\t.then(thenCallback)\n\t.catch(catchCallback)\n\t.finally(finallyCallback)\n```\nÈ comunque permesso inserire un `;` in qualsiasi caso in cui la sintassi non fosse particolarmente comprensibile.\n\nFaremo, inoltre, utilizzo di *ECMAScript 6+ (ES 2015+)* per utilizzare vari improvements che permettono uno stile di programmazione più evoluto:\n\n* [Let e Const](#let-e-const)\n* [Destructuring](#destructuring)\n* [Moduli](#moduli)\n* [Classi](#classi)\n* [Parametri di default](#parametri-di-default)\n* [Template strings](#template-strings)\n* [Arrow functions](#arrow-functions)\n* [this](#this)\n* [ESLint](#eslint)\n* [Altro](#altro)\n\n#### Let e Const\nEvitare di dichiarare variabili tramite `var` e usare invece `const` e `let` a seconda che siano costanti o variabili.\n\u003cbr\u003eEssi infatti sono *block-scoped*, al contrario di `var` che è *global-scoped* con ovvi vantaggi al fine di evitare errori di riassegnazione di variabili fuori dallo *scope* corrente.\n\n#### Destructuring\nQuando è necessario accedere a proprietà multiple di un oggetto è utile utilizzare l'operazione di *destructuring*:\n\n```\n// 👎\nfunction getFullName(user) {\n  const firstName = user.firstName\n  const lastName = user.lastName\n\n  return `${firstName} ${lastName}`\n}\n\t\n// 👍\nfunction getFullName(user) {\n  const { firstName, lastName } = user\n  return `${firstName} ${lastName}`\n}\n\n// 👍: è addirittura possibile destrutturare direttamente nel parametro\nfunction getFullName({ firstName, lastName }) {\n  return `${firstName} ${lastName}`\n}\n```\n\nÈ possibile applicare il *destructuring* anche agli array. Nota: l'ordine è importante!\n\n```\nconst arr = [1, 2, 3, 4]\n\n// 👎\nconst first = arr[0]\nconst second = arr[1]\n\n// 👍\nconst [first, second] = arr\n```\n\n#### Moduli\nUtilizzare sempre `import / export` per gestire importazione ed esportazione dei moduli.\n\n```\n// 👎\nconst ReactNativeStyleGuide = require('./ReactNativeStyleGuide');\nmodule.exports = ReactNativeStyleGuide.es6;\n\n// 👍\nimport ReactNativeStyleGuide from './ReactNativeStyleGuide';\nexport default ReactNativeStyleGuide.es6;\n\n// 👍: è possibile destrutturare direttamente nell'import\nimport { es6 } from './ReactNativeStyleGuide';\nexport default es6;\n```\n\nUnica eccezione è per gli [inline requires volti ad ottimizzare il tempo di caricamento dell'app tramite RAM bundles](https://facebook.github.io/react-native/docs/performance#ram-bundles-inline-requires)\n\n#### Classi\nFinalmente anche in *JavaScript* è possibile utilizzare la sintassi a classi, molto più leggibile del vecchio sistema a *prototypes*.\n\n```\n// 👎\nfunction Queue(contents = []) {\n  this.queue = [...contents];\n}\nQueue.prototype.pop = function () {\n  const value = this.queue[0];\n  this.queue.splice(0, 1);\n  return value;\n};\n\n// 👍\nclass Queue {\n  constructor(contents = []) {\n    this.queue = [...contents];\n  }\n  pop = () =\u003e {\n    const value = this.queue[0];\n    this.queue.splice(0, 1);\n    return value;\n  }\n}\n```\n\n\n#### Parametri di default\nAi parametri dei metodi è possibile assegnare un valore di default nel caso il metodo venga invocato senza quel parametro.\n\n```\n// 👎: molto male; mai mutare il contenuto dei parametri\nfunction handleThings(opts) {\n  opts = opts || {};\n  // ...\n}\n\n// 👍\nfunction handleThings(opts = {}) {\n  // ...\n}\n```\n\n#### Template strings\nQuando vanno costruite programmaticamente delle stringhe è meglio utilizzare il *template* piuttosto che la *concatenazione* perché offre una sintassi più chiara e concisa.\n\n```\n// 👎\nfunction sayHi(name) {\n  return 'How are you, ' + name + '?';\n}\n\n// 👍\nfunction sayHi(name) {\n  return `How are you, ${name}?`;\n}\n```\n\n#### Arrow functions\nNel caso sia necessario utilizzare funzioni anonime (ad esempio in caso di callback inline) usiamo l'_arrow notation_.\n\n```\n// 👎\n[1, 2, 3].map(function (x) {\n  const y = x + 1\n  return x * y\n})\n\n// 👍\n[1, 2, 3].map((x) =\u003e {\n  const y = x + 1\n  return x * y\n})\n```\nVedi anche la sezione [this](#this)\n\n#### this\nOltre che per le funzioni anonime, le arrow functions sono molto comode per manipolare l'oggetto `this` nelle nostre classi. Difatti in Javascript l'oggetto `this` si comporta in maniera inaspettata rispetto a linguaggi più rigidi. Su [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) è disponibile una guida completa sull'utilizzo del this in Javascript. Per quanto riguarda lo scopo di questa guida, è sufficiente la seguente distinzione (semplificata):\n- L'oggetto `this` all'interno di una funzione standard rappresenta il contesto da cui la funzione è stata chiamata\n- L'oggetto `this` all'interno di un'arrow function rappresenta il contesto in cui la funzione è stata chiamata\n\nSupponiamo di avere il sguente codice:\n```js\nclass Test {\n  x = 2\n\n  getX() {\n    return this.x\n  }\n\n  // Stessa funzione ma implementata come arrow function\n  arrowGetX = () =\u003e this.x\n}\n\nclass CallbackClass {\n  x = 'pippo'\n  callback = null\n\n  constructor(cb) {\n    this.callback = cb\n  }\n\n  callFunction() {\n    return this.callback()\n  }\n}\n\nconst t = new Test()\nconst cb = new CallbackClass(t.getX)\nconsole.log(cb.callFunction()) // Ritorna 'pippo', perchè il this si riferisce al contesto da cui è stata chiamata, ovvero la classe CallbackClass\nconst arrowCb = new CallbackClass(t.arrowGetX)\nconsole.log(arrowCb.callFunction()) // Ritorna x, perchè il this si riferisce al contesto in cui è stata definita\n```\n\nIn generale, il comportamento desiderato è quello delle arrow function e quindi conviene usarle sempre per implementare i metodi delle nostre classi. Unica eccezione vale per i metodi riferiti al lifecycle della classe (`constructor`, `componentDidMount`, `componentWillUnmount`, ...) che __non possono__ essere implementati con arrow function.\n\n### ESLint\nESLint è un tool che monitora lo stile in cui il codice JS è stato scritto, segnalando (e fixando automaticamente) inconsistenze di stile o sezioni di codice poco leggibile. Nel [boilerplate tiknil](https://github.com/tiknil/react-native-boilerplate) è presente un file di configurazione (`.eslintrc.js`) che implementa le regole di sintassi elencate di seguito e le best practices consigliate da react native. Configurando l'IDE per utilizzare ESLint, ci si assicura che il codice scritto sia consistente con gli standard e facilmente leggibile.\n\n🔔 TIP: puoi configurare l'IDE per fixare il file aperto con una semplice combinazione di tasti\n\n### Altro\n[Qui](http://es6-features.org/#Constants) è possibile vedere un recap di tutti gli improvements di ECMAScript 6+.\n\n## IDE\nPer lo sviluppo in react native sono stati selezionati 2 possibili strumenti, un editor e un IDE completo:\n- **[Visual Studio Code](https://code.visualstudio.com/)** è stato identificato come il miglior **editor** in quanto rapido e molto completo. Da preferire rispetto ad altri editor quali Atom o Sublime Text\n- **[WebStorm](https://www.jetbrains.com/webstorm/)** è un IDE e di conseguenza molto più pesante rispetto a Visual Studio Code. Tuttavia, presenta vari vantaggi quali una miglior integrazione con Flow, un miglior supporto all'autocomplete e al refactoring dei file (es. spostando un file vengono corretti tutti gli import di quel file nel progetto). **PHPStorm** è di fatto un estensione di WebStorm con miglior supporto a PHP ed è interscambiabile.\n  \nSia Visual Studio Code che WebStorm/PHPStorm possono essere configurati per supportare comodamente le tecnologie utilizzate (Flow e ESLint)\n\n## Tecnologie utilizzate\nIn un progetto *React Native* normalmente utilizziamo le seguenti tecnologie di supporto:\n\nTecnologia | Ruolo | Note\n--- | --- | ---\n**Yarn** | Dependency manager di *Node* | Consigliato l'utilizzo di Yarn al posto di npm in quanto più rapido nel download delle dipendenze e con un miglior supporto al file di lock.\u003cbr\u003eSi può installare tramite npm con il comando `npm install -g yarn`\n**Flow** | Static type checker | Permette di introdurre un minimo di *type-safety* in *JavaScript* tramite analisi statica del codice.\u003cbr\u003eGli [IDE](#ide) indicati supportano un plugin di flow che permette di vedere inconsistenze di flow come errori e warnings all'interno del codice. **Non** ha alcun effetto a runtime.\n**[Moment](https://momentjs.com/)** | Gestore date e orari | Libreria JS per parsing, validazione, manipolazione e visualizzazione di date e orari.\n**[React Native](#react-native)** | Framework Mobile | Framework crossplatform con output mobile nativo basato su [React JS](https://reactjs.org/).\n**[Redux](#redux)** | State container | Libreria JS che agevola l'applicazione di un pattern di sviluppo che permette di realizzare codice più testabile e consistente su diverse piattaforme.\n**[Immutable](#immutable)** | Dati immutabili | Libreria JS che permette di generare collezioni di dati immutabili.\u003cbr\u003eParticolarmente utile in combinazione con lo *state* di React perché permette di evitare inutili refresh di componenti quando non necessario.\n\n## Struttura del progetto\nLa struttura del progetto è organizzata come segue:\n\n- `android/` Contiene il progetto android e tutto il codice android nativo. Cartella da aprire con Android Studio\n- `ios/` Contiene il progetto ios, il codice nativo e il podfile per l'installazione delle dipendenze. Da aprire con Xcode\n- `flow-typed/` Contiene file javascript che vengono utilizzati da flow per rilevare dei Tipi utilizzabili all'interno del codice js senza necessità di import\n- `src/` Contiene tutto il codice javascript:\n  \n  - `assets/` contiene gli asset statici usati dal codice javascript (immagini, fonts, ecc)\n  - `components/` contiene component React riutilizzabili sul codice. Idealmente dovrebbero essere dump components, che si limitano a comporre il compomente grafico sulla base delle proprietà ricevute e propagano al padre eventi e interazioni dell'utente.\n  \n    - `template.js` questo file contiene il boilerplate di un componente tipico, da usare come punto di partenza per gli altri componenti\n  - `ducks/` Implementazioni dei reducer e delle azioni redux seguendo lo standard dei ducks: https://github.com/erikras/ducks-modular-redux\n  - `networking/` Implementazione delle chiamate HTTP\n  - `screens/` \n  \n    - `[screen-name]`\n\n      - `index.js` Mapping sullo state Redux e dispatch delle azioni necessarie alla schermata\n      - `component.js` Implementazione del componente stesso\n      - `components/` (opzionale) componenti usati solo da questa schermata\n    - `setup.js` Definizione della navigazione tra le schermate (es. creazione di navigators in caso di utilizzo di [`react-navigation`](https://reactnavigation.org/))\n  - `translations/` Contiene i file json delle stringhe localizzate su varie lingue (es. `it.json`, `en.json`) \n  - `utils/` funzioni javascript utilizzate in più punti dell'app. In questa cartella NON vanno inseriti componenti react.\n  - `i18n.js` file che esporta l'oggetto da utilizzare per ottenere le stringhe localizzate\n  - `index.js` Entry point dell'app: inizializza redux ed effettua il render del root component\n  - `redux-setup.js` Inizializzazione di redux, chiamato da `src/index.js`  \n  -  `styles.js` Esporta un oggetto contente lo stile grafico (font, margini, colori..) dell'app\n\n\n## React Native\ncoming soon\n\n## Redux\ncoming soon\n\n## Immutable\ncoming soon\n\n## Navigation\ncoming soon\n\n## Persistenza dei dati\ncoming soon\n\n## Test\ncoming soon\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiknil%2Freact-native-style-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiknil%2Freact-native-style-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiknil%2Freact-native-style-guide/lists"}