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

• Introduction
• Getting Started
  • Learn the Basics
  • Effects
  • Hooks
  • Sandboxed States
• Tutorial
• Examples
• API
• FAQ

Join us on Slack!

• Join Here
• Chat Here

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/>)

Team

| :-:|:-: Jason Maurer | Tanner Linsley

License

MIT © Jumpsuit