cra-hyperapp
Advanced tools
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>
<html>
<head>
<title>My awesome app!</title>
</head>
<body></body>
</html>
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! 😎
react, react-dom, redux, and react-redux dependencies.npm rm react react-dom redux react-redux
hyperapp and cra-hyperapp dependencies.npm i hyperapp cra-hyperapp
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"
},
store.rm src/store.js
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"
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";
-render(
+withReducer(reducer)(app)(
+ state,
+ actions,
- <Provider store={store}>
- <App />
- </Provider>,
+ (state, actions) => <App />,
document.getElementById("root")
);
import { connect } from "react-redux" with import { connect } from "cra-hyperapp".-import { connect } from "react-redux";
+import { connect } from "cra-hyperapp";
h and removing the connect HOC (this happens somewhat simultaneously with the last step).-import { h, connect } from "cra-hyperapp"
+import { h } from "hyperapp";
withReducer HOA from your app.-import { withReducer } from "cra-hyperapp";
import { h, app } from "hyperapp";
-import reducer from "./reducer";
-withReducer(reducer)(app)(
+app(
state,
actions,
view,
document.getElementById("root")
);
rm src/reducer.js
FAQs
Hyperapp expansion pack for create-react-app
The npm package cra-hyperapp receives a total of 1 weekly downloads. As such, cra-hyperapp popularity was classified as not popular.
We found that cra-hyperapp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.