일이 시작되다

Hyplapp 시작하겠습니다.
JavaScript 라이브러리입니다.
무게가 가볍고 속도가 빠르며 간단하여 내가 좋아하는 도서관이다.
Hyplapp README에서 샘플 이벤트를 했어요!
우리도 Giithub에 힘쓰고 있습니다.
https://github.com/guppy0356/hello-hyperapp
yarn+parcel+hyperap이기 때문에 가능하면 clone에서 작동해 보세요.
README 샘플을 이동하기 전에.
큰 가방
JSX를 사용하려면 Babel이 필요하므로 설치

yarn add --dev parcel-bundler babel-preset-env babel-preset-react

Hyplapp 설치 명령

$ yarn add hyperapp

.babelrc

{
  "presets": ["env", "react"],
  "plugins": [["transform-react-jsx", { "pragma": "h" }]]
}

index.html

<!DOCTYPE html>
<html>
  <head>
      <title>Hello, Hyperapp</title>
  </head>
  <body>
      <div id="app"></div>
      <script src="index.js"></script>
  </body>
</html>

index.js

import { h, app } from "hyperapp"

const state = {
  count: 0
}

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
}

const view = (state, actions) => (
  <main>
    <h1>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </main>
)

const main = app(state, actions, view, document.body)

시험해 보다

yarn run parcel index.html

끝말
각 자바스크립트의 동작이 상당히 격렬했기 때문에 작가는 따라가지 못했지만 드디어 움직일 수 있었다.
어렵지만 시야를 넓혀서 도전해보면 좋을 것 같아요.

Reference

이 문제에 관하여(일이 시작되다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/guppy0356/items/dcdde5382d5ce57470d4

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

일이 시작되다

Reference

좋은 웹페이지 즐겨찾기