Git Product home page Git Product logo

react-modern-library-boilerplate's Introduction

react-modern-library-boilerplate

Boilerplate and CLI create-react-library for publishing modern React modules with Rollup and example usage via create-react-app.

NPM JavaScript Style Guide

Intro

Note: Modern means modern as of March, 2018.. I'm sure everything will change in a month... ๐Ÿ˜‚ ๐Ÿ˜‚

We strongly recommend that you use the accompanying CLI create-react-library to create new modules based off of this boilerplate.

The purpose of this boilerplate is to make publishing your own React components as simple as possible.

Features

  • Easy-to-use CLI create-react-library
  • Transpiles all modern JS features
  • Bundles cjs and es module formats
  • create-react-app for example usage and local dev
  • Rollup for build process
  • Babel for transpilation
  • Jest for testing
  • Supports complicated peer-dependencies
  • Supports CSS modules
  • Sourcemap creation
  • Thorough documentation ๐Ÿ˜

Manual Setup

If you'd prefer to setup a new module manually, check out the introductory blog post and the old manual guide.

Examples

Here is an example react module created from this boilerplate: react-background-slideshow, a sexy tiled background slideshow for React. It comes with an example create-react-app hosted on github pages.

Multiple Named Exports

Here is a branch which demonstrates how to create a module with multiple named exports. The module in this branch exports two components, Foo and Bar, and shows how to use them from the example app.

Material-UI

Here is a branch which demonstrates how to create a module that makes use of a relatively complicated peer dependency, material-ui. It shows the power of rollup-plugin-peer-deps-external which makes it a breeze to create reusable modules that include complicated material-ui subcomponents without having them bundled as a part of your module.

License

MIT ยฉ Travis Fischer

react-modern-library-boilerplate's People

Contributors

danpen avatar janeklb avatar jeetiss avatar raycohen avatar transitive-bullshit avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.