Hyperapp expansion pack for create-react-app.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
bin cra wont work with es6 library code unless you include it in babel tr… Jan 21, 2018
src somewhat more robust code Jan 22, 2018
package.json updating dependencies, config, and build Jun 11, 2018
pre-flight-tests updating dependencies, config, and build Jun 11, 2018


Hyperapp for zero-configuration create-react-app style projects

Starting a new project

Start by creating a new folder for your awesome new Hyperapp project and initialize a new project with npm.

mkdir my-awesome-project
cd my-awesome-project
mkdir public src
npm init -y

Install your dependencies (they're good for your health).

npm i hyperapp
npm i -D cra-hyperapp

Then open your package.json in your favorite text editor and add your scripts.

"scripts": {
+  "start": "hyperapp-scripts",
+  "build": "hyperapp-scripts build"

Create a public/index.html file.

<!doctype html>
    <title>My awesome app!</title>

Next create a src/index.js file with a basic hello world app.

import { h, app } from "hyperapp"

const state = { title: "Hi." }
const actions = {}
const view = state => <h1>{state.title}</h1>

app(state, actions, view, document.body)

Finally start your app and gaze upon its glory.

npm start

Congratulations! Your app is now ready to make even more awesome! 😎

A 12 step recovery program for kicking your React/Redux habit in favor of Hyperapp

  1. Remove the react, react-dom, redux, and react-redux dependencies.
npm rm react react-dom redux react-redux
  1. Add the hyperapp and cra-hyperapp dependencies.
npm i hyperapp cra-hyperapp
  1. Replace react-scripts with hyperapp-scripts in your package.json.
"scripts": {
-  "start": "react-scripts start",
-  "build": "react-scripts build"
+  "start": "hyperapp-scripts start",
+  "build": "hyperapp-scripts build"
  1. Remove your Redux store.
rm src/store.js
  1. Replace import React from "react" with import { h } from "cra-hyperapp". This gives some compatibility features like onClick style support and children as a component prop instead of 2nd argument.
-import React from "react"
+import { h } from "cra-hyperapp"
  1. Replace the ReactDOM.render with app from hyperapp using the withReducer HOA to pass your root reducer.
-import React from "react";
-import { render } from "react-dom";
-import { Provider } from "react-redux";
-import store from "./store";
+import { h, withReducer } from "cra-hyperapp";
+import { app } from "hyperapp";
+import reducer from "./reducer";

+  state,
+  actions,
-  <Provider store={store}>
-    <App />
-  </Provider>,
+  (state, actions) => <App />,
  1. Replace import { connect } from "react-redux" with import { connect } from "cra-hyperapp".
-import { connect } from "react-redux";
+import { connect } from "cra-hyperapp";

Your app should now be back in a working state. Verify this before going full Hyperapp.

  1. Move your action/reducer combinations over to native Hyperapp one at a time.
  2. Move your components over to native Hyperapp one at a time to use the built-in h and removing the connect HOC (this happens somewhat simultaneously with the last step).
-import { h, connect } from "cra-hyperapp"
+import { h } from "hyperapp";
  1. Remove the withReducer HOA from your app.
-import { withReducer } from "cra-hyperapp";
import { h, app } from "hyperapp";
-import reducer from "./reducer";

  1. Delete your reducer.
rm src/reducer.js
  1. Profit with Hyperapp. 💰