JavaScript 프레임워크의 JSX 상태

Astro에서 지원하는 프레임워크와 특별 게스트인 Angular에 대해 논의할 예정입니다!

전설
🟢 탁월한 지원
🟡 보통 지원
🔴 부족한 지원

🔴 각도

분명히 우리의 특별 손님은 HTML, CSS 및 JS에 대해 별도의 파일을 사용하여 관심사 분리를 선호합니다. JSX는 이 독단적인 프레임워크에 절대적으로 "여기서는 발명되지 않았습니다".

제쳐두고: 이 규칙은 frowned upon by Vue 이지만 첫 번째 버전은 Angular의 전신인 AngularJS에서 영감을 받았습니다.

🟢 반응

brought up React에 의해 유명해진 JSX는 Reactland에서 물건을 만드는 사실상의 방법입니다.

재미있는 사실: React는 className 및 htmlFor 를 많이 사용하지만 "HTML 스타일"class 및 for은 일반적으로 다른 프레임워크에서도 작동합니다.

🟢 프리액트

우리의 작고 귀여운 React Wannabe가 활발히 활동하고 있습니다publicizes itself as an alternative to React. JSX도 완벽하게 지원합니다. 그러나 원하는 경우 할 수도 있습니다go the lit way.

🔴 날씬한

컴파일러 기반 프레임워크인 Svelte는 마법을 달성하기 위해 템플릿 구문에 크게 의존하므로 JSX는 사용할 수 없습니다.

그러나 Svelte Language Tools은 svelte2tsx을 통해 유형 검사를 위해 JSX를 활용합니다.

🔴 알파인

일반 웹 사이트를 개선하기 위한 드롭인 라이브러리로 우선 순위가 지정되며 컴파일러를 가정하는 JSX와 함께 사용하는 것이 아닙니다.

🟡 뷰

템플릿(또는 SFC)이 Vue 구성 요소를 작성하는 주된 방법이지만 Vue 2 및 Vue 3 모두에 대해 적절한 JSX 지원도 제공됩니다.

Vue의 보다 정교한 JSX 변환에는 esbuild/SWC가 제공하는 속도 향상을 거부하는 Babel이 필요합니다. 또한 JSX로 작성된 구성 요소는 핫 모듈 교체로 로컬 상태를 유지하지 않습니다.

언급할 가치가 있는 것은 Svelte와 마찬가지로 VSCode용 Vue 확장인 Volarimplements type checking as JSX입니다.

🔴 점등

Lit는 웹 구성 요소를 위해 탄생했으며 JSX와 잘 어울리지 않습니다. 기술적으로 JSX를 LitElement로 트랜스파일할 수 있지만 패스하겠습니다.

🟢 솔리드

JSX는 Solid의 일급 시민이며 편리하게도 있습니다helpers to write control flows in JSX.

Solid의 JSX 변환은 Babel을 사용하므로 Vue JSX와 동일한 "고정"을 갖습니다.

🟡 바닐라

물론 프레임워크 없이 JSX를 사용할 수 있습니다! 그것이 MobX JSX , dom-chef 또는 jsx-dom 이든, 그것은 집에서 바로 느껴져야 합니다.

어떻게 보느냐에 따라 일반 DOM 요소를 생성하기 때문에 Solid도 바닐라로 분류될 수 있습니다.

무엇을 제공합니까?

나는 에 대해 논쟁하지 않을 것이지만, 나에게 JSX의 가장 큰 이점은 일반적인 변수로 구성 요소를 간단하게 구성할 수 있다는 것입니다.

const Component = () => <div>Look mum, no SFCs!</div>

JSX의 다른 이점으로는 내장 편집기 지원( Volar 과 같은 플러그인이 필요하지 않음), (vue-tsc 과 같은 해결 방법이 필요하지 않음) 일류 유형 검사 지원 및 generic components 에 대한 더 나은 지원이 있습니다. 이는 템플릿 DSL이 인체공학적인 개발 경험을 위해 만드는 절충안입니다.

👋 Hi DEV Community! My second post here, hope you find it more informative than 🙈.
The first version of this post is written at the end of March, posted on my Notion page, hence the old screenshot of Astro homepage. Nonetheless, I added new content and restructured it for easier consuming. Suggestions are very much appreciated ✨!