Mart-DL is a tool that allows you to create React libraries quickly and easily. This tool focuses on simplifying the React component development process, allowing you to focus on creating high-quality components instead of dealing with project setup and structure.
Mart-Dl takes care of the initial setup and project structure, allowing you to:
- Focus on developing customizable React components.
- Streamline the creation of React libraries for reuse across multiple projects.
- Automate tasks such as the compilation of styles and the generation of documentation.
To get started using Mart-DL, follow these steps:
- Clone the Repository:
Clone the Mart-Dl repository:
git clone https://github.com/jefferson-lopez-dev/mart-dl.git
cd mart-dl
- Install Dependencies:
Install the necessary dependencies with the following command:
npm i
- Component Development:
Develop your customizable components in the src/components directory. Mart-DL will take care of organizing your project structure and handling compilation tasks automatically.
- SASS Observer:
To automatically compile styles written in SASS to CSS on every change, you can use SASS watch. Run the following command in a standalone terminal:
npm run watch-sass
This functionality allows you to work efficiently on the appearance of your components.
- Build in Development Mode:
If you want to build the library in development mode, run:
npm run build
This will generate two folders:
client: Contains files related to the client application, such as an HTML file and a JavaScript file for the client application.
dist: Contains the files compiled and optimized for library distribution, including a JavaScript file that contains the compiled library and is ready to be used in other projects.
- Render a component:
To render a component in an application, you must first export the component you created in the src/index.ts file. This file is responsible for exposing your components for use.
Then, create a file in the folder app called main.tsx. In this file, import the component you created and use it in your application. Here is an example:
import React from "react";
import ReactDOM from "react-dom";
import * as lib from "mart-dl";
import { YourComponent } from "../src/index"; // Make sure you import your component here
const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
<>
<YourComponent
text="component"
/>
</>
);
In the example above, we imported your custom component from src/index and rendered it both from the Mart-DL library and locally in the app. Be sure to replace "YourComponent" with the name of your component.
With these steps, you can easily develop, build, and render your React components with Mart-DL in your applications.
If you want to share your library with other developers through npm, follow these steps:
- Login to npm:
Log in to your npm account using the following command:
npm login
- Package and Publish to npm:
Package and publish the library to npm by running:
npm publish
Make sure you have an npm account and the necessary permissions to publish packages.
To update your library in npm, follow these steps:
-
Make the necessary changes to your code.
-
Update the library version in the package.json file.
-
Repeat steps 1 and 2 in the "Publishing to npm" section.
With Mart-DL, you can build React libraries efficiently and focus on creating high-quality components without worrying about the initial project setup. This tool is ideal for developers who want to speed up their React library development process.
You can find the source code for this project at Mart-DL
Remember to replace "your-user"
with your GitHub username and make sure you configure your project correctly before publishing it to npm. This is an example of a README.md
file that you can customize to your needs.