[React] JSX를 JavaScript로 번역해주는 사이트SX를 JavaScript로 번역해주는 사이트

[ 트랜스 파일링과 번들링 ]

 

• Transpiling : 웹 브라우저가 리액트를 실행하면 아래 코드처럼 번역되어 순수 JavaScript를 읽어 실행되는 과정
• Bundling : 빌드 시, dist라는 폴더 안에 js파일이 하나 생김 → 소스 코드의 파일들을 압축해서 넣은 것
• => 번들링을 통해 압축된 번들 파일을 빠르게 읽을 수 있게 됨.

[ 브라우저가 리액트를 읽는 과정 ]

JSX 파일  ---(Transpiling)→ 순수 JavaScript로 번역 ---(Bundling)→ 웹 브라우저가 다운받기 좋게 묶음으로 변환

 

 

---

 

[ 사이트 소개 ]

https://esbuild.github.io/try/

esbuild - Try in the browser

esbuild : 옵션과 리액트 코드를 입력하면 순수 JavaScript 코드로 변환해줌

 

 

[ 사이트 사용법 ]

=> 옵션

--loader=jsx

 

=> 리액트 코드

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

 

=> 옵션과 리액트 코드를 입력하였을 때 번역된 JavaScript

function Button({ onClick, children }) {
  return /* @__PURE__ */ React.createElement("button", { onClick }, children);
}