This content originally appeared on Bits and Pieces - Medium and was authored by Ashan Fernando
Building composable apps is key to ensuring scalability, maintainability, and enhanced development efficiency in modern web development. React is a perfect fit for building such apps, but when it comes to optimizing build speed and efficiency, Rspack and Bit are powerful tools that can take your app to the next level.
In this article, we will explore how to build a composable React app using Rspack and Bit, leveraging the power of both to create reusable, optimized components.
Why Rspack and Bit?
Rspack is a blazing-fast bundler that provides modern build optimizations for React apps, while Bit allows you to develop and share reusable components. Combined, they offer a streamlined development experience that lets you build composable applications with maximum flexibility. Rspack ensures your builds are fast and efficient, while Bit helps manage independent components that can be reused across projects.
Getting Started
Step 1: Initialize a Bit Workspace
To begin, you’ll need to install Bit locally, create a local workspace, or use Bit Cloud Workspaces. Bit workspace is where your React components can be developed, shared, and reused. Then, you must create a scope in Bit Platform, where your components live. I’ve created a scope named ashanfernando.rspack-demo. You can create your own scope in Bit Platform. To create a workspace, run the following command.
bit init --default-scope ashanfernando.rspack-demo
Step 2: Set Up Rspack Env
Next, add the following code block into your workspace.jsonc and update the generator so that we can create new components that use Rspack.
{
"teambit.generator/generator": {
"envs": ["teambit.rspack/envs/react-rspack"]
}
}This configuration allows you to select Rspack component template when creating new components. You can list down all the generator templates by using the following command.
bit templates
Step 3: Create a React Rspack Component
Now, let’s create a simple React component that uses Rspack using the Bit command:
bit create react card
Bit will scaffold a new React component that can be independently developed and managed. Let’s look at the card component:
//@file: rspack-demo/card.jsx
import type { ReactNode } from 'react';
export type CardProps = {
/**
* sets the component children.
*/
children?: ReactNode;
};
export function Card({ children }: CardProps) {
return (
<div>
{children}
</div>
);
}
Let’s update this component with styles so it looks like a card.
//@file: rspack-demo/card.jsx
import type { ReactNode, CSSProperties } from 'react';
export type CardProps = {
/**
* Sets the content inside the card.
*/
children?: ReactNode;
/**
* Inline styles to override default styles.
*/
style?: CSSProperties;
};
export function Card({ children, style }: CardProps) {
const cardStyle: CSSProperties = {
padding: '16px',
borderRadius: '8px',
backgroundColor: 'white',
border: '1px solid #e0e0e0',
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
transition: 'box-shadow 0.3s ease',
...style, // Merges custom inline styles
};
return (
<div style={cardStyle}>
{children}
</div>
);
}
Step 4: Managing Dependencies with Bit
Bit helps you manage your components’ dependencies, ensuring all necessary packages are included when sharing components. To install dependencies, run:
bit install
This ensures that each component’s specific dependencies are handled efficiently, making it easier to manage large-scale applications.
Step 5: Running the Bit development server
With Bit, you can run a development server to preview your components. This launches Bit’s dev server, allowing you to view the components in isolation. Bit generates component previews using *.composition.tsx files, enabling you to see how the components behave without running the entire app.
bit start
Bit ensures your components are framework-agnostic and ready to be reused in any React project.
Step 6: Bundle and Export Components
When your component is ready, you can tag the components and export the component into Bit remote scope. Here, I’m exporting them to the remote scope rspack-demo.
bit tag
bit export
Exported Component: https://bit.cloud/ashanfernando/rspack-demo/card
This allows you to share your components across projects or teams, ensuring they remain independent and reusable.
Step 8: Creating the React App
Now let's create a React App using Rspack App Type (teambit.rspack/app-types/react-rspack) created by Bit Team. Instead of creating it from scratch, let’s fork the example app from the official demo.
bit fork teambit.rspack/examples/react/example-app my-rspack-app
bit use my-rspack-app
This will clone the app component and register it in the workspace.jsonc file so that we can run it locally. To run the app:
bit run rspack-app
Let’s update the app.tsx to use the card component.
// @file: rspack-demo/my-rspack-app/app.tsx
// ...
import { Card } from '@ashanfernando/rspack-demo.card'
export function RspackApp() {
function getMainPage() {
return (
<div className={styles.app}>
<h1 className={styles.title}>Bit + Rspack + React + TypeScript</h1>
<Card>hello world!</Card>
<div>
<img src={bitLogo} className={styles.logo} alt="bit logo" />
<img src={rspackLogo} className={styles.logo} alt="Rspack logo" />
<img src={reactLogo} className={styles.logo} alt="React logo" />
<img src={tsLogo} className={styles.logo} alt="ts logo" />
</div>
</div>
);
}
return (
<>
{/* header component */}
<Routes>
<Route path="/" element={getMainPage()} />
<Route path="/about">{/* about page component */}</Route>
</Routes>
{/* footer component */}
</>
);
}
Once you use the card component, you can check the dependency graph to see how it's being recognized as a dependency of the react app component.
Next, tag and export the app component to Bit remote scope.
bit tag -m "adding app component"
bit export
The most interesting thing with Rspack is that you get subsecond compile times for your app and components. Even if the project gets larger, it performs well compared to Webpack.
Conclusion
Combining React, Rspack, and Bit allows you to create highly efficient, composable apps that scale easily. Rspack ensures fast, optimized builds, while Bit empowers you to effortlessly create, share, and manage reusable components. This combination boosts your development speed with subsecond compile times and enhances your ability to collaborate and maintain code across teams and projects.
With modular development at the core, this setup is ideal for both small projects and large-scale applications, ensuring that performance, flexibility, and maintainability are seamlessly integrated into your workflow.
Learn More
- Make Instant Package Updates and Test Impact on Dependent Projects
- Composable Software Architectures are Trending: Here’s Why
- Design Principles for Composable Architectures
- Optimizing Your Codebase for AI Coding Assistants
Building a Fast and Efficient Composable App using React and Rspack was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Ashan Fernando
Ashan Fernando | Sciencx (2024-09-18T17:57:34+00:00) Building a Fast and Efficient Composable App using React and Rspack. Retrieved from https://www.scien.cx/2024/09/18/building-a-fast-and-efficient-composable-app-using-react-and-rspack/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.