Jumpsuit - A React Framework

React is one of the most powerful technologies, used to develop an efficient frontend web app maintained by Facebook and a community of individual developers and companies.

Introduction

 

React is one of the most powerful technologies, used to develop an efficient frontend web app, maintained by Facebook and a community of individual developers and companies. As we know, for an impactful approach or live approach we need to configure the React framework with Redux structure. However, the Redux structure is quite hard to understand and configure for beginner and intermediate level developers. So to resolve those bridges between React and Redux structure Jumpsuit paper - thin API comes into the picture.

 

 

What is Jumpsuit?

 

Jumpsuit is a paper-thin API, powerful and extremely efficient Front-end framework & CLI. It provides scalability to write the code in the fastest way to reduce the figuration of the Redux structure. In a simple way, we can say it's an alternative to React + Redux. 

 

Sample application using Jumpsuit in React App

 

# Create React Application using create-react-app

create-react-app JimpsuitApp
cd JimpsuitApp

# Install Jumpsuit in created react application 

yarn add Jumpsuit  or npm install Jumpsuit

# Configure the Jumpsuit code in index.js file

import React from 'react'
import { Render, State, Actions, Component, Effect } from 'Jumpsuit'   // import Jumpsuit

// Initialize State
const CounterState = State({
  // Initial Variable
  initial: { counter: 0 },
  // Actions
  increment: ({ counter }) => ({ counter : counter + 1 }),
  decrement: ({ counter }) => ({ counter : counter - 1 })
})

//  async action
Effect('asyncIncrement', () => {
  setTimeout(() => Actions.increment(), 1000)
})

const Counter = Component({
  render() {
    return (
      <>
        <h1 className="head">{this.props.count}</h1>
        <button className="btn btn-success" onClick={Actions.increment}>Increment</button>
        <br />
        <button className="btn btn-danger" onClick={Actions.asyncIncrement}>Asyncronous Increment</button>
      </>
    )
  }
}, (state) => ({
  // Subscribed for counter state
  count: state.counter.counter
}))

// global state declaration
const globalState = { counter : CounterState }

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

# Now start the action

yarn start

Why choose Jumpsuit?

• Removes the Redux structure configuration
• Provide live or hot state reload
• Zero boilerplate. You can write your app in line 1
• Simplified API version
• Easy to understand and write