Post
Ask Question

Jumpsuit - A React Framework

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.
 
Jumpsuit - A React Framework
 

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
  1. create-react-app JimpsuitApp
  2. cd JimpsuitApp 
# Install Jumpsuit in created react application 
  1. yarn add Jumpsuit  or npm install Jumpsuit  
# Configure the Jumpsuit code in index.js file
  1. import React from 'react'     
  2. import { Render, State, Actions, Component, Effect } from 'Jumpsuit'   // import Jumpsuit  
  3.   
  4. // Initialize State   
  5. const CounterState = State({  
  6.   // Initial Variable   
  7.   initial: { counter: 0 },  
  8.   // Actions  
  9.   increment: ({ counter }) => ({ counter : counter + 1 }),  
  10.   decrement: ({ counter }) => ({ counter : counter - 1 })  
  11. })  
  12.   
  13. //  async action  
  14. Effect('asyncIncrement', () => {  
  15.   setTimeout(() => Actions.increment(), 1000)  
  16. })  
  17.   
  18. const Counter = Component({  
  19.   render() {  
  20.     return (  
  21.       <>  
  22.         <h1 className="head">{this.props.count}</h1>  
  23.         <button className="btn btn-success" onClick={Actions.increment}>Increment</button>  
  24.         <br />  
  25.         <button className="btn btn-danger" onClick={Actions.asyncIncrement}>Asyncronous Increment</button>  
  26.       </>  
  27.     )  
  28.   }  
  29. }, (state) => ({  
  30.   // Subscribed for counter state
  31.   count: state.counter.counter
  32. }))  
  33.     
  34. // global state declaration  
  35. const globalState = { counter : CounterState }  
  36.    
  37. // Render app!  
  38. Render(globalState, <Counter/>, 'app')    
# Now start the action
  1. 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