react-jig

An opinionated way of building React front ends.

Usage no npm install needed!

<script type="module">
  import reactJig from 'https://cdn.skypack.dev/react-jig';
</script>

README

React Jig

A highly opinionated React front end construction kit.

Gettin' Jiggy Wit It

# Create a new folder.
mkdir whatevah
cd whatevah

# Setup a new project.
npm init

# Get your Jig on.
npm i --save react-jig

# Initialize.
node_modules/.bin/jig --init

Create a new entity

Let’s create a new entity named ace.

node_modules/.bin/jig --new-entity --name ace

Let’s do this.

Start the server in development mode.

node_modules/.bin/jig --watch

.. and have a look here:

http://localhost:8999/#/ace

What did it do ?

We created a new React app and generated a new entity named ace with a number of accompanying components wired up to Redux.

This is somewhat similar to what we’d do in Rails, using rails generate controller NAME.

You now have the following /app folder in your project looking as follows;

# /app dir in the root of your project
app                     
|-- App.js              # Main app
|-- ace                 # Generated entity `ace`
|   |-- __tests__
|   |   `-- reducer-test.js
|   |-- actions.js
|   |-- index.js
|   |-- reducer.js
|   |-- selectors.js
|   `-- types.js
|-- components
|   `-- ace             # Generated components for entity `ace`
|       |-- Ace.js
|       |-- Ace.scss
|       |-- AceContainer.js
|       |-- AcePage.js
|       |-- AcePage.scss
|       `-- AcePageContainer.js
|-- configureStore.js
|-- index.js
|-- misc
|   `-- Editable.js
|-- reducers.js
`-- styles
    |-- _colors.scss
    |-- global.scss
    `-- normalize.css

Tech

React Jig uses;

  • React 15.x
  • Redux
  • React Router
  • Reselect
  • Updeep
  • SASS