React의 .js, .tsx 및 .jsx의 차이점은 무엇입니까?

React의 .js, .tsx 및 .jsx의 차이점은 무엇입니까?

다음과 같은 3가지 주요 파일 유형이 있습니다.

• .js
• .tsx
• .jsx

3개의 차이점은 무엇입니까?어떤 것을 사용해야 할까요?어떤 것이 더 많이 사용됩니까?

• .jsJavaScript, 평소와 심플함

const Foo = () => {
    return React.createElement("div", null, "Hello World!");
};

• .tsTypeScript는 Microsoft가 JavaScript에 "구체적인" 유형을 추가하는 방법입니다.

const Foo: FunctionalComponent = () => {
    return React.createElement("div", null, "Hello World!");
};

• .jsxJavaScript 입니다만, JSX가 유효하게 되어 있습니다.이는 리액트의 언어 확장자로 마크업을 직접 쓸 수 있는 것입니다.이 확장자는 JSX가 직접 API 호출로 대체된 플레인 JavaScript로 컴파일 됩니다.React.createElement또는 대상 API에 관계없이

const Foo = () => {
    return <div>Hello World!</div>;
};

• .tsx는 JSX 언어 확장자를 가진 TypeScript라는 점을 제외하면 jsx와 유사합니다.

const Foo: FunctionalComponent = () => {
    return <div>Hello World!</div>;
};

이 모든 것이 JavaScript 코드로 컴파일 됩니다.자세한 내용은 "JSX 없이 반응"을 참조하십시오.

---

특정 확장자를 가지고 있다고 해서 파일이 실제로 그렇게 되는 것은 아닙니다(불쾌하게).나는 몇 가지 프로젝트와 마주쳤다..jsJSX 구문을 포함하는 파일 및 TypeScript를 포함하는 일부 파일의 확장자로 사용됩니다.

JS 파일은 JavaScript 파일 확장자로 순수 JavaScript로 만들어진 모든 모듈 및 코드 조각에 사용됩니다.리액트 기능을 사용하지 않지만 다른 리액트 컴포넌트 간에 사용되는 함수를 작성할 때는 JS 파일을 사용해야 합니다.

JSX는 React에서 사용하는 파일 구문 확장자로 컴포넌트를 렌더링하거나 CSS 파일을 Import하거나 React 후크를 사용할 수 있습니다.React 구성 요소를 렌더링할 때는 JSX 파일을 사용해야 합니다.

TSX는 JSX의 TypeScript 버전이고 TypeScript는 JavaScript에 정적 입력을 추가하는 슈퍼셋입니다.가능한 한 TypeScript를 사용해야 합니다.이는 코드 확장성 및 정적 타이핑의 많은 이점이 있기 때문입니다.

JS 파일은 JavaScript 파일 확장자이며 이는 완전한 Javascript 함수일 뿐입니다.

JSX는 React에서 사용하는 파일 구문 확장자로, 여기서 CSS와 Html도 사용할 수 있습니다.React 구성 요소를 렌더링할 때는 JSX 파일을 사용해야 합니다.

TSX는 JSX의 TypeScript 버전입니다.

언급URL : https://stackoverflow.com/questions/64343698/what-is-the-difference-between-js-tsx-and-jsx-in-react