react-native project/directory structure setup

Question

I'm learning react-native(android) on windows environment. I've manage to start a project on android(even though they only support for apple). I want some advice for naming good structures of files and folders for the project before I go deep into the code/learning. I want to organize things beforehand. Can anyone help me?

Ex. for html something like

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

react-native init structures have something like

android
node_modules
package.json
index.android.js
...

score 23 · Accepted Answer · answered Nov 03 '15 at 06:46

23

I recommend using Flux or something similar and then putting the actions/stores/dispatcher/etc in their own folders. This is my app structure:

answered Nov 03 '15 at 06:46

eyal83

3,893
3
19
30

score 18 · Answer 2 · edited Dec 24 '16 at 01:40

I think questioner had already resolved the issue. But I'm writing for the newcomers to React Native.

As specified on the official React Native site , we don't need to concern file/directory structure for different platform as IOS and Android.

For example, you can have these files in your project:

BigButton.ios.js
BigButton.android.js

So, we can construct and organize our files according to the our awesome app's logic. For instance; We can create a folder with name screens or views folder. Then we can put our login screen login.ios.js, login.android.js and lock.png (and maybe there will be another lock@2x.png file) files into a folder that is named as login which would be created in our screens folder. (I seperated login js files for the sake of example).

As a result out directory organization like be the following;

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

In fact, the end of our organization screens (or views) folder is been very similar to View part of MVC structure like in a web application.

I hope this helps.

PS: I don't know what is Flux which has been mentioned by @eyal83 . It may be better solution.

Edited

I've searched some application architecture libraries. According to my search, in developing complex applications, using Flux or one of its derivatives would be beneficial.

So, @eyal83 is right.(I've incremented his answer +1)

Flux sites: Github - Homepage

Some popular Flux derivatives/suchlike frameworks;

Redux.....: Github - Homepage - A Free Course by Its Creator

MobX.........: Github - Homepage

Reflux.....: Github

Alt...........: Github - Homepage

Flummox: Github - Homepage

Yahoo / Fluxible: Github - Homepage

Nuclear-js..........: Github - Homepage

Recently, I've been trying to learn one of them too.

react-native project/directory structure setup

2 Answers2

Edited