반응 소개

이제 브라우저에서 HTML 파일을 열고 콘솔을 엽니다.

'Re'를 입력하세요. React와 ReactDOM이 이제 우리가 사용할 수 있는 전역 변수임을 알 수 있습니다.

이제 React와 ReactDOM이 우리에게 무엇을 제공하는지 살펴보겠습니다.

다양한 유형의 메소드를 사용할 수 있지만 우리는 createElement 메소드를 사용하고 있습니다. React Object에서 createElement 메소드를 사용할 수 있는 것을 보셨나요?

createElement 메서드는 세 개의 인수가 필요함을 보여줍니다

유형: HTML 요소의 유형을 의미합니다.

예: h1,h2,p,div..etc.

소품: 이 요소에 필요한 모든 속성

어린이: div 안에 배치해야 하는 요소와 같은 일반 텍스트 또는 하위 요소를 작성할 수 있습니다.

예:

<div>
<h1>Hi React</h1>
</div>

실제 createElement 메소드

script2.js라는 이름으로 JavaScript 파일을 생성합니다.

let p=React.createElement('p',null,'hello react');

위의 코드는 텍스트 hello react와 함께 'p' 요소를 생성한 것입니다.

이제 HTML을 사용하지 않고 p 요소 생성을 완료했습니다.

브라우저에 표시된 것이 있습니까?

브라우저 돔에 연결되어 있지 않기 때문에 브라우저에 아무것도 표시되지 않는 것 같습니다.

이제 ReactDOM의 사용법이 나옵니다. 다시 한 번 확인해야 합니다.

ReactDOM은 어떤 유형의 메서드를 제공합니까?

사용 가능한 렌더링 방법이 있습니다.

첫 번째 인수를 요소로 취하고 두 번째 인수를 사용하여 요소를 연결해야 하는 dom 노드를 ReactDOM에 알려야 합니다.

이제 렌더링 방법을 실제로 사용해 봅시다.

 ReactDOM.render(p,document.querySelector('.connect'))

이제 브라우저에서 무언가를 보았습니다.

React에서 재사용 가능한 것은 무엇입니까?

이제 동일한 p 요소를 재사용하겠습니다.

var p=React.createElement('p',null,'hello react');

var content = React.createElement('div',null,p,p,p,p,p,p);

ReactDOM.render(content,document.querySelector('.connect'))

지금 브라우저에 'hello react'가 6번 표시되는 것을 보셨나요?

이제 div 요소 안에 6개의 p 요소가 있습니다.

이것들이 마음에 드시기 바랍니다.

Code Repository