ReactDOM.render() II

ReactDOM.render() II

Move to the right a little more, and you will see this expression:

 

document.getElementById('app')

 

You just learned that ReactDOM.render() makes its first argument appear onscreen. But where on the screen should that first argument appear?

The first argument is appended to whatever element is selected by the second argument.

In the code editor, select index.html. See if you can find an element that would be selected by document.getElementById('app').

That element acted as a container for ReactDOM.render()‘s first argument! At the end of the previous exercise, this appeared on the screen:

<main id="app">
  <h1>Render me!</h1>
</main>

 

---

ReactDOM.render() II

 

시선을 좀 더 오른쪽으로 돌려보면, 당신은 이 표현을 볼 수 있을 것이다. 

(두번째 인자값)

document.getElementById('app')

 

당신은 ReactDOM.render()가 이것의 첫번째 인자가 화면에 나타나게 하는 것을 배웠다. 

그러나 첫번째 인자는 화면 어디에 나타나야 하는가? 

 

이 첫번째 인자는 두번째 인자에 의해 선택된 어떤 태그에든 추가된다. 

 

코드 에디터에서, index.html을 선택해라. 

당신은 document.getElementById('app').에 의해 선택된 element를 발견할 수 있을 것이다.

 

이 태그는  ReactDOM.render()의 첫번째 인자를 위해 컨테이너로써 동작한다! 

이전 활동 끝에서, 스크린에 이것이 표현된 것이다. 

 

<main id="app">
  <h1>Render me!</h1>
</main>

 

 

 

https://www.codecademy.com/courses/react-101/lessons/react-jsx-intro/exercises/reactdom-render-variable

| Codecademy