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는 인식할 수 있을 것이다. 

우리는 그 코드를 하나씩 풀 것이다.

이 레슨이 끝나면 당신은 리엑트 컴포넌트를 세우는 방법을 이해할 것이다. 

 

 

https://www.codecademy.com/courses/react-101/lessons/your-first-react-component/exercises/import-react