Component Class Instructions

Component Class Instructions

Let’s review what you’ve learned so far! Find each of these points in app.js:

• On line 1, import React from 'react' creates a JavaScript object. This object contains properties that are needed to make React work, such as React.createElement() and React.Component.

• On line 2, import ReactDOM from 'react-dom' creates another JavaScript object. This object contains methods that help React interact with the DOM, such as ReactDOM.render().

• On line 4, by subclassing React.Component, you create a new component class. This is not a component! A component class is more like a factory that produces components. When you start making components, each one will come from a component class.

• Whenever you create a component class, you need to give that component class a name. That name should be written in UpperCamelCase. In this case, your chosen name is MyComponentClass.

Something that we haven’t talked about yet is the body of your component class: the pair of curly braces after React.Component, and all of the code between those curly braces.

Like all JavaScript classes, this one needs a body. The body will act as a set of instructions, explaining to your component class how it should build a React component.

Here’s what your class body would look like on its own, without the rest of the class declaration syntax. Find it in app.js:

{ render() { return <h1>Hello world</h1>; } }

That doesn’t look like a set of instructions explaining how to build a React component! Yet that’s exactly what it is.

Click Next, and we’ll go into how these instructions work.

 

---

컴포넌트 클래스 지시들

 

지금까지 당신이 배운것들을 리뷰해보자! 

app. js에서 이러한 포인트들을 찾아보자.

 

•  첫째줄, import React from 'reac'는 자바스크립트 객체를 생성한다. 이 객체는 React.createElement()와 React.Component같은 리엑트가 일하게 만들기 위해 필요한 속성들을 가지고 있다. 
• 둘째 줄, import ReactDOM from 'react-dom'은 다른 자바스크립트 객체를 생성한다. 이 객체는 리엑트가 DOM과 상호작용하도록 돕는 method들을 포함한다. 
• 4째 줄, React.component를 subclassing 함으로써 당신은 새로운 컴포넌트 클래스를 만들 수있다. 이것은 컴포넌트가 아니다! 컴포넌트 클래스는 컴포넌트들을 생성하는 공장에 더 가깝다. 당신이 컴포넌트를 만들기 시작할때, 각각은 컴포넌트 클래스로부터 올 것이다. 
• 당신이 컴포넌트 클래스를 만들때마다, 당신은 컴포넌트 클레스에 이름을 주어야한다. 이 이름은 UpperCamelCase  작성되어야 한다. 이번 경우에, 당신의 선택된 이름은 MyComponentClass 이다. 

우리가 아직 얘기하지 않은 것은 당신의 컴포넌트 클래스의 body에 대한 것이다 : React.Component 위에 있는 {}, 그리고 이 {}사이에 코드가 모두 들어간다. 

 

JS class들과 같이, 이 것은 body를 필요로 한다. 

body는 너의 컴포넌트 클래스가 어떻게 리엑트 컴포넌트를 빌드해야하는지를 설명하면서 일련의 지침으로써 동작할 것이다. 

 

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

이것은 어떻게 리엑트 컴포넌트를 빌드할지 설명하는 지침처럼 보이지가 않는다. 

아직은 정확하게 그러하지 못하다. 

 

다음을 레슨에서 이어가보자. 

 

 

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/component-class-instructions

| Codecademy