Giter VIP home page Giter VIP logo

component-template's Introduction

component-template Build Status

Build, Document, Release & Publish React Components for reactstrap with this Component Template.

This project was bootstrapped with Create React App.

To start using the example npm module component-template, check out the documentation.

Developing with Component Template

Looking to build your own components? Fork this repo and proceed with the following documentation.

Getting started

To begin, install dependencies with

npm install

To run a local server with create-react-app, run:

npm start

A new browser window should open up with the following url: http://localhost:3000

Testing components

Testing is provided via create-react-app which includes the jest test runner. Enzyme is also added to enable better integration testing of components via mount.

Execute the following command to run tests. Read more about that here.

npm run test

To also see test coverage when running tests, execute the following command:

npm test -- --coverage

Adding your own components

Currently the example component shipped in this project is HelloWorld. To add your own components, replace HelloWorld with your own named component and tests.

Notes

  • Component source code should live in /src/components
  • Be sure to export your components here /src/components/index.js
  • When published to npm, the main script in package.json will be available at lib/index.js thanks to the prebuild task
  • Changelogs are important for communicating to users what features, fixes and breaking changes have been shipped. This project uses the angular commit convention as standard for creating readable and machine parseable commit messages.

Release Flow

Included in this project are a few scripts to help document, release and publish a react component. Before proceeding, make sure the name, version, description, and repository in package.json are updated to properly define your own component.

Once your components are added and tested, use the following steps to release to npm.

Create Release branch

First, run the create-release-branch script locally, which takes 1 argument, the release version. The release version can be a specific semantic version or it accepts patch, minor, major to automatically increment the current release version and update the changelog. After the script is run, a branch will be pushed to the repo.

# RELEASE_VERSION: "1.0.0", patch, minor, major
RELEASE_VERSION=0.2.0
npm run create-release-branch -- $RELEASE_VERSION

With the branch pushed to github, you can now manually create the pr.

Publish Docs

First, update the npm task gh-pages, to set the proper REACT_APP_GH_PAGES_PATH for your project. Ex: https://reactstrap.github.io/component-template project would be component-template. No need for the trailing or leading slash.

Follow the next sections to publish locally or via Travis CI.

Without CI

With the REACT_APP_GH_PAGES_PATH path updated, run the deploy-docs script to compile the production version of your docs and push those changes to the gh-pages branch of your repo.

npm run deploy-docs
via Travis CI

Coming soon

Publish Release

First, be sure to signup for npm if you haven't or run npm login with your existing credentials.

Next, run the publish-release task which will pull the latest changes, compile the components, tag the current commit as the version in packge.json. push the tags to github and finally will run npm publish. Check the publish-release script for more info.

npm run publish-release

Missing Something

Feel free to create an issue or PR.

component-template's People

Contributors

eddywashere 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.