React JS -JS와 .JSX의 비교

React JS -JS와 .JSX의 비교

일을 할 때 매우 혼란스러운 점이 있다.React.js.

인터넷에는 다음과 같은 예를 많이 볼 수 있습니다..js파일링React하지만 다른 많은 사람들은.jsx파일을 표시합니다.

에 대해 읽은 적이 있습니다.JSX파일, 그리고 제가 알기로는 그것들은 단지 당신이 쓸 수 있게 해준다는 것입니다.HTML태그가 내장되어 있다JavaScript. 하지만 같은 내용이 입력될 수 있습니다.JS파일도 참조해 주세요.

그럼 실제적인 차이는 무엇일까요?.js그리고..jsx?

파일 확장자에 관해서는 없습니다.번들러/트랜스파일러/무엇이든 파일 컨텐츠의 종류를 해결합니다.

단, 어떤 것을 도입할지를 결정할 때는 다른 고려사항이 몇 가지 있습니다..js또는.jsx파일 형식.JSX는 표준 자바스크립트가 아니기 때문에 "보통" 자바스크립트가 아닌 것은 모두 자체 확장자로 들어가야 한다고 주장할 수 있다..jsxJSX 및.ts예를 들어 TypeScript의 경우.

여기 좋은 토론이 있습니다.

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

react는 javascript용 라이브러리이기 때문에 JSX와 JS 중 하나를 선택해도 상관없습니다.완전히 호환이 가능합니다!

코드 강조 표시 때문에 사용자/개발자가 JS보다 JSX를 선택하는 경우도 있지만, 대부분의 새로운 에디터는 JS 파일에서 반응 구문을 올바르게 보고 있습니다.

JSX 태그(<Component/>)는 표준 Javascript가 아닌 것이 분명하며, 나체 안에 넣어도 특별한 의미가 없습니다.<script>예를 들어 태그를 지정합니다.따라서 이러한 파일을 포함하는 모든 React 파일은 JS가 아닌 JSX입니다.

일반적으로 React 응용 프로그램의 시작점은 React 구성 요소를 포함하더라도 .jsx가 아닌 .js입니다..jsx일 수도 있습니다.다른 모든 JSX 파일의 확장자는 보통 .jsx입니다.

어떤 경우에도 애매한 이유는 트랜스필러가 실제로 JSX인 한 어떤 종류의 파일도 즐겁게 처리할 수 있기 때문에 궁극적으로 확장자는 크게 문제가 되지 않기 때문입니다.

제 조언은 "걱정하지 마세요"입니다.

다른 것과 같이JSX는 표준 Javascript 확장자가 아닙니다.어플리케이션의 엔트리 포인트의 이름을 다음과 같이 지정하는 것이 좋습니다..js컴포넌트는 '나머지 컴포넌트'를할 수 ..jsx.

왜 요..JSX이치노실제로큰를 실실로 하면 React가 ..jsx프로젝트 전체에서 다른 Javascript 파일(헬퍼, 미들웨어 등)을 탐색하는 것이 더 쉬워집니다.또한 이 파일은 다른 유형의 Javascript 파일이 아닌 React 컴포넌트임을 알 수 있습니다.

언급했듯이, 파일 시 작성 시 ..jsx ★★★★★★★★★★★★★★★★★」.js.

또 ..jsx컴포넌트 작성 중.

이는 필수가 아니라 우리가 따를 수 있는 아키텍처 접근법입니다.따라서 대규모 프로젝트에서는 컴포넌트를 프레젠테이션 컴포넌트 또는 컨테이너 컴포넌트로 나눕니다.컨테이너 컴포넌트에는 컴포넌트의 데이터를 가져와 프레젠테이션 컴포넌트를 소품으로 렌더링하는 로직이 기재되어 있습니다.프레젠테이션 컴포넌트에서는 보통 기능 로직을 쓰지 않고 프레젠테이션 컴포넌트는 필요한 소품으로 UI를 표현하기 위해 사용됩니다.

즉, 리액트 문서에서 JSX에 대한 정의를 확인합니다.

이렇게 써있네요.

 const element = <h1>Hello, world!</h1>;

이것은 JSX라고 불리며 JavaScript에 대한 구문 확장입니다.이를 React와 함께 사용하여 UI의 모양을 설명하는 것이 좋습니다.JSX는 템플릿 언어를 연상시키지만 JavaScript의 강력한 기능을 제공합니다.

JSX는 React "요소"를 생성합니다.마크업과 로직을 별도의 파일에 넣어 인위적으로 기술을 분리하는 대신, React는 두 가지를 모두 포함하는 "구성 요소"라고 불리는 느슨하게 결합된 단위로 문제를 분리한다.

React는 JSX를 사용할 필요가 없지만 대부분의 사람들은 JavaScript 코드 내에서 UI로 작업할 때 시각적으로 도움이 됩니다.또한 React는 보다 유용한 오류 및 경고 메시지를 표시할 수 있습니다.

'.수를 UI와 .js파일에는 데이터를 가져오는 논리가 포함되어 있습니다.

규칙을 수 .jsx ★★★★★★★★★★★★★★★★★」.js논리적으로나 물리적으로 코드를 분리할 수 있습니다.

JSX 태그가 표준 javascript가 아니라는 것 외에, 제가 .jsx 확장자를 사용하는 이유는, 이 확장자를 사용하면 Emet이 에디터에서 여전히 기능하기 때문입니다.예를 들어, HTML 코드를 ul>li로 확장하는 편리한 플러그인이 있습니다.

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

JSX는 표준 JavaScript가 아닙니다. Airbnb 스타일 가이드 'eslint'는 이 패턴을 고려할 수 있습니다.

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

경고로서 파일명을 MyComponent.jsx로 지정하면 합격입니다.eslint 규칙을 편집하지 않는 한 스타일 가이드를 여기에서 확인할 수 있습니다.

왜 JSX일까요?React는 렌더링 로직이 본질적으로 다른 UI 로직과 결합되어 있다는 사실을 수용합니다.이거는 이벤트 처리 방법, 시간이 지남에 따라 상태 변화, 데이터 표시 준비 방식입니다.

마크업과 로직을 별도의 파일에 넣어 인위적으로 기술을 분리하는 대신, React는 두 가지를 모두 포함하는 "구성 요소"라고 불리는 느슨하게 결합된 단위로 문제를 분리한다.다음 섹션에서 컴포넌트에 대해 다시 설명하겠지만 아직 JS에 마크업을 넣는 것이 익숙하지 않다면 이 이야기를 통해 다른 점을 납득할 수 있을 것입니다.

React는 JSX를 사용할 필요가 없지만 대부분의 사람들은 JavaScript 코드 내에서 UI로 작업할 때 시각적으로 도움이 됩니다.또한 React는 보다 유용한 오류 및 경고 메시지를 표시할 수 있습니다.

상세한 것에 대하여는, JSX 에 관한 리액트 문서를 참조해 주세요.https://reactjs.org/docs/introducing-jsx.html

언급URL : https://stackoverflow.com/questions/46169472/reactjs-js-vs-jsx