우아한 JSX
Yet Another Simple JSX using tagged template
언어의 한계가 곧 세계의 한계다 - Ludwig Wittgenstein
우아한 JSX가 캠퍼들의 표현의 자유를 넓히고 세계를 넓히는데 도움이 되었으면 합니다
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 를 가져가서 쓰세요
87 Nov 12, 2022
28 Nov 9, 2022
7 Nov 27, 2022
11 Dec 17, 2022
5 Nov 6, 2022
1 Dec 27, 2021
177 Dec 29, 2022
0 Oct 19, 2022
3 Oct 12, 2022
4 Feb 9, 2022
29 Aug 15, 2022
8.6k Jan 4, 2023
1.2k Nov 10, 2022
622 Dec 26, 2022
1.2k Dec 22, 2022
6 Apr 4, 2022
5 Mar 7, 2022
3 Apr 26, 2022