react-initializr

An initializer for React libraries

Usage no npm install needed!

<script type="module">
  import reactInitializr from 'https://cdn.skypack.dev/react-initializr';
</script>

README

react-initializr

CLI for creating reusable, modern React libraries using Webpack and create-react-app.

Features

  • Easy-to-use CLI
  • create-react-app for example usage and local dev
  • Webpack for bundling
  • Babel for transpiling
  • Jest for testing
  • Supports complicated peer-dependencies
  • Supports CSS, SCSS and SASS modules

Install globally

npm install -g react-initializr

Creating a New Module

react-initializr cool-component

Answer some basic prompts about your module and then the CLI will perform the following steps:

  • create the library root folder
  • copy over the template
  • install dependencies via yarn or npm
  • link packages together for local development

Development

Local development is broken into two parts (ideally using two terminal tabs).

First, run webpack to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

npm start # runs webpack with watch flag

The second part will be running the examples/ create-react-app that's linked to the local version of your module.

# (in another terminal tab)
cd examples
npm start # runs create-react-app dev server

Now, anytime you make a change to your library in src/ or to the example app's examples/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

Publishing to npm

npm publish

Deploying to Github Pages

npm run deploy

This creates a production build of the example create-react-app that showcases your library and then runs gh-pages to deploy the resulting bundle.

Examples

Want to add yours to the list? Submit an issue.

License

MIT © Gabriel Suaki