Udon - Component Structure

File structure

udon-JS/
├── public
├── src
|   ├── assets/
|   |   ├── css/
|   |   ├── iconfonts/
|   |   ├── images/	
|   |   ├── scss/
|   |   └── video/
|   ├── pages/
|   |   ├── common/
|   |   |   ├── arreydata/
|   |   |   ├── firebase/
|   |   |   ├── redux/	
|   |   |   ├── reusedcomponent/
|   |   |   └── Switcherdata.jsx
|   |   ├── layout/
|   |   |   ├── layoutpages/
|   |   |   ├── App.jsx
|   |   |   ├── Authenticationlayout.jsx
|   |   |   ├── CustomerDBLayout.jsx	
|   |   |   ├── Firebaselayout.jsx
|   |   |   └── Landingpagelayout.jsx
|   |   └── maincomponent
|   ├── index.scss
|   ├── main.jsx
|   └── Scrolltotop.jsx
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config
Folders Description
  • Udon – Javascript React Bootstrap Premium Admin Dashboard Template / : Root template folder contain all react component(Structure page), css, scss, images and react components.
    • public/ : Vite has built-in support for serving static assets living in the public/ directory. For example, if we save a file in public/abc.txt , then it will be served us as-is at https://domain.com/abc.txt .
    • src/ : this file contains all the source file in the template.
      • assets/: A folder where you can put images, css, json data anything else to be copied wholesale when you build your application..
      • pages/ : this Folder contains the layout, all the .jsx react components of the template.
      • App.jsx : Defines AppModule, the root module that tells vite-react how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare.
      • main.jsx : Routing basically means navigating between pages. You have seen many sites with links that direct you to a new page. This can be achieved using routing.
      • index.html : The main page that is served when someone visits your site. Most of the time you'll never need to edit it. The CLI automatically adds all tsx and css files when building your app so you never need to add any <script> or <link> tags here manually.
      • package.json : npm configuration listing the third party packages your project uses.
      • vite.config.js : the file vite.config.js is the stands for configuration management tools. and we mostly use for to configure the root routing path