Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

### Overview

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.

Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

##### Files Structure

Path | Description
--- | ---
/build | The built output. Run command `yarn build` to build it.
/node_modules | The `package.json` file in the app root defines what libraries will be installed into `node_modules/` when you run `yarn install`.
/public | Folder contains the index.html file so you can tweak it, Change `<title>`, insert additional `<link>` and `<script>` tags. For more details check official documentation. Also in '/public/media' folder you able to find all images/icons/SVGs and `Splash Screen` styles.
/src | Your app lives in the src folder. All React components, styles and anything else your app needs go here.
/src/_metronic
/src/_metronic/_assets | Contains the Metronic common parts: js(Layout js helpers), plugins(icons plugins), sass(common style structure).
/src/_metronic/_helpers | Contains shared utils which are used by all application modules.
/src/_metronic/_partials | Contains shared components which are used by all application modules.
/src/_metronic/i18n | Contains `react-intl` implementations.
/src/_metronic/layout
/src/_metronic/layout/_core | Contains Layout core logic which is based on React.Context. Also includes Material-UI overriding and layout configuration file(LayoutConfig.js).
/src/_metronic/layout/layout | Contains Layout components(Layout, Header, Aside, Footer...).
/src/app
/src/app/modules | Contains application lazy modules (Authorization, eCommerce, Errors examples...)
/src/app/pages | Contains application pages (Dashboard page, Builder page...)
/src/app/App.js | is the application entry point.
/src/app/BasePage.js | Private routes entry point.
/src/app/Routes.js | Application routing is based on React Routing.
/src/app/redux | Contains redux setup(rootReducer, store), axios setup and mock adapter setup. |
/src/index.js | The JavaScript entry point.
/src/index.scss | Styles entry point.
serve.json | `serve.json` is used by `serve-handler` running by command `yarn serve`.
package.json | A package.json file contains meta data about app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install.

For the project to build, these files must exist with exact filenames:

- `public/index.html` is the page template;
- `src/index.js` is the JavaScript entry point.

You can delete or rename the other files.

You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by webpack. You need to put any JS and CSS files inside `src`, otherwise webpack won’t see them.

Only files inside `public` can be used from `public/index.html`.

You can, however, create more top-level directories. They will not be included in the production build so you can 'use' them for things like documentation.

If you have Git installed and your project is not part of a larger repository, then a new repository will be initialized resulting in an additional top-level `.git` directory.

Our Metronic React application is based on Create React App. For more detailed information of the CRA, visit the official Create React App documentation website.