JSX는 무엇의 약자입니까?

JSX는 무엇의 약자입니까?

JSX는 무엇의 약자입니까?

ECMAScript에 대한 XML과 같은 구문 확장으로 정의된 JSX를 말하는 것입니다.이것은 ReactJs의 인기가 높아짐에 따라 매우 인기를 끌고 있습니다.

JSX는 JavaScript XML의 약자로, React에서는 요소 및 구성 요소에 대한 XML 유사 코드의 확장입니다.React 문서에 따라 그리고 말씀하신 대로:

JSX는 ECMAScript에 대한 XML과 같은 구문 확장으로 의미론 정의 없음

위의 인용문을 보면 JSX에는 정의된 의미가 없으며 단순함과 우아함을 위해 XML과 같은 코드를 작성할 수 있는 JavaScript의 확장일 뿐이며, 를 사용하여 JSX를 순수 JavaScript 함수 호출로 변환합니다.

JSX는 JavaScript에 XML 구문을 추가하는 프리프로세서 단계입니다.JSX 없이도 리액트를 사용할 수 있지만, JSX는 리액트를 훨씬 더 우아하게 만들어 줍니다.

XML과 마찬가지로 JSX 태그에도 태그 이름, 속성 및 하위 태그가 있습니다.속성값이 따옴표로 둘러싸인 경우 값은 문자열입니다.그렇지 않은 경우 값을 중괄호로 묶습니다.값은 동봉된 JavaScript 식입니다.

JSX는 JavaScript/ECMAScript를 사용합니다.,그러면요..LoginJSX를 사용하다

<Login foo={...} bar={...} />

보시는 바와 같이 JSX에서는 태그에 XML과 같은 구문을 사용할 수 있습니다.이 구문은 React 내의 컴포넌트와 요소를 나타냅니다.순수한 JavaScript로 번역됩니다.

React.createElement(Login, { foo: ..., bar: ... });

자세한 내용은 문서를 참조하십시오.

JSXJavaScript는 구문 확장을 나타냅니다.XML과 비슷합니다. 간단한 JSX 구문 변환을 React와 함께 사용할 수 있습니다.

JSX - JavaScript Syntax Extension XML 구문을 JavaScript에 추가하는 프리프로세서 단계

JSX는 XML과 유사한 구문을 사용하는 Javascript의 약자입니다.

 eg.
<div>
</div>
or <td>
</td>

동일한 XML 형식을 사용하여 정의된 클래스에 반환 형식으로 입력합니다.

JSX는 JavaScript XML(eXtensible Markup Language)의 약자입니다.

JSX는 JavaScript에서 통사설탕의 예 중 하나입니다.

통사설탕은 무언가를 읽거나 표현하기 쉽게 고안된 프로그래밍 언어 내의 구문이다.

JSX를 사용하여 작성된 구성 요소:

const MyComponent = () => { 
  return <div> 
    <p>This is not HTML...!</p> 
    <p>Wait...Is this JavaScript?</p> 
    <p>No, What the hell is this?</p> 
    <p>This is JSX.</p> 
  </div> 
} 

JXS를 사용하지 않는 경우 위의 코드 스니펫에 대응하는 코드는 다음과 같습니다.

const MyComponent = () => { 
  return React.createElement("div", null, React.createElement("p", null, "This is not HTML...!"), React.createElement("p", null, "Wait...Is this JavaScript?"), React.createElement("p", null, "No, What the hell is this?"), React.createElement("p", null, "This is JSX.")); 
};

상세보기:

통사당 - 위키백과

JSX 소개– 리액트

React Doc에 따르면:

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

이 재미있는 태그 구문은 문자열도 HTML도 아닙니다.

JSX라고 불리며 JavaScript에 대한 구문 확장입니다.

JSX가 하는 일은 React "요소"를 생성하는 것입니다. 하지만 어떻게요?

JSX는 JavaScript 컴파일러 Babel에 의해 컴파일되어 바닐라 javascript로 변환됩니다.

이것은 JSX를 사용하는 React의 클래스 컴포넌트입니다.

class Hello extends React.Component {
  render() {
    return <div>Bonjour {this.props.name}</div>;
  }
}

ReactDOM.render(
  <Hello name="momo" />,
  document.getElementById('root')
);

이것은 JSX가 없는 동일한 클래스컴포넌트입니다

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Bonjour ${this.props.name}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {name: 'momo'}, null),
  document.getElementById('root')
);

보시는 바와 같이 모든 JSX는 React.createElement()를 호출할 뿐입니다.따라서 JSX에서 할 수 있는 것은 플레인 JavaScript만으로 할 수 있습니다.그러나 코드를 보다 심플하게 하기 위해서는 JSX를 사용하는 것이 훨씬 좋습니다.

언급URL : https://stackoverflow.com/questions/39461805/what-does-jsx-stand-for