ReactJs JS (가상 DOM)를 JSX로 변환 할 수 있습니까? 예) ES5 ~ ES6

Question

가상 DOM 방법을 사용하여 reactjs 스크립트를 작성했습니다. 이제 JSX 형식으로 변환해야합니다. 이 변환에 사용할 수있는 도구 또는 플러그인이 있습니까?

예 :

var profile = <div> 
<img src="avatar.png" className="profile" /> 
<h3>{[user.firstName, user.lastName].join(' ')}</h3> 
</div>; 

참고

var profile = React.createElement("div", null, 
React.createElement("img", { src: "avatar.png", className: "profile" }), 
React.createElement("h3", null, [user.firstName, user.lastName].join(" ")) 
); 

에서 : 바벨 공식 웹 사이트는 JS에 JSX 변환된다.

Answer 1

react-codemod을 확인하십시오.

.createElement 호출을 jsx 요소로 변환하는 create-element-to-jsx 스크립트가이 패키지에 포함되어 있습니다.

당신은 (링크에서 인용)과 같이 사용할 수 있습니다 :

jscodeshift -t react-codemod/transforms/create-element-to-jsx.js <path>