File structure that you can follow for your next webapp using React: ( I personally follow this )
📁 src
├── 📄 App.tsx
├── 📁 react-router
├── 📄 AppRoutes.tsx
├── 📄 RootLayout.tsx
├── 📁 assets
├── 📄 image.png
├── 📁 components
├── 📁 button
├── 📄 Button.tsx
├── 📄 button.css
├── 📁 hooks
├── 📁 use-hook
├── 📄 useHook.ts
├── 📁 pages
├── 📁 home
├── 📄 Home.tsx
├── 📄 ProjectCard.tsx
├── 📄 home.css
├── 📁 redux
├── 📁 slices
├── 📄 store.ts
├── 📁 utils
├── validations.ts
Name Cases:
- PascalCase for Components
- kebab-case for folders
- camelCase for any files except React components
redux & react-router - Create folders for specific libraries and anything related to it goes there.
components - Only the components that are used globally in the app goes here ( e.g. Navbar, Sidebar, Button).
pages - All pages will be here.
In both pages & components, put each big components/pages into its own folder like home or card so you could break the component into chunks inside the folder if you need to.
css & test files will also be inside that folder.
hooks - Only the hooks that are used globally in the app goes here.
utils - All functions that you are using globally goes here.