What is the Mendix React Client?

The Mendix React Client is the new front-end framework built on React, a widely used JavaScript library. React helps create faster, more dynamic, and more maintainable web applications. By using a component-based structure, React makes it easier to build, reuse, and manage user interfaces.

With this upgrade, Mendix applications will run more efficiently and offer a better user experience. React also works well with modern tools like Webpack, Babel, and ES modules, allowing for more flexibility and customization.

Why Upgrade to the React Client?

Here are the key reasons to switch to the Mendix React Client:

  • Better Performance-React uses a Virtual DOM, which makes page updates faster and smoother.

  • Easier UI Development - A modular component system helps developers reuse UI elements, making applications more maintainable.p>

  • Improved State Management - Tools like React Context API and Redux make handling data and interactions simpler.

  • Modern Web Technologies - React allows integration with popular frameworks and libraries like Material-UI, Tailwind CSS, and React Query.

  • Security and Long-Term Support - React is updated regularly, ensuring better security and compliance with modern web standards.

  • Deprecation of Dojo - Mendix is phasing out Dojo in future versions, so React will become the default UI framework.

Integrating Docmosis with Mendix

What You Need Before Upgrading

Before switching to the React Client, check if your application meets these requirements:

  • Mendix Version - The React Client was introduced in Mendix 10.7.0 (beta) and became stable in Mendix 10.18.0. Ensure your project is on the latest version.

  • Compatible Widgets - Only Pluggable Widgets are supported. Your widgets should be built using pluggable-widgets-tools v9.4.1 or higher.

  • JavaScript Actions -Avoid old APIs like dojo, dijit, mx.modulePath, and mx.ui.openForm. Use React-based navigation and nanoflows instead.

  • Atlas UI Compatibility - Upgrade to the latest Atlas UI to ensure proper styling and layout.

Integrating Docmosis with Mendix

Resources to Help with the Upgrade

Mendix provides several resources to assist with the migration:

  • Mendix Documentation - Step-by-step migration guides.

  • Mendix Academy - Online courses covering React-based Mendix development.

  • Community Forums & GitHub - Get help from experienced developers.

  • Mendix Marketplace - Download React-based widgets for faster development.

Steps to Upgrade

Follow these steps to transition your application to the Mendix React Client:

1. Check Your Application Compatibility

  • Identify Dojo-based widgets, custom JavaScript actions, and third-party dependencies that need updatin

  • Check UI styling to ensure it works well with React's rendering system.

2. Convert Widgets to Pluggable Widgets

  • If you have custom Dojo widgets, rebuild them as Pluggable Widgets.

  • Use the Pluggable Widget API to make them work with React.

  • Prefer TypeScript for better maintainability and debugging.

3. Update Styling & Theming

  • Convert CSS styles to SCSS or Tailwind CSS for easier styling.

  • Use Flexbox and CSS Grid to create responsive layouts.

  • Make sure the Atlas UI framework is updated to work smoothly with React.

4. Optimize State Management

  • Use React Context API or Redux Toolkit to handle app data efficiently.

  • Implement React Query or SWR for better API calls and data handling.

5. Replace Old Widgets with New React-Compatible Ones

  • Dynamic & Static Image Widgets → Use the universal Image Widget.

  • Reference Selector & Drop-down Widgets → Replace with Combo Box.

  • Data Grid → Upgrade to Data Grid 2 from Mendix Marketplace.

  • Template Grid → Replace with the Gallery Widget for better responsiveness.

6. Test UI and Performance

  • Use React Profiler to find slow components and improve rendering.

  • Run unit tests with Jest and React Testing Library.

  • Perform end-to-end tests using Cypress or Playwright.

7. Deploy & Monitor the Application

  • Set up a CI/CD pipeline to automate testing and deployments.

  • Use tools like Lighthouse and Mendix APM to monitor app performance.

Integrating Docmosis with Mendix

Mendix Version Support & Timeline

Mendix has planned a gradual transition to React:

  • Mendix 9.x – React Client introduced in beta, Dojo still supported.

  • Mendix 10.x – React becomes the default UI framework, Dojo begins deprecation.

  • Future Versions – Complete removal of Dojo, making React the only option.

Conclusion

Upgrading to the Mendix React Client is a <>necessary step to ensure better performance, security, and long-term support. By following best practices and using the latest Mendix tools, developers can create faster, more modern, and maintainable applications.

Ready to upgrade? Start by reading the Mendix Documentation and begin your transition today!