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>

다른 언급 JSX은 표준 자바 스크립트 확장이 아닙니다. .js나머지 구성 요소를 기반으로 하여 응용 프로그램의 진입 점 이름을 지정하는 것이 좋습니다 .jsx.

.JSX모든 구성 요소의 파일 이름에 사용하는 중요한 이유가 있습니다. 실제로 코드가 많은 대규모 프로젝트에서 모든 React 구성 요소를 .jsx확장명으로 설정 하면 프로젝트 전체에서 다른 자바 스크립트 파일 (헬퍼, 미들웨어 등)을 탐색하는 것이 더 쉬울 것입니다. 다른 유형의 javascript 파일이 아닌 React Component

에어 비앤비 스타일 가이드 'eslint'에 따르면 JSX는 표준 JavaScript가 아닙니다.이 패턴을 고려할 수 있습니다.

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

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