Hello World, Part II... THE COMPONENT
Hello World, Part II... THE COMPONENT
React applications are made out of components.
What’s a component?
A component is a small, reusable chunk of code that is responsible for one job.
That job is often to render some HTML.
Take a look at the code below. This code will create and render a new React component:
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponentClass extends React.Component {
render() {
return <h1>Hello world</h1>;
}
};
ReactDOM.render(
<MyComponentClass />,
document.getElementById('app')
);
A lot of that code is probably unfamiliar.
However you can recognize some JSX in there, as well as ReactDOM.render().
We are going to unpack that code, one small piece at a time.
By the end of this lesson, you’ll understand how to build a React component!
Hello World, Part II... THE COMPONENT
리엑트 어플리케이션들은 컴포넌트에의해 만들어진다.
컴포넌트란 무엇인가?
컴포넌트는 하나의 작업을 담당하는 작고 재사용 가능한 코드 조각이다.
이 일은 자주 몇몇의 HTML을 렌더하기 위한 것이다 .
아래의 코드를 보아라. 이 코드는 새로운 리엑트 컴포넌트를 만들고 렌더할 것이다.
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponentClass extends React.Component {
render() {
return <h1>Hello world</h1>;
}
};
ReactDOM.render(
<MyComponentClass />,
document.getElementById('app')
);
많은 코드가 아마 익숙하지 않을것이다.
그러나 ReactDOM.render() 뿐만 아니라 거기에서 몇몇의 JSX는 인식할 수 있을 것이다.
우리는 그 코드를 하나씩 풀 것이다.
이 레슨이 끝나면 당신은 리엑트 컴포넌트를 세우는 방법을 이해할 것이다.