반응 jsx는 무엇입니까-JS 튜토리얼-php.cn

반응 jsx는 무엇입니까

藏色散人

풀어 주다： 2020-11-30 15:54:35

원래의

2156명이 탐색했습니다.

react jsx는 XML과 매우 유사한 JavaScript 구문 확장입니다. React는 JSX를 사용하여 일반 JavaScript를 대체합니다. 1. JSX는 더 빠르게 실행됩니다. 2. 유형이 안전하며 컴파일 프로세스 중에 처리됩니다. 3. JSX를 사용하여 템플릿을 작성하는 것이 더 빠릅니다.

반응 jsx는 무엇입니까

이 튜토리얼의 운영 환경: windows10 시스템, React16, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

추천: "Programming Video"

React JSX

React는 JSX를 사용하여 일반 JavaScript를 대체합니다.

JSX는 XML과 매우 유사한 JavaScript 구문 확장입니다.

꼭 JSX를 사용할 필요는 없지만 다음과 같은 장점이 있습니다.

JSX는 JavaScript 코드로 컴파일한 후 최적화하기 때문에 실행 속도가 더 빠릅니다.
유형이 안전하며 컴파일 과정에서 오류가 발견될 수 있습니다.
JSX를 사용하여 템플릿을 작성하는 것이 더 쉽고 빠릅니다.

먼저 다음 코드를 살펴보겠습니다.

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

로그인 후 복사

조금 이상하게 보일 수 있습니다. 태그 구문은 문자열도 HTML도 아닙니다.

자바스크립트의 구문 확장인 JSX라고 합니다. React에서 사용자 인터페이스를 설명하려면 JSX를 사용하는 것이 좋습니다.

JSX는 JavaScript 내부에서 구현됩니다.

우리는 요소가 React 애플리케이션을 구성하는 가장 작은 단위이며 JSX는 React에서 요소를 선언하는 데 사용된다는 것을 알고 있습니다.

브라우저 DOM 요소와 달리 React의 요소는 실제로 일반 객체입니다. React DOM은 브라우저 DOM의 데이터 콘텐츠가 React 요소와 일치하는지 확인할 수 있습니다.

React 요소를 루트 DOM 노드로 렌더링하려면 두 요소를 ReactDOM.render() 메서드에 전달하여 페이지에 렌더링합니다.

React 인스턴스

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById(&#39;example&#39;));

로그인 후 복사

참고:

JSX는 JavaScript이므로 다음과 같은 일부 식별자는 class 및 for는 XML 속성 이름으로 권장되지 않습니다. 대신 React DOM은 해당 속성에 className 및 htmlFor를 사용합니다.

JSX 사용

JSX는 아래 예를 보면 알 수 있습니다.

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById(&#39;example&#39;)
);

로그인 후 복사

위 코드에서는 여러 HTML 태그를 중첩할 수 있습니다. 예에서는 p 요소를 사용하여 래핑해야 합니다. 자체 추가 data-myattribute 속성을 정의하고 data- 접두사를 사용하여 사용자 정의 속성을 추가합니다.

React 인스턴스

ReactDOM.render(
    <div>
    <h1>PHP中文网</h1>
    <h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

로그인 후 복사

별도의 파일

React JSX 코드를 별도의 파일에 배치할 수 있습니다. 예를 들어 다음 코드를 사용하여 helloworld_react.js 파일을 생성합니다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(&#39;example&#39;)
);

로그인 후 복사

그런 다음 HTML 파일에 JS 파일을 삽입합니다. :

React 예시

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

로그인 후 복사

JavaScript Expression

JSX에서는 JavaScript 표현식을 사용할 수 있습니다. 표현식은 중괄호 {} 안에 작성됩니다. 예시는 다음과 같습니다.

React 예시

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

로그인 후 복사

JSX에서는 else 문을 사용할 수 없지만 조건식(삼항 연산) 표현식을 대신 사용할 수 있습니다. 다음 예에서 변수 i가 1이면 브라우저는 true를 출력하고, i 값이 수정되면 false를 출력합니다.

React 예시

ReactDOM.render(
    <div>
      <h1>{i == 1 ? &#39;True!&#39; : &#39;False&#39;}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

로그인 후 복사

Style

React에서는 인라인 스타일 사용을 권장합니다. CamelCase 구문을 사용하여 인라인 스타일을 설정할 수 있습니다. React는 요소 번호를 지정한 후 자동으로 px를 추가합니다. 다음 예에서는 h1 요소에 myStyle 인라인 스타일을 추가하는 방법을 보여줍니다.

React 인스턴스

var myStyle = {
    fontSize: 100,
    color: &#39;#FF0000&#39;
};
ReactDOM.render(
    <h1 style = {myStyle}>PHP中文网</h1>,
    document.getElementById(&#39;example&#39;)
);

로그인 후 복사

Comments

주석은 중괄호로 작성해야 하며 예는 다음과 같습니다.

React 인스턴스

ReactDOM.render(
    <div>
    <h1>PHP中文网</h1>
    {/*注释...*/}
     </div>,
    document.getElementById(&#39;example&#39;)
);

로그인 후 복사

Array

JSX 템플릿 배열에 삽입을 허용하면 배열이 자동으로 모든 멤버를 확장합니다.

React 인스턴스

var arr = [
  <h1>PHP中文网</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById(&#39;example&#39;)
);

로그인 후 복사

위 내용은 반응 jsx는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

반응 jsx는 무엇입니까