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.htmlis the page template;src/index.jsis 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.