# Overview
An overview about Jumbo React
Jumbo React is a complete [React](https://reactjs.org/) admin template based on Material Design Concept to help you build your react application faster and cost effectively.
Jumbo React uses the top notch libraries and frameworks popular among the react developers community. Some of those popular libraries are **Material-UI**, **Redux**, **Redux-Saga**, **ReCharts**, **React Big Calendar** and many more.
If you want a quick MVP, a solid product or a quick turn around on your react projects. Jumbo React covers these all for you. You can build any small to complex level application with Jumbo React.
Even if you want to learn building a fully featured app in React, the coding style, documentation standards, folder structure and best practices followed in Jumbo React along with 6 ready to go in-built apps can help you in your learning path.
**Key Features**
* Equipped with latest technologies like React Hooks.
* Practically Unlimited ready to use components.
* Special focus on Code Splitting and Re-usability.
* Integrated with all leading third party libraries.
* Multi-lingual and RTL supported.
* 100's of pages.
* Pixel perfect designing.
# Package Content
Once you download the zipped folder from your Themeforest account and extract that. You will get the folder like below:
jumbo-react-v-4.x
Here **v-4.x** shows the version of the Jumbo React.
Inside this folder, you will receive following sub-folders and files:
* source
This sub-folder contains the files of Material Design, Material and React based version of Jumbo React powered by Material-UI and Reactstrap UI library.
* jumbo-jquery/
This sub-folder contains the files of pure BS4 and jQuery based version of Jumbo React.
* next-js/
This folder contains the next.js version of Jumbo React. So, if you want to run the project in next.js , then you can use this folder.
* starter-template/
The code in this folder can be used as the starting point of the new project. It contains all the necessary components and settings required for the new project.
* starter-template-jwt-auth/
This is another starter template code just as above one with one additional feature of authentication. This starter-template folder contains the JWT authentication service, you can use this to implement authentication process in your project.
* starter-template-without-auth/
As the name suggests, this folder contains the code for the starting point of the new project without any authentication, so if you want to create a project that does not contain authentication feature, then this folder is ideal to start with.
* build/
Build folder is used for offline demo or when the project needs to be deployed on the server.
* docs/
This folder contains the html file that contains the link to online document of Jumbo React.
* PSDs/
This folder contains the psd files of the screens.
* change-log.txt
This file contains the information about the updates done in the Jumbo on timely basis. So, this text file tells you on which date, what updation was done in the Jumbo.
# Environment Setup
In order to use or run Jumbo in your system, Firstly, you have to setup the React environment in the system, Follow the following steps to make your system compatible for using Jumbo or any other React project.
1\. **Install Node.js**
Node.js is a JavaScript run time built needed to run a React App. You can install the recommended version of Node.js from the official website
2\. **Install Yarn**
Yarn is responsible for adding and installing all the dependencies required for running the React app on the system. You can install the latest version of Yarn from the official website
# Project Setup
Steps to setup the project from scratch.
### **Step 1 - Pick the Skeleton(Starter Template)**
In order to setup the project, pick any starter template from the Jumbo folder (one you got after purchasing the Jumbo), copy it to the place where you want to keep the project, rename the folder.
### **Step 2 - Installing the Dependencies**
In step 2, Open the command prompt and reach out to the path where the folder is kept. Now, run the following command to install the dependencies and libraries used in Jumbo:-
```
yarn
```
Alternatively, you can open the folder in the development Editor of your choice and run the above-written command in its terminal.
### Step 3 - Running the project on Local Server
After installing the dependencies, you can run the project on a local server by using the following command:-
```
yarn start
```
### Step 4 - Preparing the Build of the Project (Optional)
The Build is used for presenting the offline demo of the project or putting the project on a live server. So this step is not mandatory if you want to run the project on localhost or in development mode.
To prepare the build of the project, run the following command:-
```
yarn build
```
The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json.
The build folder is ready to be deployed. You may serve it with a static server:
yarn global add serve -s build
Find out more about deployment here:
# 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.
# Layouts
Jumbo React has lots of layouts that fulfill your requirements to develop amazing App.
Jumbo React provides the following layout designs:
1\. Vertical - Fixed Sidebar
This layout has vertical and fixed sidebar. The sidebar will always be fixed and visible in this layout.
2\. Vertical - Collapsed
This layout has vertical and collapsible sidebar. The sidebar can be shown or hidden on the click of the toggle button present in the left to the Logo in the header.
3\. Vertical - Mini
This layout has vertical and mini type sidebar. Mini type means that a part of sidebar will be visible. When you hover over the sidebar, it will be extended and will be fully visible.
4\. Horizontal - Inside
This layout has horizontal sidebar and is present in header itself.
5\. Horizontal - Top
This layout has horizontal sidebar and is present above the header.
6\. Horizontal - Below
This layout has horizontal sidebar and is present below the header.
# Template Setting
Jumbo React can be customized on the basis of many parameters like Layout, color combinations, language, RTL etc.
In order to customize the template, following files need to be used :-
* Customizer - `src/containers/Customizer`
This folder contains all the coding related to template setting. It contains the code of customizer bar that you see on the template, so all the options present in the customizer bar in the template are managed from this folder.
* Settings - `src/reducers/Settings.js`
This file contains the initial values of all the customizer options like layout style and type, template color, RTL, template mode etc. so if you need to set the default value of any customizer option, you can make the necessary changes in this file.
* constants - `src/constants`
This folder contains some constants related to values of setting parameters. In order to change the initial look and feel, you need to get the options of values, these options can be found in this folder.
In these files, you can see all the available options for the particular parameter and can make the required changes.
# Customizing Layout
Jumbo React comes with two layout types i.e. Vertical and Horizontal. These two layouts are further available in three variants each, so in a nutshell, Jumbo React is equipped with six layout types.
To customize the layout and set the layout of your choice, you can follow the steps in the associated chapters of this module.
# Vertical Layout
To set the vertical Layout, you need to go to:
`src/reducers/Settings.js`
In this file, you can look for "navigationStyle" property and set the value to "VERTICAL\_NAVIGATION".
After selecting the Vertical Layout, if you want to set the drawer type of your choice, then you need to go to:
`src/reducers/Settings.js`
In this file, you can look for "drawerType" property and set the value as per your choice.
The options for drawerType property are:-
* FIXED\_DRAWER - for Fixed Drawer
* COLLAPSED\_DRAWER - for Collapsed Drawer
* MINI\_DRAWER - for Mini Drawer
# Horizontal Layout
To set the Horizontal Layout, you need to go to:
`src/reducers/Settings.js`
In this file, you can look for "navigationStyle" property and set the value to "HORIZONTAL\_NAVIGATION".
After selecting the Horizontal Layout, if you want to set the Navigation bar of your choice, then you need to go to:
`src/reducers/Settings.js`
In this file, you can look for "horizontalNavigation" property and set the value as per your choice.
The options for horizontalNavigation property are:-
* INSIDE\_THE\_HEADER - for Inside Header Navigation Bar
* ABOVE\_THE\_HEADER - for Above Header Navigation Bar
* BELOW\_THE\_HEADER - for Below Header Navigation Bar
# Updating Color Scheme
**Setting Color from the defined Colors:**
Jumbo React comes with a lot of predefined color combinations. You can set the default color combination of your choice by following simple steps. To set the default color combination, you need to go to the following file :-
`src/reducers/Settings.js`
In this file, you can look for "themeColor" property and set its value as per your choice. List of available options can be found at :-
`src/constants/ThemeColors.js`
**Adding New Color:**
In order to add new color, you need to go to styles folder as it contains all the style and color related files. Style folder can be found at `src/styles/`
In the styles folder, you can find the folder `global/`. This global folder is the folder where we have defined all the Sass variables, mixins, placeholders etc. which are applied globally through the app.
Then, inside this `global/` folder, there is a file `_variables.scss`.
In this file you will find theme color variables as specified in below screenshot. And can change their values to the ones you want those to be.
So, that is all you need to do change the color theme. If you are willing to make any further customization about the theme, now you know where to change .
**Update Material UI theme color:**
go to the file `src/containers/themes/{themeName }.js`, change primary and secondary object's variable.
```
import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
export default {
palette: {
primary: {
light: indigo[300],
main: indigo[500],
dark: indigo[700],
},
secondary: {
light: pink[300],
main: pink['A200'],
dark: pink[700],
}
},
...
};
```
# Setting Template Mode
Jumbo React is available in Light, Semi-Dark and Dark version. By default Mode is set to Light version, but you can set the default version of your choice by following these simple steps.
To set the default Template Mode, go to following file:
`src/reducers/Settings.js`
#### Light and Semi-Dark Mode:
For Light or Semi-Dark, you can look for "themeColor" property and set its value. You can find the options for "themeColor" in the file with the path: `src/constants/ThemeColors.js`
These are the options for the "themeColor" property, to set the template mode as Semi-Dark, you need to set the value of themeColor from the options starting with word "DARK" and to set the template mode as Light, you need to set the value of themeColor from the options other than that of starting with word "DARK".
#### Dark Mode:
To set the template Mode to be Dark, you can look for "darkTheme" property and set its value to be true. It is a boolean type property so If you want to set the Dark version as the default version, you can set its value to true.
# RTL
Jumbo React comes with RTL feature. In order to enable RTL in default, you can follow these steps :
To enable the RTL, go to following file:
`src/reducers/Settings.js`
In this file, you can look for "isDirectionRTL" property and set its value as per your choice. It is a boolean type property so If you want to enable RTL in your app, you can set its value to true.
# Defining New Route
Defining a new route in Jumbo React is super easy. All you need to visit the following file :-
`src/app/routes/index.js`
This file contains the list of all the routes and their corresponding components. In order to define a new route, simply add the following piece of code at the position where you want your route to show up in the list of routes.
```
```
In the above line of code, "NewRoutePath" should be replaced with the route path and "YourComponent" should be replaced with the component name that you want to render.
# Adding New Language
In order to add a new language in the template, you need to follow below steps.
We are taking the Russian language as an example. So, here are the steps:
1. **Create a Locale**
This step can be completed by following below instructions:
* **Create a Local JSON File**
We need a locale data json file where we can keep all our labels, messages etc. language variables to set their translations for the specific language.
For this, create a file “ru\_RU.json” under the folder `src/lngProvider/locales/`
Now, you can copy the whole content of file `src/lngProvider/locales/en_US.json` (this contains all translation variables with value of English language strings) and paste that into our newly created ru\_RU.json file.
The above step will give us all the labels, messages etc variables and we can replace their values with the Russian translation.
For example, let’s change value of “pages.samplePage” : “Sample Page” to “pages.samplePage”: “Пример страницы”.
* **Create i18 Context**
Now, in this step, we are going to create an entry file `src/lngProvider/entry/` folder with the name “ru\_RU.js”.
This file is needed to import both the react-intl’s local data and our locale data json file and setup the i18 context.
2. **Add Locale to appLocales**
In this step, we will add our newly created i18 context in above step to the react-intl’s appLocales. This will be done in two further steps:
1. Open the file src/lngProvider/index.js and Import i18 context locale entry file into this.
2. Add imported i18 context variable to the appLocale Object. Check following source code for reference:
3. **Add an Option to Language Switcher**
For this, we need to access the data.js file which can be found under src/componenets/LanguageSwitcher/ folder.
Here in this file, we need to add following language object to the languageData array:
```
{
languageId: 'russian', // Unique ID for language
locale : 'ru', // locale name to link with the previously named locale
name : 'Russian', // Display name of the language
Icon : 'ru' // To choose the flag of the country
}
```
# Project Setup
Steps to setup the next.js version of project
### **Step 1 - Pick the Next.js Folder**
In order to setup the Next.js version of the project, pick the nextjs sub-folder from the Jumbo folder (the zipped folder you got after purchasing the Jumbo), copy it to the place where you want to keep the project, rename the folder.
### **Step 2 - Installing the Dependencies**
In step 2, Open the command prompt and reach out to the path where the folder is kept. Now, run the following command to install the dependencies and libraries used in Jumbo :-
```
yarn
```
Alternatively, you can open the folder in the development editor of your choice and run the above-written command in its terminal.
### Step 3 - Running the project on Local Server
After installing the Dependencies, you can run the project on local server by using the following command :-
```
yarn dev
```
### Step 4 - Preparing the Build of the Project (Optional)
Build is used for presenting the offline demo of the project or putting the project on live server. So this step is not mandatory, if you want to run the project on local host or in development mode.
To prepare the build of the project , run the following command:-
```
yarn build
```
# Folder Structure
This chapter gives the overview of folder structure and content in the next.js version of the Jumbo React.
1. app
1. 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.
2. core
This folder contains all the stateful files related to the structure of the template. It contains the files related to 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.
3. hoc
This folder contains HOCs which are used at different places.
2. 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.
3. pages
This folder is special folder of next.js. This folder must be present in all the next.js based projects. The file names in this folder are the url paths and the content in the file is the content that renders on that path.
For example, you are running the project on the base path : -
[www.xyz.example](http://www.xyz.example).
Now, if there is a file name "signin" in the pages folder, then you can access the path - [www.xyz.example/signin](http://www.xyz.example/signin) and the content that will load on this path will be the code that is written in the signin file.
4. redux, constants
As the name suggests, 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.
5. routes
All the code related to the content of the template lies in this folder. This is the folder where we define the corresponding components as per the paths declared in the pages folder.
6. static
It contains the images, media and other raw material used in the template.
7. 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.
8. utils
This folder contains files that contain global helper functions.
9. package.json
This file contains the information of dependencies installed in the template. Information includes the name and version of the dependency.