Overview

The react-component-template is a streamlined and efficient way to create a modern React component that is ready for publishing. It includes a deployable example using gh-pages with profiling enabled by default. The template is inspired by the svelte-component-template and create-react-library.

Features

• Quick degit of a modern React component
• Publish-ready in one step
• Deployable example with profiling enabled

Installation

To install the react-component-template, follow these steps:

1. Clone the project either by using GitHub’s “Use this template” button or manually.
2. Rename the package by doing a find and replace for “react-component-template” and replacing all instances with the desired name. This keeps the template lean and removes the need for additional scripting.
3. Publish the package to npm.

For a better npm publishing experience, you can try using “np”.

The rollup options for the template can be found at https://github.com/developit/microbundle#readme. The defaults are set to work with the latest version of React (v17) and should be sufficient for most projects. The react peer dependency is set by default to >=16.8, assuming the use of React hooks.

To set up the workflow, open a new terminal tab in your project directory. Make changes to the files in the “src” folder that are used in your example, such as “./src/index.tsx”, and see the example hot reload.

The tests and setup tests are run using react-scripts from CRA (Create React App). The config can be customized as documented. To run tests without watch mode, use the command “yarn test –watchAll=false”.

To deploy the example to gh-pages, run the following command in the project root:

yarn run deploy

The example is a standard CRA app whose dependencies are linked to the root folder (the React component). If additional dependencies will be shared between the example and the React component, add them to the root package.json using the “../node_modules/” pattern in ./example/package.json.

Summary

The react-component-template is a convenient and efficient way to create and publish a modern React component. It includes a deployable example with profiling enabled by default, making it easy to showcase the component’s functionality. The template follows best practices and allows for customization to suit individual project requirements.