React 입문 소감 (1)
6944 단어 전단
ReactDOM. render 는 React 의 가장 기본 적 인 방법 으로 템 플 릿 을 HTML 언어 로 바 꾸 고 지정 한 DOM 노드 를 삽입 하 는 데 사용 된다.
ReactDOM.render(
Hello, world!,
document.getElementById('root')
);
HTML 언어 는 자바 스 크 립 트 언어 에 직접 쓰 이 고 따옴표 가 붙 지 않 습 니 다. 이것 이 바로 JSX 의 문법 입 니 다. HTML 과 자바 스 크 립 트 의 혼합 을 허용 합 니 다.
JSX 의 기본 문법 규칙: HTML 탭 (< 시작) 을 만나면 HTML 규칙 으로 해석 합 니 다.코드 블록 ({로 시작) 을 만나면 자 바스 크 립 트 규칙 으로 해석 합 니 다.
ReactDOM.render 기능 은 구성 요 소 를 렌 더 링 하고 DOM 트 리 를 구성 한 다음 에 페이지 의 특정한 요소 에 삽입 하 는 것 입 니 다 (여 기 는 id 가 루트 인 div 요소 입 니 다).JSX 에 대해 기억 하 세 요:
1. JSX 는 JavaScript 언어의 문법 확장 으로 HTML 처럼 생 겼 지만 HTML 이 아 닙 니 다.
2. React. js 는 JSX 로 구성 요소 가 어떻게 생 겼 는 지 설명 할 수 있 습 니 다.
3. JSX 는 컴 파일 할 때 해당 하 는 JavaScript 대상 설명 이 됩 니 다.
4. react - dom 은 UI 정 보 를 설명 하 는 자 바스 크 립 트 대상 을 DOM 요소 로 바 꾸 고 페이지 에 렌 더 링 합 니 다.
다음은 JS 부분 코드
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends Component {
render () {
return (
hello Armor
)
}
}
ReactDOM.render(
,
document.getElementById('root')
)在上面这个示例中，需要一个HTML部分，只用给div中添加相应的id,
<div id='root'>
div>그 다음 에 JS 코드 에서 Header 계승
Component 클래스 를 정의 하고 render 방법 으로 HTML 을 되 돌려 줍 니 다. 이 HTML 기록 ReactDOM.render 에 id 가 'root' 인 html 에 삽입 하여 렌 더 링 할 수 있 습 니 다.표현 식 삽입
괄호 {} 로 javascript 의 표현 식, 함수, 변수, 표현 식 계산, 함수 실행 등 을 삽입 할 수 있 습 니 다.
render 이 코드 들 이 되 돌아 오 는 내용 을 페이지 에 그대로 보 여 주 며 태그 의 속성 에 도 사용 할 수 있 습 니 다. 예 를 들 어 className={className}메모: React. js 요소 에 클래스 이름 class 。 class JavaScript ， React.js ：className 을 직접 사용 하여 요소 에 클래스 이름 을 추가 합 니 다.
또 하나의 특례 는 for 속성 입 니 다. 예 를 들 어 htmlFor 로 대체 합 니 다. 즉
3. 사건 감청
감청 이벤트 가 필요 한 요소 에 속성 이 onClick, onKeyDown 과 같은 속성 을 추가 하여 클릭 이 벤트 를 정의 합 니 다. onClick 이 어 표현 식 삽입 값 입 니 다.class Title extends Component {
handleClickOnTitle () {
console.log('Click on title')
}
render () {
return (
this.handleClickOnTitle}>react
)
}
}
ReactDOM.render(
,
document.getElementById(<span class="hljs-string">'root'</span>)
)</code></pre>
<p> ， <code>bind</code> React.js。</p>
<h3 id=" state setstate"> 、 state setState</h3>
<pre><code><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LikeButton</span> <span class="hljs-inheritance"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">Component</span> {</span>
constructor () {
<span class="hljs-keyword">super</span> ()
<span class="hljs-keyword">this</span>.state = { isLiked: <span class="hljs-keyword">false</span>}
}
handleClickOnLikeButton () {
<span class="hljs-keyword">this</span>.setState({
isLiked: !<span class="hljs-keyword">this</span>.state.isLiked
})
}
render () {
<span class="hljs-keyword">return</span> (
<button onclick="{<span" class="hljs-keyword">this.handleClickOnLikeButton.bind(<span class="hljs-keyword">this</span>)}>
{<span class="hljs-keyword">this</span>.state.isLiked ? <span class="hljs-string">' '</span> : <span class="hljs-string">' '</span>}hhh
</button>
)
}
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Index</span> <span class="hljs-inheritance"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">Component</span> {</span>
render () {
<span class="hljs-keyword">return</span> (
<<span class="hljs-keyword">div</span>>
<likebutton/>
<span class="hljs-keyword">div</span>>
)
}
}
ReactDOM.render(
<index/>,
document.getElementById(<span class="hljs-string">'root'</span>)
)
</code></pre>
<p><code>setState</code> Component 。 ，React.js state ， render ， render 。</p>
<p> ， ，<strong> </strong> <strong>this.state = xxx</strong> ， React.js ， 。 ， React.js <strong>setState</strong> ， 。</p>
</div>
</code></p></div>
</div>
</div>
</div>
<!--PC WAP -->
<script type="text/javascript" src="/views/front/js/chanyan.js"/>
<!-- - -->
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
전단 자동화 워 크 플 로 의 hooks예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
