React MVVM Architecture (Beta)

React MVVM Architecture is a custom React framework designed to simplify the development of modern, efficient, and scalable React applications using the MVVM (Model-View-ViewModel) architectural pattern. It provides a solid foundation and a well-organized project structure to help developers get started quickly.

Getting Started

To create a new React app using React MVVM Architecture, run the following command:

npx react-mvvm-architecture my-new-app

Replace my-new-app with the desired name for your project.

After running the command, your new React app will be set up with TypeScript support, Zustand, and React Query installed. The App.tsx file will be customized to include the setup for React Query.

Features

• Bootstrap new React projects with TypeScript support and pre-installed packages like Zustand and React Query.
• Follows the principles of MVVM for better code maintainability and scalability.
• Customized App.tsx file with React Query setup to handle data fetching seamlessly.

Project Structure

react-mvvm-architecture
├── node_modules/      <-- Contains installed npm packages
│   └── ...
├── public/            <-- Public assets for the React app
│   ├── index.html
│   ├── favicon.ico
│   └── ...
├── src/               <-- Source code for the React app
│   ├── models/        <-- Models for data representation
│   │   └── Todo.ts    <-- Example model (Todo)
│   ├── view/          <-- React components for rendering UI
│   │   ├── components/
│   │   │   └── TodoItem.tsx
│   │   ├── TodoList.tsx
|   |
│   ├── viewmodels/    <-- ViewModels to manage view logic and state
│   │   ├── TodoViewModel.ts
│   │   └── index.ts   <-- Entry point to export viewmodels
│   ├── services/      <-- Services for data handling and API calls
│   │   └── TodoService.ts
│   ├── App.css
│   ├── App.tsx        <-- Customized entry point for the React app
│   ├── index.css
│   └── index.tsx      <-- Main entry point for rendering the app
├── package.json       <-- Project configuration and dependencies
└── README.md          <-- Documentation for the React MVVM Architecture

Why React Query and Zustand?

React MVVM Architecture leverages React Query and Zustand for several reasons:

1. Simplicity: React Query and Zustand offer simplicity, reducing the boilerplate code required in traditional state management libraries like Redux.

2. Performance: React Query optimizes data fetching with automatic cache management and background data synchronization, resulting in faster and more efficient data updates.

3. TypeScript Support: Both React Query and Zustand provide excellent TypeScript support, making it easier to work with typed data in large-scale applications.

4. Separation of Concerns: Zustand follows a store pattern, keeping store and state logic within the same component, leading to clearer separation of concerns and a more concise codebase.

5. Minimal Boilerplate: React Query and Zustand eliminate the need for complex setup and boilerplate code often associated with Redux.

Customization and Contribution

React MVVM Architecture is designed to be customizable and extensible. While it comes with pre-installed packages like React Query and Zustand, you can add additional packages as per your development needs. Modify the generated project structure, add new features, or integrate other libraries to tailor the framework to your specific project requirements.

Suitable for Small to Large Scale Applications

React MVVM Architecture suits projects of various sizes, from small prototypes to large-scale production applications. Its clean and scalable project structure, combined with the power of React Query and Zustand, ensures your application can grow and adapt as your project requirements evolve.

Under Development

Please note that React MVVM Architecture is currently under development. It has not been uploaded to GitHub yet. Once I accomplish my goal of creating this package to my satisfaction, it will be made available on GitHub. I welcome your feedback and suggestions! Feel free to reach out to me at [email protected] with any feedback or suggestions.

About the Author

My name is Aamir Mansuri, and I am a passionate React JS Developer. This custom React framework, inspired by the MVVM principles, is my contribution to the developer community, and I hope it helps you kickstart your React projects with ease and productivity.

Happy coding!