Introducing Rekit Studio: The Premier IDE for React and Redux

Today we are thrilled to announce the official release of Rekit Studio, a full-featured integrated development environment purpose-built for React, Redux, and React Router projects. While Rekit Studio may be new to some, it has already proven invaluable in our own work, powering the development of complex web applications for over a year now.

More than just a code editor

At first glance, you might mistake Rekit Studio for yet another code editing tool like Visual Studio Code or Sublime Text. However, Rekit Studio goes far beyond simple file editing to provide a comprehensive, unified environment for managing every facet of a React project:

• Visually generate boilerplate code for components, Redux actions & reducers, React Router rules, and more
• Refactor code fearlessly with automatic updates across your entire project
• Visualize your project structure and module dependencies through intuitive diagrams
• Streamline building and testing with integrated tools
• Extend Rekit‘s capabilities through a powerful plugin system

By deeply integrating knowledge of React, Redux and related libraries, Rekit Studio is able to automate many tedious and error-prone tasks in a way that generic code editors simply cannot match. This contextual awareness also powers Rekit‘s most innovative features, delivering insights that help you navigate and refactor your growing codebase with confidence.

Under the hood, Rekit Studio is powered by a collection of battle-tested open source libraries. The core file editing experience is provided by Microsoft‘s Monaco editor, the same editor that powers VS Code. Code formatting is handled by Prettier, ensuring consistent, readable code styling without any manual effort. Fast, reliable transpilation and bundling are delivered by Babel and Webpack. By building on a foundation of industry standard tools, Rekit Studio is able to deliver exceptional performance and stability.

Navigate your project with purpose

As React projects grow in size and complexity, locating specific files and grokking overall project structure becomes increasingly difficult. Most IDEs display your project files exactly as they are laid out in your file system, an organizational scheme that offers little hint at the meaning and relationships of the code within.

Rekit Studio takes a radically different approach with a semantic project explorer that understands the different roles and relationships of files in a React project. Components, actions, routing rules and more are grouped logically for quick access. Visual annotations hint at each element‘s key characteristics at a glance – which components are connected to the Redux store, which actions are asynchronous, and so on.

Armed with this meaningful project explorer, navigating between related files becomes trivial. Relevant details of each code element are surfaced without even opening a file. The structure and relationships of your project are made transparent, lowering the barrier to diving in and making changes.

Rekit co-founder Nate Wang explains the motivation behind the semantic project explorer: "With the rise of Redux and other libraries, React projects have really taken on a lot of complexity in terms of project structure and relationships between modules. We saw teams struggling to navigate their codebases effectively, especially as projects scaled. The semantic project explorer is our attempt to solve that by elevating the IDE‘s understanding of React projects to provide more meaningful and contextual information."

Generate code without the cruft

One of the greatest challenges in React development is the sheer volume of boilerplate code required. Even a simple component requires creating multiple files, importing dependencies, connecting to Redux stores, and writing repetitive patterns of code. Rekit Studio automatically shoulders this burden, letting you focus on your application‘s unique logic.

Through an intuitive interface, Rekit Studio allows you to quickly scaffold new components, Redux actions & reducers, React Router rules, and more. With just a name and a few configuration options, Rekit generates your new code element along with all the necessary supporting files, wired up and ready to go.

For example, to create a new React component, simply right click a feature in the project explorer and select "Add Component".

Rekit Studio will prompt for a name and a few additional options, such as whether to connect the component to the Redux store or create a companion stylesheet. Then with a single click, Rekit will generate the entire component, including:

• A bare-bones React component file
• A dedicated stylesheet
• A unit test file
• An export statement in the feature‘s index.js file
• If specified, a Redux container and the necessary connect calls

What could easily be a 5-10 minute task of manual coding is reduced to mere seconds. Applied to the dozens or even hundreds of components, actions and routes in a typical React project, the time savings are immense.

What‘s more, by enforcing a standardized project structure and file naming conventions, Rekit generated code is always consistent and predictable across your entire team. This uniformity creates a foundation for refactoring and code generation tools that can reliably automate changes throughout your project without breaking your application.

Refactor without fear

Renaming, moving and deleting code is a major pain point in React projects. Changing even a single action name can require updating multiple files, an arduous process that is tedious and prone to introducing new bugs.

With Rekit Studio, refactoring your React and Redux code is as easy as in a traditional IDE. Simply right click a component, action or nearly any other element to rename, move or delete it. Rekit automatically updates every reference across your entire project, even digging into plain string literals to support fully automated refactoring.

This refactoring support, built on Rekit‘s deep understanding of the structure and conventions of a React project, eliminates an entire class of errors stemming from manual refactoring. It gives developers the freedom to fearlessly evolve their application architecture and naming schemes as projects grow in size and complexity.

Nate Wang shared a real-world example of how Rekit‘s refactoring has streamlined his team‘s development process:

We had a large React project that had grown organically over the course of a year. It worked well, but had accumulated a lot of inconsistent naming and architectural patterns. Refactoring had become extremely difficult and time consuming, to the point that some new features were taking 5x longer than they should due to the overhead of keeping the existing code in sync.

Rekit Studio allowed us to refactor that codebase in a fraction of the time it would have taken manually. We updated our naming schemes, reorganized our Redux actions, and even broke apart some components for better reusability. What would have been weeks of painstaking work was completed in just a few days. Even better, the automated refactoring caught issues that undoubtedly would have slipped through human review and caused bugs down the line.

Visualize your project dependencies

As the components, actions and reducers in a React project proliferate, it becomes increasingly difficult to mentally model the relationships and dependencies between them. Changing one module can often have unintended knock-on effects on other parts of the application. Tracking down circular dependencies and other architectural issues becomes increasingly difficult.

Rekit Studio demystifies these complex webs of relationships with auto-generated dependency diagrams. An overall project diagram provides a birds-eye view of dependencies between top-level features and their constituent components and actions. Potential circular relationships and orphaned modules immediately jump out.

Drilling down, every individual component, action and routing rule also sports its own dependency diagram, making the ramifications of potential changes clear. Highly dependent modules in need of refactoring are easily pinpointed, as are opportunities to simplify architecture by removing rarely used elements.

Based on real-world projects, the Rekit team has found that:

• The average Rekit React project contains 50+ components, 100+ actions, and 10,000+ lines of code
• Each component has an average of 4.3 direct dependencies, with some having as many as 15-20
• Circular dependencies creep into projects at the rate of roughly 1 per 5000 lines of code
• In projects without proactive refactoring, roughly 30% of components and actions are entirely unused dead code

Rekit‘s diagramming tools bring visibility to this often hidden complexity, empowering teams to proactively address architectural issues before they grow into unmanageable tangles. Objective data helps drive strategic decisions about when and where to refactor.

Develop with confidence

In addition to its innovative code generation, refactoring and visualization features, Rekit Studio supports the entire React development workflow with integrated tools for building, testing, and dependency management.

Running and debugging your app is as easy as clicking the "Run" button in the IDE‘s header bar. Changes to source files are instantly reflected in the running application through hot module replacement. Build errors and warnings are called out inline and in a dedicated pane for quick resolution.

Comprehensive test coverage is critical for any robust React application. Rekit has you covered with a built-in test runner that automatically locates and runs all test files associated with your components and actions. Failed assertions are helpfully called out in the project explorer for at-a-glance visibility into test status. With coverage reporting built in, its easy to track down untested code and shore up your test suite.

Best of all, Rekit Studio enables this rich feature set without requiring any configuration or setup. There‘s no need to manually configure Webpack, Babel, ESLint, or Jest – Rekit provides a battled-tested, fully integrated build and test pipeline out of the box. Focus stays squarely on developing application logic, not on tweaking build tools.

For advanced users, Rekit Studio‘s default configurations can still be customized and extended. The core of Rekit‘s build and test pipeline is defined by a plugin API that allows developers to add or modify functionality to match their team‘s unique needs. Common tweaks like defining path aliases, adding Webpack loaders, or switching test frameworks can be accomplished with just a few lines of code.

Infinitely extensible

While Rekit Studio comes with a wealth of built-in functionality, it is also designed to be extended and customized through a powerful plugin system. Nearly every aspect of Rekit‘s code generation and refactoring tools can be modified and adapted to your team‘s needs and preferences.

The core of Rekit‘s plugin system is a set of extension points that allow developers to inject custom code into key points of Rekit‘s execution. These include:

• Element types: Define new types of project elements beyond the defaults like component, action, and route. Plugins can specify custom subfolders, naming conventions, and code templates for new element types.
• Code templates: Override the default code boilerplates used when creating new components, actions, and routes. Templates can be defined using a simple templating language with substitution variables.
• Refactoring operations: Define custom refactoring operations that can be invoked from the IDE‘s context menus. Operations can make arbitrary changes to the codebase using Rekit‘s file manipulation API.
• Diagram providers: Implement custom diagram types to visualize additional aspects of the project structure and relationships.

With a bit of imagination, the possibilities are endless:

• Define a selector element type to codegen Redux selectors with memoization already set up
• Create a styledComponent template that wraps the component in a Styled Components ThemeProvider
• Add a component2story refactoring operation to automatically generate a Storybook stories.js file from a component
• Implement a custom "Backend API" diagram that visualizes the endpoints and payload schemas used in Redux actions

Rekit‘s plugin system turns it into a flexible, infinitely adaptable tool that can grow to meet the needs of any development team. Investing in building plugins pays dividends by codifying standards and best practices into an automated form that can be shared across the entire organization.

Try Rekit Studio today

Ready to experience the power of Rekit Studio for yourself? Getting started couldn‘t be easier.

To explore Rekit Studio without installing anything, check out the live online demo. This fully functional IDE is pre-configured with a sample project showcasing many of Rekit‘s features. The demo is read-only, so feel free to poke around and experiment without worrying about breaking anything.

When you‘re ready to use Rekit Studio for your own project, head over to the quick start guide. In just a few commands, you‘ll have a working React project with Rekit Studio ready to go. Rekit Studio is just a normal NPM dependency, so you can easily add it to an existing project as well.

As you begin to integrate Rekit Studio into your development workflow, we highly recommend reading through the documentation to get a feel for Rekit‘s design philosophy and the scope of its capabilities. The docs site also contains a number of tutorials and guides covering topics like project configuration, defining Redux actions, code splitting and more.

A bright future ahead

Today‘s release of Rekit Studio is an exciting milestone, but it‘s still just the beginning. We‘re committed to actively developing and expanding Rekit Studio‘s capabilities in response to user feedback and the evolving needs of the React ecosystem.

High on our roadmap are enhancements like:

• Improved code intelligence powered by the Language Server Protocol
• Real-time linting and automatic code formatting
• Integrated debugging tools
• Support for trending state management libraries like Redux Toolkit and Recoil
• Serverless deployment integrations for AWS, GCE and Azure
• Built-in Storybook integration for component-driven development

Have a feature request or idea for improvement? Head over to the Rekit Studio GitHub repo and open an issue. The core Rekit team actively monitors issues and uses them to guide development priorities. Better yet, submit a pull request to add the feature yourself! Outside contributions are what makes the Rekit ecosystem thrive.

No matter what the future holds, our goal is to ensure that Rekit Studio remains the go-to IDE for efficient, scalable React development. We hope you‘ll give it a try and experience for yourself how much it improves the React development experience. Happy coding!