Jumbo uses the optimized and easy to understand folder structure to keep its content. The picture shows the folder structure of Jumbo React.
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 :-
- appAll 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.
- assetsIt contains the images, media and other raw material used in the template.
- componentsThis 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.
- containersThis 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.
- IngProviderIt 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.
- utilThis folder contains files that contain global helper functions.
- stylesIt 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, storeThese 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.
This file contains the information of dependencies installed in the template. Information includes the name and version of the dependency.