Reputation: 305

react-native project/directory structure setup

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
...

Upvotes: 20

Answers (2)

efkan

Reputation: 13217

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 [email protected] 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.

Upvotes: 18