https://github.com/okwolf/hyperapp-scripts

Hyperapp expansion pack for create-react-app
https://github.com/okwolf/hyperapp-scripts

create-react-app hyperapp zero-configuration

Last synced: 3 months ago
JSON representation

Hyperapp expansion pack for create-react-app

• Host: GitHub
• URL: https://github.com/okwolf/hyperapp-scripts
• Owner: okwolf
• License: mit
• Created: 2018-01-20T21:38:49.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-06-19T08:11:56.000Z (over 1 year ago)
• Last Synced: 2024-09-08T13:44:06.508Z (4 months ago)
• Topics: create-react-app, hyperapp, zero-configuration
• Language: JavaScript
• Homepage:
• Size: 38.1 KB
• Stars: 39
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Zero-configuration [create-react-app](https://github.com/facebook/create-react-app) style projects with [Hyperapp](https://github.com/hyperapp/hyperapp)

This package offers a wrapper around the `start`, `build`, and `test` scripts from [`react-scripts`](https://github.com/facebook/create-react-app/tree/master/packages/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`](https://github.com/okwolf/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](https://nodejs.org/en/download).

```console

mkdir my-awesome-project

cd my-awesome-project

mkdir public src

npm init -y

```

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

```console

npm i hyperapp

npm i -D hyperapp-scripts

```

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

```diff

"scripts": {

+  "start": "hyperapp-scripts",

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

+  "test": "hyperapp-scripts test"

},

```

Create a `public/index.html` file.

```html

  

    My awesome app!

  

  

    


  


```

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

```jsx

import { h, app } from "hyperapp";

const state = { title: "Hi." };

const view = state => 
{state.title}
;


app({

  init: () => state,

  view,

  node: document.getElementById("app")

});

```

Finally start your app and gaze upon its glory.

```console

npm start

```

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