JSX 반응
기존의 사용 JSX 자바 스크립트를 대체하는 반응.
XML은 자바 스크립트 구문의 확장처럼 JSX 보인다.
우리는 반드시 JSX를 사용하지 않지만, 그것은 다음과 같은 장점이있다 :
- 이 최적화 후 자바 스크립트 코드로 컴파일되어 있기 때문에 JSX 빠르게 실행합니다.
- 그것은 입력 안전, 그것은 컴파일 오류 중에 발견 할 수있다.
- JSX 제작 템플릿 쉽고 빠르게 사용합니다.
사용 JSX
JSX 우리가 예를 볼 수 있습니다, HTML과 유사합니다
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
우리는 여러 HTML 태그 위의 코드에서 중첩 될 수 있습니다, 당신은, 인스턴스 페이지 요소는 사용자 정의 사용자 정의 속성데이터 - 접두사를 사용할 필요가 추가, 데이터 myattribute 속성추가합니다 그것을 둘러싼 div 요소를 사용해야합니다.
ReactDOM.render(
<div>
<h1>本教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);
독립 파일
내 반작용 JSX 코드는 예를 들어, 우리가 만들고 별도의 문서에 배치 될 수 helloworld_react.js 다음과 같이 파일 :
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
그런 다음, HTML 파일에서 JS 파일 도입 :
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
자바 스크립트 표현식
우리는 JSX에서 자바 스크립트 표현식을 사용할 수 있습니다. 중괄호의 표현을 쓰기{}.다음 예는 다음과 같다 :
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
JSX의다른 문이 하나 대신 조건부 (삼항 연산자)식을 사용할 수있는경우사용할 수 없습니다. 만약 i 값을 수정하면 변수I에 해당한 브라우저가출력,동일하면 다음의 예, 그것을 출력잘못된 것이다.
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
스타일
인라인 스타일을 사용하는 것이 좋습니다 반응한다. 우리는 반응한다. 인라인 스타일을 설정하는CamelCase를 구문을 사용하여 지정된 요소 번호 후 자동으로 픽셀을추가 할 수 있습니다. 다음의 예는H1 요소 myStyle 인라인스타일을 추가하는 방법을 보여줍니다 :
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>本教程</h1>,
document.getElementById('example')
);
주의
다음과 같이 괄호로 작성해야 참고, 예는 다음과 같습니다
ReactDOM.render(
<div>
<h1>本教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
배열
JSX 템플릿 배열에 삽입, 배열이 자동으로 모든 회원에게 확대 할 수 있습니다 :
var arr = [
<h1>本教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
HTML 태그 어셈블리 반응 대
HTML 태그 (문자열) 렌더링 또는 구성 요소 (클래스) 반응 할 수있는 반응한다.
HTML 태그를 렌더링하려면, 그냥 JSX에서 소문자로 태그 이름을 사용합니다.
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
구성 요소 반응 렌더링하려면 대문자와 지역 변수 시작을 만들 수 있습니다.
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
JSX 지역 부품 및 HTML 태그의 클래스를 구분하기 위해 대문자와 소문자 규칙을 사용하여 반응한다.
참고 :
JSX 자바 스크립트와 같은 식별자의 숫자이기 때문에
class와forXML 속성 이름으로 권장되지 않습니다. 대안으로, DOM 사용 반작용className및htmlFor해당 속성을한다.