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.
The built output. Run command
Folder contains the index.html file so you can tweak it, Change
|/src||Your app lives in the src folder. All React components, styles and anything else your app needs go here.|
|/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/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/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.scss||Styles entry point.|
|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.htmlis the page template;
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
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
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.