https://github.com/levos-snr/react-tutorial-30-july-2024

Learning react from scratch
https://github.com/levos-snr/react-tutorial-30-july-2024

Last synced: 4 days ago
JSON representation

Learning react from scratch

• Host: GitHub
• URL: https://github.com/levos-snr/react-tutorial-30-july-2024
• Owner: levos-snr
• License: mit
• Created: 2024-07-30T08:15:00.000Z (4 months ago)
• Default Branch: react/starter
• Last Pushed: 2024-08-02T11:15:46.000Z (4 months ago)
• Last Synced: 2024-08-03T03:02:09.285Z (4 months ago)
• Language: JavaScript
• Homepage: https://react-tutorial-30-july-2024.vercel.app
• Size: 424 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh

- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Why React project structure

- Project structure shows the organization of code and files, and a clean, simple,

  and decent project structure shows a clean written code, which helps to debug code,

  and another developer can easily read it.

- While deploying code on the server, it can recognize files easily, which is why

  developers are implementing clean, simple, and decent project structures.

## Best Practices for React Project Structure

- It is best practice to create a project structure

  for the React application, separate files according

  to their work, and separate them in the correct directories.

  For example, single components which can be used multiple places

  should be present in the components folder, and also standardize the

  naming conventions of the application so that it will be easy to verify

  the logic and presence of any particular file or folder.

- **Group by features or routes**:

  Grouping by features or routes is the most common

  way to structure a React project. This structure

  is easy to navigate and understand.

- **Group by file type**:

  Grouping by file type is another way to structure a

  React project.

- **Group by layer**:

  Grouping by layer is another way to structure a React project.

  This structure is easy to navigate and understand.

## Conclusion

- Creating a well-organized folder structure is important for maintaining

  a React project. It increases readability, maintainability, and

  scalability of the application. By adopting a well structure, it will

  be easy to manage code.