How to create own React Library and JSX

Creating your own React library and JSX components involves several steps, from setting up your project to publishing it. Below is a guide to help you through the process.

Step 1: Set Up the Project

1. Initializing your project:

First, create a new directory for your library and initialize it with npm.

mkdir my-react-library
cd my-react-library
npm init -y

2. Install Necessary Dependencies:

You need to install React and some development tools.

npm install react react-dom
npm install --save-dev typescript ts-loader webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

3. Create Configuration Files:

webpack.config.js: This file will configure Webpack to bundle your library.

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'MyReactLibrary',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
        },
      },
    ],
  },
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
  },
};

tsconfig.json: TypeScript configuration file.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "outDir": "./dist"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

.babelrc: Babel configuration file.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Step 2: Create Your Components

1. Create the Source Directory:

Create a src directory and add your React components there.

mkdir src

2. Write a Sample Component:

Create a simple React component in src/MyComponent.tsx.

import React from 'react';

interface MyComponentProps {
  text: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ text }) => {
  return <div>{text}</div>;
};

export default MyComponent;

3. Create an Entry Point:

Create an entry point in src/index.tsx to export your component.

import MyComponent from './MyComponent';

export { MyComponent };

Step 3: Build Your Library

1. Add Build Script:

"scripts": {
  "build": "webpack"
}

2. Build the Project:

Run the build script to compile your library.

npm run build

Step 4: Publish Your Library

1. Create an.npmignoreFile:

Create an .npmignore file to exclude unnecessary files from the npm package.

node_modules
src
.babelrc
webpack.config.js
tsconfig.json

2. Login to npm:

If you haven't already, login to your npm account.

npm login

3. Publish Your Library:

Publish your library to npm.

npm publish

Step 5: Use Your Library

1. Install Your Library:

In another project, install your newly created library.

npm install my-react-library

2. Import and Use Your Component:

Import and use your component in a React application.

import React from 'react';
import ReactDOM from 'react-dom';
import { MyComponent } from 'my-react-library';

const App = () => (
  <div>
    <MyComponent text="Hello, World!" />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

And that's it! You've created, built, and published your own React component library.

Summary

Creating your own React library involves setting up a project with npm, installing necessary dependencies like React and Webpack, configuring TypeScript and Babel, writing your React components, building the project, and publishing it to npm. Follow these steps to initialize your project, create and export components, build the library, and publish it for use in other projects.