반응 jsx는 무엇입니까
- 藏色散人원래의
- 2020-11-10 11:47:262210검색
react jsx는 XML과 매우 유사한 JavaScript 구문 확장입니다. React는 JSX를 사용하여 일반 JavaScript를 대체합니다. 1. JSX는 더 빠르게 실행됩니다. 2. 유형이 안전하며 컴파일 프로세스 중에 처리됩니다. 3. 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('example'));
참고:
JSX는 JavaScript이므로 다음과 같은 일부 식별자는 class 및 for는 XML 속성 이름으로 권장되지 않습니다. 대신 React DOM은 해당 속성에 className 및 htmlFor를 사용합니다.
JSX 사용
JSX는 아래 예를 보면 알 수 있습니다.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);위 코드에서는 여러 HTML 태그를 중첩할 수 있습니다. 예에서는 p 요소를 사용하여 래핑해야 합니다. 자체 추가 data-myattribute 속성을 정의하고 data- 접두사를 사용하여 사용자 정의 속성을 추가합니다.
React 인스턴스
ReactDOM.render(
<div>
<h1>PHP中文网</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);별도의 파일
React JSX 코드를 별도의 파일에 배치할 수 있습니다. 예를 들어 다음 코드를 사용하여 helloworld_react.js 파일을 생성합니다.
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
그런 다음 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('example')
);JSX에서는 else 문을 사용할 수 없지만 조건식(삼항 연산) 표현식을 대신 사용할 수 있습니다. 다음 예에서 변수 i가 1이면 브라우저는 true를 출력하고, i 값이 수정되면 false를 출력합니다.
React 예시
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);Style
React에서는 인라인 스타일 사용을 권장합니다. CamelCase 구문을 사용하여 인라인 스타일을 설정할 수 있습니다. React는 요소 번호를 지정한 후 자동으로 px를 추가합니다. 다음 예에서는 h1 요소에 myStyle 인라인 스타일을 추가하는 방법을 보여줍니다.
React 인스턴스
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>PHP中文网</h1>,
document.getElementById('example')
);Comments
주석은 중괄호로 작성해야 하며 예는 다음과 같습니다.
React 인스턴스
ReactDOM.render(
<div>
<h1>PHP中文网</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);Array
JSX 템플릿 배열에 삽입을 허용하면 배열이 자동으로 모든 멤버를 확장합니다.
React 인스턴스
var arr = [
<h1>PHP中文网</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);위 내용은 반응 jsx는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!