초보자가 Hyperapp에 대해 알아보기

17826 단어 hyperappJavaScriptTypeScript
나는 하이퍼앱으로 아주 간단한 카운터 앱을 만들었다.

개발 환경의 구축


앞머리가 모르는 사람(react의 책과 공식 강좌 1주일 정도)이기 때문에 어쨌든 쉽게 도입할 수 있는 방법을 선택했다.
# 作業フォルダの設定
PS> mkdir try-hyperapp
PS> cd try-hyperapp

# package.jsonの作成
PS> yarn init -y

# Hyperappのインストール
# babel-preset-envのインストール（環境に合わせてトランスパイルしてくれる？）
# parcelのインストール（設定ファイルのいらないモジュールバンドラー）
PS> yarn add hyperapp babel-preset-env parcel-bundler
최종package.json은 다음과 같다.
package.json
{
  "name": "try-hyperapp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "babel-preset-env": "^1.6.1",
    "hyperapp": "^1.2.5",
    "parcel-bundler": "^1.8.1"
  },
  ※↓TypeScriptで書いたのでparcelでバンドルした際に自動で追加されたようです。
  "devDependencies": {
    "typescript": "^2.8.3"
  }
}
Type Script로 쓰고 싶어서 만들었어요tsconfig.json.
tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "sourceMap": true,
    "strict": true
  }
}

counter.tsx 만들기


먼저 루트 디렉토리 바로 아래에 폴더src를 만듭니다.
만약 사실이라면actions 폴더와views 폴더로 나누는 것이 좋을 수도 있지만, 이번에는 간단히src 모든 폴더를 정리counter.tsx했다.
src/counter.tsx
import { h, app, ActionsType, View } from "hyperapp";

interface IState {
  count: number;
}
const state: IState = {
  count: 0
};

interface IActions {
  down: (value: number) => IState;
  up: (value: number) => IState;
}
const actions: ActionsType<IState, IActions> = {
  down: value => state => ({ count: state.count - value }),
  up: value => state => ({ count: state.count + value })
};

const view: View<IState, IActions> = (state, actions) => (
  <div class="card center-align">
    <div class="card-image">
      <h1>{state.count}</h1>
    </div>
    <div class="card-action">
      <button
        class="waves-effect waves-light btn-large"
        onclick={() => actions.down(1)}
      >
        sub
      </button>
      <button
        class="waves-effect waves-light btn-large"
        onclick={() => actions.up(1)}
      >
        add
      </button>
    </div>
  </div>
);

app<IState, IActions>(state, actions, view, document.body);
ActionsType와ViewTypeScript든 가져오지 않든 컴파일러에 화가 나지 않지만 고정된 유형은 실수로 오류와 보완을 줄여서 가져왔습니다.actions형value이 any형으로 바뀌어서 불안해요.

사용할 때 인터페이스처럼 number형으로 추론되어 안심이 됩니다.

Index.>의 제작


루트 디렉토리 바로 아래에 parcel이 되는 엔트리 포인트Index.html를 생성합니다.
외로워 보이기 때문에 CDNMaterialize.css을 거쳐 사용해야 한다.
index.html
<!DOCTYPE html>
<html lang='ja'>

<head>
  <meta charset='UTF-8'>
  <title>try hyperapp</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>

<body>
  <script src='./src/counter.tsx'></script>
</body>

</html>

실행


다음 명령dist을 사용하여 폴더를 만들고 로컬 서버를 시작합니다.
이번에는 타입 스크립트를 사용했지만 설치하지 않으면 자동으로 진행될 것 같습니다.
PS> yarn run parcel index.html

소감과 모르는 점.


좋은 곳

  • redux 등elm 구조는?react보다 처음 편입된 인상이 더 좋았다.
  • action 저도 주위의 깔끔한 곳을 좋아해요.
  • 타입 스크립트와 잘 맞는 것 같아요.
  • 보충 후 효과가 현저하여 조심하지 않아도 틀리지 않습니다!
  • 보일러판의 전선이 적어 하고 싶은 일을 간결하게 쓸 수 있다

    • 모르다

  • 폴더 구성 모범 사례
  • 조금 큰 앱을 만들 때react의 Ducks 그래픽 같은 게 좋아요?
    • src
.
|_ views
| |_ counter.tsx
| |_ foo.tsx
|_ states
| |_ counter.ts
| |_ foo.ts
|_ actions
  |_ counter.ts
  |_ foo.ts
  • actions와 state의 유형이 interface이 좋은지 type가 좋은지 모르겠어요.
  • 어려우니까 잘 아시는 분 있으면 알려주세요
    • // interfaceで書く
interface IActions {
  down: (value: number) => IState;
  up: (value: number) => IState;
}
const actions: ActionsType<IState, IActions> = {
  down: value => state => ({ count: state.count - value }),
  up: value => state => ({ count: state.count + value })
};

// typeで書く
const actions: ActionsType<IState, IActions> = {
  down: value => state => ({ count: state.count - value }),
  up: value => state => ({ count: state.count + value })
};
type Actions = typeof actions;
  • 디버깅 방법 몰라
  • vscode에서 절차를 수행하는 방법을 모르니 잘 조사해야 한다...
  • sourcemap:ture 또는 크롬 개발자를 vscode로 확장하지만 안 됩니다
    • leetcode 295. Find Median from Data Stream
    Type Script로 static factory method 만들기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage