Folder Structure

Jumbo uses the optimized and easy to understand folder structure to keep its content. The picture shows the folder structure of Jumbo React.

1. public

public folder contains the HTML template of our app. It contains the public assets and Javascript used for rendering the application. For example, web font files and other assets which doesn’t come as node packages are kept in this folder.

2. src

src is the folder where we write the React Code. It is the most important folder of the package. You can find all the pages, components, modules, apps etc. in this folder. This is the main workplace to start writing/extending the application source code. The src content is described below :-

• app

  All the code related to the content of the template lies in this folder. This folder contains a folder called "routes" where we define all the routes and corresponding components. This "routes" folder contains a file called "index.js" and other sub-folders, so basically sub-folders kept along with the index.js in "routes" folder are the content of routes.

• assets

  It contains the images, media and other raw material used in the template.

• components

  This folder although seems to be a common folder but it is as important as the app folder. In this folder, we define all the re-usable components like general input box, buttons, cards etc and use them throughout the template. We say it the most important folder because after declaring the component here, if we need to change something in that component in the future, we just have to apply that change in this folder and it will be reflected throughout the whole template/app saving a lot of time for us.

• containers

  This folder basically contains all the stateful files related to authentication and structure of the template. It contains the files related to signin/signup, layouts, headers and sidebar of the template. If something needs to be updated in the layout, header, sidebar or customizer of the template, this folder should be looked upon to. This folder can also be called as entry point of the app.

• IngProvider

  It contains the files related to languages used in the template. This folder is important for multi-lingual templates. When we use multiple languages, we don't render a text directly on the screen, instead we define a unique key for that text and then render it on the screen and in this folder we define that unique ids and its corresponding text according to the different languages.

• util

  This folder contains files that contain global helper functions.

• styles

  It contains all the CSS related files of the template. Since Jumbo React uses Sass for the beautification of the template so this folder contains all the Sass related files.

• actions, constants, reducers, sagas, store

  These folders are related to Redux. In these folders, we define the global states that we will be using in different files throughout the templates and the functions to update the global states.

3. package.json

This file contains the information of dependencies installed in the template. Information includes the name and version of the dependency.