ReactDOM.render() I

Rendering JSX

You’ve learned how to write JSX elements! Now it’s time to learn how to render them.

To render a JSX expression means to make it appear onscreen.

 

import React from 'react';
import ReactDOM from 'react-dom';

// Copy code here:
ReactDOM.render(<h1>Hello world</h1>, 
document.getElementById('app'));

 

---

렌더링 JSX

당신은 JSX 태그들을 작성하는 법을 배웠다. 이제 그것들을 어떻게 렌더하는지 배울 차례이다. 

JSX식을 렌터하는 것은 이것을 스크린에 나타내는 것을 의미한다. 

 

 

---

ReactDOM.render() I

 

import React from 'react';
import ReactDOM from 'react-dom';

// This is just an example, switch to app.js for the exercise.
ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

Let’s examine the code that you just wrote. Start in previous.js, on line 5, all the way to the left.

You can see something called ReactDOM. What’s that?

ReactDOM is the name of a JavaScript library. This library contains several React-specific methods, all of which deal with the DOM in some way or another.

We’ll talk more later about how ReactDOM got into your file. For now, just understand that it’s yours to use.

Move slightly to the right, and you can see one of ReactDOM‘s methods: ReactDOM.render().

ReactDOM.render() is the most common way to render JSX. It takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM. That is the way to make a JSX expression appear onscreen.

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

 

<h1>Hello world</h1>

This is the first argument being passed to ReactDOM.render(). ReactDOM.render()‘s first argument should be a JSX expression, and it will be rendered to the screen.

We’ll discuss the second argument in the next exercise!

 

---

ReactDOM.render() I

 

당신이 방금 작성한 코드를 실행하보자. 

previous.js. 5번째 라인에서 시작해서 왼쪽으로 쭉 나열해보라. 

당신은 ReactDOM 이라고 불리우는 무언가를 볼 수 있다. 이것은 무엇일까?

 

ReactDOM은 자바스크립트 라이브러리의 이름이다. 

이 라이브러리에는 몇 가지 'React-specific methods'이 포함되어 있으며, 이 모든 방법은 어떤 식으로든 DOM을 다룬다.

 

ReactDOM이 당신의 파일에 어떻게 입력되었는지 나중에 자세히 설명할 것이다.

지금은, 이것이 네가 사용할 수 있는 것이라는 것을 이해해라. 

오른쪽으로 살짝 시선을 돌리면, 당신은 ReactDOM의 메소드들 중 하나를 발견할 수 있다. 

ReactDOM.render().

 

ReactDOM.render()는 JSX를 렌더하기 위한 가장 일반적인 방법이다. (render = 어떤 상태가 되게 만들다)

JSX 식을 취하여 해당 DOM 노드 트리를 생성하고 해당 트리를 DOM에 추가한다.

이것이 JSX표현을 화면에 띄우는 방법이다. 

 

당신의 눈을 조금 더 오른쪽에 돌려보아라. 당신은 이 표현에 왔다.

 

<h1>Hello world</h1>

 

 

이것은 ReactDOM.render()에 전달하는 첫번째 인자argument 이다. 

ReactDOM.render()의 첫번째 인자는 JSX식이어야만 한다. 그리고 이것은 스크린에 렌더되어질 것이다. 

 

 

 

---

 

 

 

출처 : 

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

| Codecademy

를 번역했습니다.