Jumpsuit-cli NPM

Jumpsuit is a powerful and efficient Javascript framework that helps you build great apps. It is the fastest way to write scalable React applications with the least overhead.

Minimalist API
Components by React
State Management (powered by Jumpstate and Redux)
- Async Side-Effects
- State/Action Hooks
Routing
CLI powered by Browserify
HSR (Hot State Reloading)

Documentation

Join us on Slack!

Quick FAQ

What does the Jumpsuit core include?
- Components
- State Management
- Routing
- Rendering
- Associated Boilerplate for "hooking everything up"
What does the CLI do for me?
- Hot State Reloading
- Dev and Production Builds
- Getting Started Templates
- Build System (ES6, Bundler, etc.)
- Obviously you are free to use Jumpsuit with any build system that supports React.
Why another javascript framework?
- Javascript fatigue is a real thing, especially in the React ecosystem where there are so many options to choose from. Jumpsuit builds on the golden standards from the industry to give you the best developer and user experience. We make it easy for a developer of any skill level to write great apps. For a more in-depth discussion, read our launch article.
Can I use it with Create React App?
- You bet! Jumpsuits CLI is optional. We have instructions below on using just the Jumpsuit framework :)
But I've already built an app! Can I still use Jumpsuit?
- Of course! Jumpsuit is not an all or nothing framework. You can easily start migrating small parts of your app to use Jumpsuit.
I love the state management in Jumpsuit, so can I just use that?
- You're probably looking for Jumpstate. We packaged it separately for people just like you :)

Install

$ npm install -g jumpsuit-cli

You can also use Jumpsuit with your own build system if you don't like ours. We'll only cry a little bit.

$ npm install --save jumpsuit

Quick Start

# Create a new project
$ jumpsuit new myProjectName
$ cd myProjectName

# Watch for changes
$ jumpsuit watch

# View your project
$ open localhost:8000

Badge

Using Jumpsuit in your project? Show it off!

[![built with jumpsuit](https://img.shields.io/badge/built%20with-jumpsuit-3A54AD.svg)](https://github.com/jumpsuit/jumpsuit)

Tutorial

Examples

Todo List
Advanced Counter

What does it look like?

Here is the simplest Counter Example we can show you :)

// Import Jumpsuit
import { Render, State, Actions, Component } from 'jumpsuit'


// Create a state with some actions
const CounterState = State({

  // Initial State
  initial: { count: 0 },

  // Actions
  increment (state, payload) {
    return { count: ++state.count }
  },
  decrement (state, payload) {
    return { count: --state.count }
  },
})


// Create a subscribed component
const Counter = Component({
  render() {
    return (
      <div>
        <h1>{ this.props.count }</h1>
        <button onClick={ () => Actions.increment() }>Increment</button>
        <button onClick={ () => Actions.decrement() }>Decrement</button>
      </div>
    )
  }
}, (state) => ({
  // Subscribe to the counter state (will be available via this.props.counter)
  count: state.counter.count
}))

// Compose the global state
const globalState = { counter: CounterState }

// Render your app!
Render(globalState, <Counter/>)