From b1f449c78e18ae0fc948d4fe11d53c0a0e261008 Mon Sep 17 00:00:00 2001
From: Pavol-Szegheo-MSc <PavolSzegheo@GMail.com>
Date: Sun, 11 May 2025 02:18:45 -0400
Subject: [PATCH] Update folder-structure.md

Updated the page to reflect Vite assisted creation
---
 docusaurus/docs/folder-structure.md | 56 ++++++++++++++++++++---------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/docusaurus/docs/folder-structure.md b/docusaurus/docs/folder-structure.md
index f135b635164..2d8b9420391 100644
--- a/docusaurus/docs/folder-structure.md
+++ b/docusaurus/docs/folder-structure.md
@@ -6,33 +6,57 @@ title: Folder Structure
 After creation, your project should look like this:
 
 ```
-my-app/
-  README.md
+MY-APP/
   node_modules/
-  package.json
   public/
-    index.html
-    favicon.ico
+    vite.svg
   src/
+    assets/
+      react.svg
     App.css
-    App.js
-    App.test.js
+    App.jsx
     index.css
-    index.js
-    logo.svg
+    main.jsx
+  .gitignore
+  eslint.config.js
+  index.html
+  package-lock.json
+  package.json
+  README.md
+  vite.config.js
 ```
 
-For the project to build, **these files must exist with exact filenames**:
+In a default React project created using npm create vite@latest my-app -- --template react, the minimal set of files required for the project to build and run the basic React application structure are:
+
+index.html (in the project root):
+
+Required. This is the main entry point for both the development server and the production build. Vite uses this HTML file to load your application's JavaScript bundle.
+It contains the basic HTML structure and, crucially, a <script type="module" src="/src/main.jsx"> (or .tsx for TypeScript) tag that points to your JavaScript/React entry file.
+You cannot delete this file. You can modify its content (add meta tags, change title, etc.), but the structure including the script tag is essential.
+src/main.jsx (or src/main.tsx):
+
+Required. This is the JavaScript/TypeScript entry file where your React application is bootstrapped.
+It's typically responsible for importing the main App component (or whatever your root component is) and using ReactDOM.createRoot (or ReactDOM.render for older React versions) to render that component into a specific DOM element in your index.html (usually an element with id="root").
+You cannot delete this file, but you can rename it. If you rename it, you must update the src attribute of the <script> tag in your index.html file to point to the new file path.
+What about src/App.jsx and other files?
 
-- `public/index.html` is the page template;
-- `src/index.js` is the JavaScript entry point.
+src/App.jsx (or src/App.tsx):
 
-You can delete or rename the other files.
+Required by the default template, but not strictly required by Vite or React as long as some root component is rendered by main.jsx.
+In the default setup, main.jsx imports and renders App.jsx. So, for the template to work out-of-the-box, App.jsx (or the file providing the component imported in main.jsx) is necessary.   
+You can delete or rename App.jsx, but if you do, you must provide your own root component file and update the import path in src/main.jsx accordingly.
+src/index.css, src/App.css, src/assets/ directory, etc.:
 
-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.
+These are not required for the basic React/Vite build process itself. They are part of the default template's styling and assets.
+You can delete or rename these files and the assets directory.   
+Important: If you delete them, make sure you also remove any corresponding import statements in your .jsx/.tsx files (like import './index.css' in main.jsx or import './App.css' in App.jsx), otherwise your build might fail due to missing modules.
+In summary:
 
-Only files inside `public` can be used from `public/index.html`. Read instructions below for using assets from JavaScript and HTML.
+index.html is the absolutely essential entry point.
+src/main.jsx (or .tsx) is the essential JavaScript/React bootstrapping file linked by index.html.
+src/App.jsx (or .tsx) is required for the default template to function, but can be replaced by your own root component if you update the import in main.jsx.
+Other files like CSS and assets are part of the default content and can be removed as long as you clean up the imports.
 
-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.
+Sources and related content
 
 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.