npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-jarb

v1.0.2

Published

[![npm version](https://badge.fury.io/js/react-jarb.svg)](https://badge.fury.io/js/react-jarb) [![NPM](https://nodei.co/npm/react-jarb.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-jarb/)

Downloads

9

Readme

README

npm version NPM

Quickstart Guide

npm init -y

npm install react-jarb

npm run boilerplate

Description

Just Another React Boilerplate (jarb) is an npm module developed to allow React/Redux users to quickly and easily set up the skeleton and boilerplate for a basic React/Redux framework. The package sets up a webpack configuration, downloads all necessary dependencies, creates Jest/Enzyme test files, creates an organized file system, and provides a working example of React/Redux site that can be edited and further built upon.

File Structure

frontend
├── actions
│   └── project_actions.js
│
├── components
│   ├── __tests__
│   │     └── components-test.js
│   ├── gif_container.jsx
│   ├── gif.jsx
│   ├── main.jsx
│   └── root.jsx
│
├── reducers
│   ├── __tests__
│   │     └── reducer-test.js
│   ├── error_reducer.jsx
│   ├── gif_reducer.jsx
│   └── root.jsx
│
├── store
│   └── store.js
└── util
│   └── project_api_util.js
└── app.js
│
└── Index.html

webpack.config.js

How to use it

  • In a new directory, initialize your package.json by running:

npm init -y

  • Install react-jarb by running:

npm install react-jarb -s

  • The following command will create the necessary file structure and initial boilerplate for your React/Redux project:

npm run boilerplate

How it works

React-jarb works by installing all the packages that you would need to get full setup with React/Redux and sets up testing too. On top of adding all this it also parses your package.json file and adds itself to make it so you never have to leave the command-line. It does this by using another npm package called jsonfile.

const addScript = () => {
  try {
    let _package = jsonfile.readFileSync('../../package.json');

    if (!_package.scripts) {
      _package.scripts = {};
    }

    _package.scripts["boilerplate"] = "react-jarb";
    jsonfile.writeFileSync('../../package.json', _package, {spaces: 2});

  } catch (e) {
    throw e;
  }
};

Once the boilerplate script has been added all that is left to do is run it. The script creates the folder structure that is listed out above and creates all the files that are needed.

Future plans

  • [ ] Provide optional redux-saga support
  • [ ] Allow for components to be created from the command line
  • [ ] Allow for packages to be added to the user’s package.json that have been installed from react-jarb