Supercharge Your React Development with Rekit Studio

As a React developer, you‘re likely always on the lookout for tools to boost your productivity and streamline your workflow. One such tool that‘s been gaining traction lately is Rekit Studio, a complete IDE for React and Redux development. In this in-depth guide, we‘ll walk through how to integrate Rekit Studio into an existing React project so you can start reaping its benefits in your day-to-day development.

Why Rekit Studio?

Before we dive into the nitty-gritty of integrating Rekit Studio, let‘s briefly touch on what makes it so compelling:

• Intuitive tools for common tasks: Rekit provides GUI tools and CLI commands for creating components, actions, reducers, routes, and more, adhering to a consistent project structure.
• Diagram-based architecture overview: Rekit generates interactive diagrams to visualize your project‘s architecture, making it easy to navigate between source files and understand the relationships between components.
• Powerful refactoring: Rekit understands the structure of your React/Redux code and can intelligently handle refactoring tasks like renaming components, moving files, and updating imports.
• Seamless routing: With Rekit‘s routing conventions, you can manage your routes in a centralized way and easily associate URLs with components.

These features can be incredibly helpful in keeping your codebase organized and maintainable as your React project grows in size and complexity. And the great news is, you don‘t have to start from scratch to take advantage of them!

Prerequisites

To use Rekit Studio with an existing project, your project should meet the following prerequisites:

• Built with React 16.8.0 or later
• Uses Redux for state management
• Uses ES6 modules

Don‘t worry if your project doesn‘t tick all these boxes – later on, we‘ll cover some tips for gradually migrating your code to align with Rekit‘s conventions.

Step 1: Install Dependencies

The first step is to install the necessary dependencies. Run the following command in your project‘s root directory:

npm install rekit-core rekit-studio --save-dev

This will install both rekit-core, the underlying library that powers Rekit‘s functionality, and rekit-studio, the web-based IDE.

Step 2: Set Up Folder Structure

Next, we need to set up the folder structure that Rekit expects. The easiest way to do this is to copy over the relevant files and folders from a newly-created Rekit project.

Run the following commands to create a new Rekit project and copy its structure:

npx create-rekit-app temp-app
cp -r temp-app/src/ your-project/src/
cp -r temp-app/tools/ your-project/tools/
rm -rf temp-app

This will copy over the src/ and tools/ folders from the temporary Rekit project into your existing project. If you already have src/ and tools/ folders, you can manually merge the contents.

Step 3: Start Rekit Studio

With the dependencies installed and folder structure in place, we‘re ready to fire up Rekit Studio! Add the following NPM script to your package.json:

"scripts": {
  "rekit": "node tools/start-studio.js",
  ...
}

Then run:

npm run rekit

This will start the Rekit Studio server. Open your browser and navigate to http://localhost:6250 to access the web-based IDE.

Step 4: Create a New Component

Now that we have Rekit Studio up and running, let‘s create a new component to get a feel for the workflow. Click the "New Component" button in the IDE and enter a name for your component, e.g. "MyNewComponent".

Rekit Studio will generate the necessary files for the component, including:

• `src/features/my-new-component/MyNewComponent.js`
• `src/features/my-new-component/MyNewComponent.less`
• `src/features/my-new-component/MyNewComponent.test.js`

It will also automatically update the necessary imports and routes. Pretty nifty! You can now navigate to the generated files in the Rekit Studio file tree and start implementing your component.

Step 5: Integrate Existing Code

At this point, you‘ve seen how to create new components using Rekit Studio‘s conventions. But what about your existing React components and Redux modules? Let‘s walk through how to integrate them step-by-step.

Components

To migrate an existing component to Rekit‘s structure, follow these steps:

1. Create a new folder for the component under src/features/, e.g. src/features/my-existing-component/
2. Move the component‘s .js file into the new folder, e.g. src/features/my-existing-component/MyExistingComponent.js
3. If the component has a corresponding stylesheet, move it to the same folder with the naming convention MyExistingComponent.less or MyExistingComponent.scss
4. If the component has tests, move the test file under tests/features/my-existing-component/MyExistingComponent.test.js
5. Update any broken import paths in the component and its associated files

Redux Modules

Rekit organizes Redux actions and reducers a bit differently than a typical Redux project (a subject for another blog post!), so we‘ll need to do some refactoring. For each existing Redux "module" (a set of related actions & reducers), follow these steps:

1. Create a new folder for the module under src/features/, e.g. src/features/some-feature/
2. For each action in the module:

• Create a new "action" file, e.g. src/features/some-feature/doSomething.js
• Cut the action creator and corresponding reducer case from the module and paste them into the new action file, updating the action constant to SOME_FEATURE_DO_SOMETHING

3. Move the module‘s reducer to src/features/some-feature/reducer.js, updating the import paths for the action constants
4. Update any broken import paths in components or other files that use the module‘s actions or reducer

Yes, this process involves a bit of manual work, but it‘s worth it for the improved clarity and maintainability in the long run! And Rekit‘s refactoring tools can help make the process smoother.

Routing

If your project uses React Router, you‘ll need to migrate your routes to Rekit‘s centralized routeConfig object. Here‘s how:

1. Open src/common/routeConfig.js
2. For each route you want to keep, add an entry to childRoutes array with the following shape:

{
  path: ‘/some-path‘,
  component: SomeComponent,
}

3. Remove the <Route> definitions from your components
4. Update any <Link> components to use the new paths defined in routeConfig

With this approach, your routes are defined in a single location and Rekit Studio can visualize them in the routing diagram. Neat!

Tests and Build Process

Rekit Studio integrates with your existing test and build setup. You can run your tests from the IDE using the built-in test runner, which expects tests to follow the naming convention *.test.js and be located either adjacent to the module they‘re testing or in the tests/ folder.

If you‘re using a custom build process (e.g. with Webpack or Rollup), you can continue to use your existing setup. Rekit Studio‘s build process is entirely optional.

Gradually Migrating Your Codebase

Migrating a non-trivial React codebase to fully align with Rekit‘s conventions can be a significant undertaking, but you don‘t have to do it all at once! The beauty of Rekit Studio is that you can use it for new components and features while gradually refactoring your existing code over time.

One effective approach is to migrate code to Rekit‘s structure as you touch it. For example, if you need to make changes to an existing component, take the opportunity to move it into the src/features/ folder and update any associated Redux actions or routes. Over time, more and more of your codebase will follow Rekit‘s conventions, and you can take advantage of its powerful refactoring capabilities.

Conclusion

Integrating Rekit Studio into an existing React project involves a bit of setup and refactoring, but the benefits are well worth the effort. With its intuitive tools, architectural diagrams, and robust refactoring capabilities, Rekit Studio can help you build and maintain a more scalable, organized React codebase.

In this guide, we walked through the key steps to get Rekit Studio up and running in your project:

1. Install rekit-core and rekit-studio dependencies
2. Set up the expected folder structure
3. Start the Rekit Studio server
4. Create a new component to see the workflow in action
5. Migrate existing components, Redux modules, and routes to Rekit‘s conventions

We also discussed some strategies for gradually migrating your codebase over time to minimize disruption.

I hope this guide has inspired you to give Rekit Studio a try and see how it can level up your React development workflow. Happy coding!