AppReactors | React Native Code Structure

React Native Code Structure

One of the hardest things in getting started with a production level application is to figure out a structure that works for you in terms of folders, components, assets, etc. It's something that can always be changed later, but lets face it, developers don't want to go back and do refactoring that doesn't make a difference in code efficiency.

Here is how I like to structure everything- note that this is all inside the SRC directory.

Index.js

Index.js file should contain hook ups to redux, error logging (sentry for example), authentication wrapper (auth0 for example), and inside of all of these JSX tags should import the App component

App.js

Here is where I import all my scenes and have all my routing logic. This is where I check to see if the user is authenticated and if so which route they will be seeing. I have my navbar and footer brought in at this level so it doesn't have to be rendered in each scene.

Here is where I want to talk about what different strategies are:

Some people like to have all components related to specific pages in individual folders. They create all their components that are directly related to that scene and have specific css. This is where I tend to differ

Components

This is where I create each one of my components. You want to make them as small as possible. I have many different styles inside my sass files (can be css) and use a package "classNames" where I am able to select the className based on the props passed in- for example:

That is basically saying that container is default, but that component accepts styleName and styleName2 as well. The example structure I am using is -> components/RadioButton/RadioButton.js and components/RadioButton/RadioButton.module.scss

Scenes

This is where I have each physical page rendered. I separate scenes into different pieces of our flow- for example all signup pages although are different pages, I place them under signup and then have their own folder for scenes

Other folders

Also inside SRC I have:

My assets folder with fonts, images, svgs, etc Auth folder which pulls in .env variables into my Auth.js file Api folder- with reusable api calls Hooks folder- with all my reusable react hooks Styles folder- top level styles folder for scss

One more important note- index.js vs fileName.js

I have used both patterns. The advantage of having Home/Index.js (where index.js imports the Home.js file under that folder) is that you only have to import Home.

Import Home from ../Home for example

The problem with this structure is it can be way harder to search for your files. I don't think it's that much longer to type:

Import Home from ../Home/Home

And therefore I am not a fan of the Index.js pattern.

Thanks for reading, hopefully some of these tips help with the intimidation of starting a new project