web-dev-qa-db-fra.com

configuration de la structure de projet / répertoire react-native

J'apprends React-Native (Android) sur l'environnement Windows. J'ai réussi à démarrer un projet sur Android (même s'ils ne prennent en charge que Apple). Je veux quelques conseils pour nommer de bonnes structures de fichiers et de dossiers pour le projet avant d'aller en profondeur dans le code/apprentissage. Je veux organiser les choses à l'avance. Quelqu'un peut-il m'aider?

Ex. pour quelque chose html comme

 www 
 | -js 
 | -css 
 | -img 
 build 
 | -js 
 | -css 
 | -less 
 ...

les structures init natives réactives ont quelque chose comme

 Android 
 Node_modules 
 Package.json 
 Index.Android.js 
 ...
structurereact-native
20
MeetMahPuppy

Je recommande d'utiliser Flux ou quelque chose de similaire, puis de placer les actions/stores/dispatcher/etc dans leurs propres dossiers. Voici la structure de mon application: React Native app structure

23
eyal83

Je pense que l'intervenant avait déjà résolu le problème. Mais j'écris pour les nouveaux arrivants à React Native.

Comme spécifié sur le officiel React Site natif , nous n'avons pas besoin de concerner la structure des fichiers/répertoires pour différentes plates-formes comme IOS et Android.

Par exemple, vous pouvez avoir ces fichiers dans votre projet:

BigButton.ios.js
BigButton.Android.js

Ainsi, nous pouvons construire et organiser nos fichiers selon la logique de notre application géniale. Par exemple; Nous pouvons créer un dossier avec le nom screens ou views dossier. Ensuite, nous pouvons mettre notre écran de connexion login.ios.js, login.Android.js et lock.png (et il y aura peut-être un autre fichier [email protected] ) dans un dossier nommé login qui serait créé dans notre dossier screens . (J'ai séparé les fichiers de connexion js à titre d'exemple).

En conséquence, l'organisation des répertoires est la suivante;

AwesomeProject\Android\..
AwesomeProject\ios\..
AwesomeProject\screens\login\login.Android.js
AwesomeProject\screens\login\login.ios.js
AwesomeProject\screens\login\lock.png

En fait, la fin de notre dossier screens (ou vues) de notre organisation est très similaire à View part of MVC structure like in a web application.

J'espère que ça aide.

PS: Je ne sais pas ce qu'est Flux qui a été mentionné par @ eyal83. Ce peut être une meilleure solution.

Édité

J'ai recherché quelques bibliothèques d'architecture d'application. Selon ma recherche, dans le développement d'applications complexes, l'utilisation de Flux ou d'un de ses dérivés serait bénéfique.

Donc, @ eyal83 a raison. (J'ai incrémenté sa réponse +1)

Sites de flux : Github - Page d'accueil

Certains frameworks populaires dérivés de flux/similaires ;

Redux .....: Github - Homepage - n cours gratuit par son créateur

MobX .........: Github - Page d'accueil

Reflux .....: Github

Alt ...........: Github - Page d'accueil

Flummox: Github - Page d'accueil

Yahoo/Fluxible: Github - page d'accueil

Nuclear-js ..........: Github - Page d'accueil

Récemment, j'ai essayé d'en apprendre un aussi.

18
efkan