Create a Component Instance

Create a Component Instance

MyComponentClass is now a working component class! 

It’s ready to follow its instructions and make some React components.

 

So, let’s make a React component! It only takes one more line:

 

<MyComponentClass />

 

To make a React component, you write a JSX element. 

Instead of naming your JSX element something like h1 or div like you’ve done before,

give it the same name as a component class. Voilà, there’s your component instance!

 

JSX elements can be either HTML-like, or component instances.

JSX uses capitalization to distinguish between the two! 

That is the React-specific reason why component class names must begin with capital letters.

In a JSX element, that capitalized first letter says, “I will be a component instance and not an HTML tag.”

 

---

Create a Component Instance

 

MyComponentClass는 현재 동작하고있는 컴포넌트 클래스이다! 

 

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

class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

 

이거의 지시들을 따르고 몇몇 리엑트 컴포넌트들을 만들 준비가 되어있다. 

 

이제, 리엑트 컴포넌트를 만들어보자!

 

<MyComponentClass />

 

리엑트 컴포넌트를 만들기 위해서, 당신은 JSX요소를 작성해야한다 

JSX 요소의 이름을 h1 또는 div와 같은 이름으로 지정하는 대신 컴포넌트 클래스와 동일한 이름을 지정해라.

자, 여기 당신의 컴포넌트 인스턴스가 있다!

 

JSX 요소는 HTML같거나 컴포넌트 인스턴스가 될 수 있어야 한다. 

jsx는 두개를 구분하기 위해 대문자를 사용한다. 

이것은 컴포넌트 클래스 이름이 반드시 대문자로 시작해야하는 리엑트의 특별한 이유이다.

jsx 요소에서, 대문자로된 첫번째 문자는 말한다. "나는 html 태그가 아니고 컴포넌트 인스턴스가 될거야"

 

 

즉, 컴포넌트 클래스 이름의 첫글자를 대문자로 주는이유 = html 태그와 구분하기 위해서. (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')
);

 

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