File Structure

root
 |- context
    |- UserContext.js
 |- components
    |- Box
       |- Box.component.js
       |- Box.styles.js
 |- screens
    |- App
       |- App.js
    |- Home
       |- Home.component.js
       |- Home.styles.js
    |- SignIn
       |- SignIn.component.js
       |- SignIn.styles.js
 |- assets
    |- images
    |- css
 |- index.js

Since react is component-based, it's essential to keep our components organized as possible. The most important things to focus on are the components and screens directory. The components directory contains reusable and modular snippets of code and can be rendered by using tags seen in markup languages. The screens directory contains all of our view of our application, treat them like separate webpages within a website; keep in mind that they are still react components. Within the components/screens directory, each component has its own directory, and inside of each component contains a component file that holds the codebase for that particular component and an optional styles file.

NewComponent
|- NewComponent.component.js
|- NewComponent.styles.js

The component has a particular naming convention, even though it not require to include .component or .styles it's good practice to ensure that the naming convention is explicit as possible.

assets
|- images
|- css

The assets directory contains global assets that would be reused throughout the application.