xatto란?

htps : // 기주 b. 코 m/아토미타/아트
JavaScript로 만든 경량 프레임 워크입니다.
자바 스크립트 프레임 워크의 유명한 곳에서

Angular

React

Vue.js

등이 있지만,
이 중에서 말하면 React에 가까운 느낌입니다.

일단 움직여 보자.

그건 그렇고, 내 환경은 다음과 같습니다.

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.14.4
BuildVersion:   ...

$ node -v
v10.1.0

$ npm -v
6.7.0

데모가 있기 때문에 그것을 움직이자.
htps : // 기주 b. 코 m / 아토미타 / ぁと s r r r t

www $ git clone [email protected]:atomita/xatto-starter-kit.git
www $ cd xatto-starter-kit
www/xatto-starter-kit $ yarn
www/xatto-starter-kit $ yarn run dev
...
...

Server running at http://localhost:58080 
✨  Built in 1.51s.

되면 성공입니다. 브라우저에서 http://localhost:58080
방문하면 카운터 데모가 표시됩니다.
[-]나 [+]를 클릭하면 카운터의 숫자를 증감할 수 있습니다.

코드를 보자.

src/index.html

특히 아무것도 쓰는 것은 아니지만 w

1xatto가 작동하는 "입고"를 준비하고 있습니다. (나중에 document.getElementById('app')를 지정했습니다.)
2 ./boot.js 를 로드하고 있지만 결국 boot.js 를 통해 app.jsx 를 로드하는 느낌입니다.

src/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Starter kit for xatto</title>
    <meta
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" 
        name="viewport"
    >
  </head>
  <body>
    <div id="app"></div>  <!-- 1 -->
    <script src="./boot.js"></script>  <!-- 2 -->
  </body>
</html>

src/app.jsx

5에서 앱을 초기화하고 있습니다 id="app" HTML 요소에 view이 앱의 매개 변수로 {counters: [{ count: 0 }, { count: 10 }]}2, 3에서 매개 변수의 일부를 구성 요소에 전달합니다.

src/app.jsx

import { x, atto } from 'xatto';

import { Counter } from './components/Counter';

const view = ({ xa: { context }, ...attrs }, children) => ( // 1
  <div>
    <Counter xa={{ slice: 'counters.0' }} /> {/*2*/}
    <Counter xa={{ slice: 'counters.1' }} /> {/*3*/}

    <h1>{context.counters.reduce((acc, v) => acc + v.count, 0)}</h1> {/*4*/}
  </div>
);

atto(view, document.getElementById('app'))({ // 5
  counters: [{ count: 0 }, { count: 10 }],
});

src/components/Counter/index.js

위에서 사용하고 있는 Counter 컴퍼넌트의 내용입니다만,
위의 2개의 예로 말하면 attrs.xa.context 에 { count: 0 } 가 세트 되고 있습니다.
여기 받은 (attrs, children) 그대로 CounterView(attrs, children)에 전달하고 있습니다만, 파라미터의 값을 부가하거나, 재기록하거나, 조작하고 싶을 때는 view에 건네주기 전에 여기에서 합니다.

src/components/Counter/index.js

import { CounterView } from './view';
import './view.styl';

export const Counter = (attrs, children) => CounterView(attrs, children);

src/components/Counter/view.jsx

여기 보았어요,
특히 보충은 없습니다 w

src/components/Counter/view.jsx

import { x } from 'xatto';

const down = context => ({ count: context.count - 1 });
const up = context => ({ count: context.count + 1 });

export const CounterView = ({ xa: { context }, ...attrs }, children) => (
  <div class="c-counter">
    <h1>{context.count}</h1>
    <button onclick={down}>-</button>
    <button onclick={up}>+</button>
  </div>
);

자바스크립트 경량 프레임워크 xatto 터치 보기