
Research
/Security News
Toptal’s GitHub Organization Hijacked: 10 Malicious Packages Published
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
react-mvvm-architecture
Advanced tools
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) and Clean Architecture. It
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.
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.
App.tsx
file with React Query setup to handle data fetching seamlessly.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
React MVVM Architecture leverages React Query and Zustand for several reasons:
Simplicity: React Query and Zustand offer simplicity, reducing the boilerplate code required in traditional state management libraries like Redux.
Performance: React Query optimizes data fetching with automatic cache management and background data synchronization, resulting in faster and more efficient data updates.
TypeScript Support: Both React Query and Zustand provide excellent TypeScript support, making it easier to work with typed data in large-scale applications.
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.
Minimal Boilerplate: React Query and Zustand eliminate the need for complex setup and boilerplate code often associated with Redux.
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.
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.
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 iam.aamirmansuri@gmail.com with any feedback or suggestions.
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!
FAQs
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) and Clean Architecture. It
The npm package react-mvvm-architecture receives a total of 89 weekly downloads. As such, react-mvvm-architecture popularity was classified as not popular.
We found that react-mvvm-architecture demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.