JSX 문법 기초 (1)
JSX 구문
설명: jsx 문법 html 코드와 js 코드는 혼사할 수 있고 인용부호를 붙이지 않아도 된다. 이렇게 할 수 있는 이유는 React와 jsx 코드를 컴파일한 후에 코드를 정확하게 운행하기 때문이다.물론 jsx도 그 자체의 규칙이 있습니다: js 코드는 {}로 묶여서React 컴파일 규칙이 필요합니다: 만나다
Document
const person = {
name: 'huruqing',
age: 108
};
const element =
<h1>
<p> : {person.name}</p>
<p> : {person.age} </p>
</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
JSX는 React의 핵심 구성 부분으로 XML 표기 방식을 사용하여 인터페이스를 직접 성명하고 인터페이스 구성 요소 간에 서로 끼워 넣을 수 있다.JS에서 XML과 유사한 언어를 작성하고 속성 트리 구조(DOM 구조)를 정의하는 문법으로 이해할 수 있다. 브라우저나 엔진에서 실현하는 것이 아니라 각종 컴파일러를 통해 이 표기를 표준적인 JS 언어로 컴파일하는 것이 목적이다.JSX 문법을 사용한 후, 당신은 반드시 Babel의 JSX 해석기를 도입하여 JSX를 JS 문법으로 전환시켜야 합니다. 이 작업은 Babel이 자동으로 완성합니다.동시에 바벨을 도입하면 새로운 es6 문법을 사용할 수 있습니다. 바벨은 es6 문법을 es5 문법으로 전환시켜 더 많은 브라우저를 호환할 수 있습니다.예:
Hello React!
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
그중
Hello,world은 jsx 문법을 사용했다.HTML 언어는 JavaScript 언어에 직접 쓰이고 인용부호를 넣지 않습니다. 이것이 바로 JSX의 문법입니다. HTML과 JavaScript의 혼용을 허용합니다.JavaScript로 전환하면 다음과 같습니다.
ReactDOM.render(
React.DOM.h1(null,'hello,world!'),
document.getElementById('example')
);
ReactDOM.render(
React.DOM.h1(null,'hello,world!'),
document.getElementById('example')
);
<li>모두 세 개의 라이브러리를 사용했습니다:react.js 、react-dom.js와browser.min.js, 우선 불러와야 합니다.여기서 react.js는React의 핵심 라이브러리,react-dom입니다.js는 DOM과 관련된 기능을 제공하는 브라우저입니다.min.js의 역할은 JSX 문법을 JavaScript 문법으로 바꾸는 것입니다.lt;br> <em>ReactDOM.render는 React의 가장 기본적인 방법으로 템플릿을 HTML 언어로 바꾸고 지정한 DOM 노드를 삽입합니다.lt;/em><br> JSX 기본 문법 규칙: <br> JSX 자체는 XML 구문과 유사하며 속성과 하위 요소를 정의할 수 있습니다.특히 괄호를 사용하여 JavaScript 표현식을 추가할 수 있습니다.HTML 탭 (< 시작) 을 만나면 HTML 규칙으로 해석합니다.코드 블록 ({로 시작) 을 만났을 때 자바스크립트 규칙으로 해석합니다. & lt;/li >
</ul>
<pre><code>var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
</code></pre>
<p>이것은 간단한 html과 js를 혼용하는 예이다.arr 변수에는 html 요소가 존재하고div에는 arr라는 js 변수를 사용했다.순수한 자바스크립트로 전환하면: </p>
<pre><code>var h1=React.DOM.h1(null,'Hello world!');
var h2=React.DOM.h1(null,'React is awesome');
var div=React.DOM.div(null,h1,h2);
ReactDOM.render(
div,
document.getElementById('example')
);
</code></pre>
<p>React 구성 요소 <br> 우리는 jsx를 사용하여 코드를 React 구성 요소로 봉한 다음 일반 HTML 탭을 삽입하는 것처럼 다른 곳에 이 구성 요소를 삽입합니다.React를 사용합니다.createClass는 구성 요소를 생성하는 데 사용됩니다. </p>
<pre><code>var MyComponent=React.createClass({
render: function() {
return <h1>Hello world!</h1>;
}
});
ReactDOM.render(
<MyComponent/>,
document.getElementById('example')
);
</code></pre>
<p>위 코드에서 변수 MyComponent는 하나의 구성 요소 클래스입니다.템플릿 삽입 <MyComponent/> MyComponent의 인스턴스가 자동으로 생성됩니다(아래 "어셈블리"는 어셈블리 클래스의 인스턴스를 가리킵니다).모든 구성 요소 클래스는 구성 요소를 출력하는 데 사용할render 방법이 있어야 합니다.lt;/p>
<blockquote>
<p>React는 HTML 태그(strings)나 React 구성 요소(classes)를 렌더링할 수 있습니다.lt;/p>
<ul>
<li>react에서 일반적으로 구성 요소 클래스의 첫 번째 자모는 반드시 대문자로 하고 html 라벨은 모두 소문자로 약정합니다.lt;/li>
</ul>
</blockquote>
<pre><code>//HTML 태그를 렌더링하려면 JSX에서 소문자로 시작하는 태그 이름을 사용합니다.
var myDivElement = <div className="foo"/>;
React.render(myDivElement, document.getElementById('example'));
//React 어셈블리를 렌더링하려면 대문자로 시작하는 로컬 변수를 만듭니다.
var MyComponent = React.createClass({/.../});
var myElement = <MyComponent />;
React.render(myElement, document.getElementById('example'));
* 어셈블리 클래스에는 최상위 레이블이 하나만 포함될 수 있으며 그렇지 않으면 오류가 발생합니다.
//var myDivElement =<h1>안녕하세요h1><h1>hello</h1>;
//위의 표기법은 틀릴 수 있으니 맨 윗부분 라벨만 써야 한다.
var myDivElement =<div><h1>안녕하세요h1><h1>hello</h1></div>;
</code></pre>
<h3>동적 구성 요소 실례: </h3>
<pre><code>var MyComponent=React.createClass({
getInitialState: function() {
return {clickNum: 0};
},
handleClick:function(){
var num=this.state.clickNum;
num++;
this.setState({clickNum:num});
},
render: function() {
return (
<div>
<h1 onClick={this.handleClick}>Hello {this.props.name}!</h1>
<h2 style={{color:'red'}}>클릭 {this.props.name} 횟수: {this.state.clickNum} <h2>
</div>
);
}
});
ReactDOM.render(
<div>
<MyComponent name = "장삼"/>
<hr/>
<MyComponent name = "이사"/>
</div>,
document.getElementById('example')
);
</code></pre>
<p>위 코드에 정의된 MyComponent 구성 요소는 속성, 상태, 이벤트를 포함하여 비교적 간단한 완전한 구성 요소입니다.props를 사용하여 부모 구성 요소를 통해 값을 전달하고state를 사용하여 구성 요소 자체의 상태를 정의합니다. 구성 요소가 지원하는 대부분의 DOM 작업 이벤트입니다.lt;/p>
<blockquote>
<ul>
<li>속성props:<br> class 속성은 className으로 쓰고 for 속성은 htmlFor로 써야 합니다. 이것은 class와 for가 자바스크립트의 보존자이기 때문입니다.lt;br> 탭에 스타일 속성을 직접 사용할 때 스타일={{}}이라고 쓰려면 두 개의 큰 괄호이고, 바깥쪽 큰 괄호는 jsx가 여기 js 문법이라는 것을 알려주는 것입니다. 실제 DOM과 달리 속성 값은 문자열이 아니라 대상이 되어야 합니다. 주의해야 할 것은 속성 이름도 낙타봉 명명법이 필요합니다.즉 Margin-top은 MarginTop으로 써야 한다.lt;br> this.props.children은 대상의 속성 이름으로 children을 사용하지 않습니다.왜냐하면this.props.children에서 가져온 이 탭 아래의 모든 하위 탭입니다.this.props.children의 값은 세 가지가 있습니다. 현재 구성 요소에 하위 노드가 없으면, 이것은undefined입니다.만약 하위 노드가 있다면 데이터 형식은object입니다.만약 여러 개의 하위 노드가 있다면 데이터 형식은array입니다.그래서this를 처리합니다.props.children 때 조심해야 돼.정부에서 React를 사용하는 것을 건의합니다.Children.map은 하위 노드를 훑어보며 데이터 형식은 걱정하지 마십시오 </li>
<li>상태state:<br> 구성 요소는 사용자와 상호작용을 해야 한다. React는 구성 요소를 하나의 상태기로 보고 처음에는 초기 상태가 있고 사용자가 상호작용을 해서 상태 변화를 초래하여 UI를 다시 렌더링한다.lt;br> getInitialState 방법은 초기 상태, 즉 하나의 대상을 정의하는 데 사용되며, 이 대상은this를 통과할 수 있습니다.state 속성 읽기.사용자가 구성 요소를 클릭하면 상태 변화,this.setState 방법은 상태 값을 수정하고 매번 수정할 때마다this를 자동으로 호출합니다.render 방법으로 구성 요소를 다시 렌더링합니다.lt;br> 때문에this.props와this.state는 구성 요소의 특성을 설명하는 데 사용되며 혼동이 발생할 수 있습니다.간단한 구분 방법은,this.props는 일단 정의되면 변하지 않는 특성을 나타낸다.this.state는 사용자의 상호작용에 따라 변화하는 특성입니다.lt;/li>
</ul>
</blockquote>
</article>
</div>
</div>
</div>
<!--PC와 WAP 어댑터 - >
<div id="SOHUCS"sid="1296892193109254144"></div>
<script type="text/javascript"src="/views/front/js/chanyan.js">
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
