ReactJS-.JS 및 .JSX

ReactJS-.JS 및 .JSX

---

에서 일할 때 매우 혼란스러워하는 것이 있습니다 React.

인터넷 .js에는 반응이있는 파일 을 사용하는 많은 예제 가 있지만 다른 많은 .jsx파일을 사용 합니다.

.jsx파일 에 대해 읽었 으며 내 이해는 파일 안에 html 태그를 작성할 수 있다는 것 javascript입니다. 그러나 .js파일에도 같은 내용을 쓸 수 있습니다 .

그래서이 두 가지 확장 사이의 실제 차이는 무엇인가 .js와는 .jsx?

---

파일 확장자에 관해서는 없습니다. 번 들러 / 트랜스 파일러 / 무엇이 있는지 어떤 유형의 파일 내용이 해결되는지 처리합니다.

에 넣어 무엇을 결정할 때 다른 고려 사항은 그러나 있습니다 .js또는 .jsx파일 형식. JSX는 표준 JavaScript가 아니기 때문에 "일반적인"JavaScript가 아닌 것은 자체 확장 (예 : .jsxJSX 및 TypeScript) 으로 이동해야한다고 주장 할 수 .ts있습니다.

있어 좋은 토론은 여기 읽기 가능

---

대부분의 경우 트랜스 필러 / 번 들러 만 있으면 JSX 파일과 함께 작동하지 않고 JS와 함께 구성 할 수 있습니다! 따라서 JSX 대신 JS 파일을 사용해야합니다.

그리고 react는 자바 스크립트 라이브러리 일 뿐이므로 JSX 또는 JS 중에서 선택하는 데 아무런 차이가 없습니다. 그들은 완전히 교환 가능합니다!

경우에 따라 사용자 / 개발자는 코드 강조 표시로 인해 JS 대신 JSX를 선택할 수도 있지만 대부분의 최신 편집기는 JS 파일에서 반응 구문을 올바르게보고 있습니다.

---

JSX 태그 ( <Component/>)는 분명히 표준 자바 스크립트가 아니며 <script>예를 들어 알몸 태그 안에 넣으면 특별한 의미가 없습니다 . 따라서이를 포함하는 모든 React 파일은 JS가 아니라 JSX입니다.

일반적으로 React 애플리케이션의 진입 점은 React 컴포넌트가 포함되어 있지만 일반적으로 .jsx 대신 .js입니다. .jsx 일 수도 있습니다. 다른 JSX 파일은 일반적으로 .jsx 확장자를 갖습니다.

어쨌든 모호성이있는 이유는 궁극적으로 확장 프로그램이 실제로 JSX 인 한 모든 종류의 파일을 행복하게 처리하기 때문에 확장명이 중요하지 않기 때문입니다.

내 충고는 : 걱정하지 마십시오.

---

JSX 태그가 표준 자바 스크립트가 아니라는 언급 외에도 .jsx 확장자를 사용하는 이유는 Emmet이 여전히 편집기에서 작동하기 때문입니다. 예를 들어 HTML 코드를 확장하는 유용한 플러그인 (예 : ul> li)

<ul>
  <li></li>
</ul>

---

에어 비앤비 스타일 가이드 'eslint'에 따르면 JSX는 표준 자바 스크립트가 아닙니다.

    // filename: MyComponent.js
function MyComponent() {
  return <div />;
}

경고로, MyComponent.jsx 파일의 이름을 지정하면 eslint 규칙을 편집하지 않으면 여기 에서 스타일 가이드를 확인할 수없는 경우 전달 됩니다.

참고 URL : https://stackoverflow.com/questions/46169472/reactjs-js-vs-jsx