All Projects → okwolf → hyperapp-scripts

okwolf / hyperapp-scripts

Licence: MIT License
Hyperapp expansion pack for create-react-app

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to hyperapp-scripts

create-hyperapp
Create Hyperapps with no build configuration
Stars: ✭ 16 (-57.89%)
Mutual labels:  create-react-app, zero-configuration, hyperapp
universal-scripts
Build universal apps without configuration.
Stars: ✭ 23 (-39.47%)
Mutual labels:  create-react-app, zero-configuration
kkt
Create React apps with no build configuration, Cli tool for creating react apps.
Stars: ✭ 40 (+5.26%)
Mutual labels:  create-react-app, zero-configuration
rocketact
🚀Developing React projects with ease
Stars: ✭ 45 (+18.42%)
Mutual labels:  create-react-app, zero-configuration
phaser-cli
Create Phaser projects with no build configuration.
Stars: ✭ 53 (+39.47%)
Mutual labels:  zero-configuration
monoreact
📦 React workspaces implementation
Stars: ✭ 13 (-65.79%)
Mutual labels:  create-react-app
fetch
Isomorphic Wordpress API client and React hooks - super tiny, super fast.
Stars: ✭ 47 (+23.68%)
Mutual labels:  create-react-app
typey-type
Typey Type for Stenographers is a free typing app designed specifically to help steno students practise and rapidly master stenography.
Stars: ✭ 51 (+34.21%)
Mutual labels:  create-react-app
react-programmable-chat
A React example of Twilio Programmable Chat
Stars: ✭ 29 (-23.68%)
Mutual labels:  create-react-app
react-intl-cra
🔧 Extract messages of Creact React App from the command line.
Stars: ✭ 68 (+78.95%)
Mutual labels:  create-react-app
shopping-cart
A simple Shopping-cart built with React and Django REST Framework(DRF)
Stars: ✭ 41 (+7.89%)
Mutual labels:  create-react-app
djcra
Django ❤️ create-react-app integration example
Stars: ✭ 12 (-68.42%)
Mutual labels:  create-react-app
reasonreact-starter
Minimal yet powerful ReasonReact template
Stars: ✭ 33 (-13.16%)
Mutual labels:  create-react-app
hyperapp-todo-parcel
marcusasplund.github.io/hyperapp-todo-parcel/
Stars: ✭ 12 (-68.42%)
Mutual labels:  hyperapp
create-react-redux-app
React boilerplate based on create-react-app
Stars: ✭ 49 (+28.95%)
Mutual labels:  create-react-app
markdown-editor
✏️ A very simple but useful Markdown Previewer and Markdown Editor with CodeMirror, Markedjs, and Create-react-app
Stars: ✭ 25 (-34.21%)
Mutual labels:  create-react-app
fyi
Map & Explore your organization's System Architecture
Stars: ✭ 28 (-26.32%)
Mutual labels:  create-react-app
passport-examples
A variety of examples using PassportJS with ExpressJS and ReactJS applications
Stars: ✭ 44 (+15.79%)
Mutual labels:  create-react-app
react-app-rewire-babel-loader
Rewire babel-loader loader in your create-react-app project using react-app-rewired.
Stars: ✭ 20 (-47.37%)
Mutual labels:  create-react-app
contentful-static-react
A starter kit for building a static website with React as the templating library and Contentful as the CMS.
Stars: ✭ 48 (+26.32%)
Mutual labels:  create-react-app

Zero-configuration create-react-app style projects with Hyperapp

This package offers a wrapper around the start, build, and test scripts from react-scripts with customizations to make them work with Hyperapp.

Note: if you want to quickly get started with Hyperapp, you probably want create-hyperapp instead.

Starting a new project from scratch

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 hyperapp-scripts

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

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

Create a public/index.html file.

<!DOCTYPE html>
<html>
  <head>
    <title>My awesome app!</title>
  </head>
  <body>
    <div id="app"></div>
  </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 view = state => <h1>{state.title}</h1>;

app({
  init: () => state,
  view,
  node: document.getElementById("app")
});

Finally start your app and gaze upon its glory.

npm start

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].