우아한 JSX

Yet Another Simple JSX using tagged template

언어의 한계가 곧 세계의 한계다 - Ludwig Wittgenstein

우아한 JSX가 vanilla JS 프로그래머들의 표현의 자유를 넓히고 세계를 넓히는데 도움이 되었으면 합니다

Example

import html from 'woowahan-jsx';

const state = {
  counter: 0,
};

const setCounter = val => {
  state.counter = val;
  render();
};

const containerClassName = 'counter-wrapper';

function render() {
  const $app = document.querySelector('#app');
  // myComponent는 HTMLElement 타입입니다.
  const myComponent = html`
    <div class="${containerClassName}">
      <button
        class="btn"
        onClick=${() => {
          setCounter(state.counter - 1);
        }}
      >
        -
      </button>
      <span>${state.counter}</span>
      <button
        class="btn"
        onClick=${() => {
          setCounter(state.counter + 1);
        }}
      >
        +
      </button>
    </div>
  `;
  $app.innerHTML = '';
  $app.appendChild(myComponent);
}

render();

장점

Prettier로 포매팅이 자동으로 됩니다.

스트링뿐만 아니라 함수나 DOM도 ${}에 넘길 수 있어요!! ^0^

onClick이나, onInput 같은 콜백 함수를 넘겨보세요. click 예제, input 예제

Child Component도 지원 합니다! ${} 안에다가 DOM Object 넣으면 렌더링 돼요! 예제

Child Component List 됩니다. Map 함수 써서 리액트 JSX 처럼 쓸 수 있어요. 예제

Install

타입스크립트, 자바스크립트 전부 지원해요

yarn add woowahan-jsx

Install (Copy & Paste)

타입스크립트 코드를 copy & paste 해서 쓰세요!

이 레포를 clone받고 yarn build 해서 나온 lib/index.js 를 가져가서 쓰세요