react-mvvm-architecture

React MVVM Architecture (Beta)

React MVVM Architecture is a simple and opinionated custom React framework that provides a solid foundation for building modern, efficient, and scalable React applications following the principles of MVVM (Model-View-ViewModel). It aims to simplify the setup process and offers a well-organized project structure to help developers get started quickly.

Getting Started

To use React MVVM Architecture, you can create a new React app by running the following command:

npx react-mvvm-app my-new-app

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

After running the command, your new React app will be created 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.
• Provides a structured project organization for better code maintainability and scalability, following the MVVM principles.
• 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 makes use of React Query and Zustand instead of Redux Toolkit for several reasons:

• Simplicity: Both React Query and Zustand are designed to be simple and easy to use, reducing the boilerplate code required in traditional state management libraries like Redux.

• Performance: React Query optimizes data fetching by automatically managing cache and background data synchronization, resulting in faster and more efficient data updates.

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

• Separation of Concerns: Zustand follows a store pattern where the store and state logic are contained within the same component, providing a clearer separation of concerns and a more concise codebase.

• Minimal Boilerplate: React Query and Zustand eliminate the need for complex setup and boilerplate code that is 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. Feel free to 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 is suitable for projects of various sizes, from small prototypes to large-scale production applications. The clean and scalable project structure, combined with the power of React Query and Zustand, ensures that your application can grow and adapt as your project requirements evolve.

Under Development

Please note that React MVVM Architecture is currently under development. While it provides a solid foundation for building React applications, there might be ongoing updates and improvements to the framework. We welcome your feedback and contributions to make this framework even better.

About the Author

My name is Aamir Mansuri, and I am a React JS Developer passionate about building efficient and maintainable web applications. 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!