React Review – Components

Continuing with the Codecademy’s React course. They said they will teach both Class and function components, although only function components are used much anymore.

a React component is a small, reusable chunk of code that is responsible for one job, which often involves rendering HTML. They can be defined with classes or functions.

React.Component is a JavaScript class. To create your own component class, you must subclassReact.Component.
class MyComponentClass extends React.Component.  (Component class variable names must begin with capital letters!)
A component class is not a component, but a factory for making components. All javascript classes have bodies — instructions that explain how to build what it is building. This class body explains how to build the React components it builds:

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

A render method is a property whose name is render, and whose value is a function.
The term “render method” can refer to the entire property, or to just the function part.

• Must be included in the body of the component class declaration (so inside {})
• Must contain a return(){} statement

To make a React component from a component class, you put the component class name in an element <MyComponentClass />
Note that component class names are always capitalized

Whenever you make a component, that component inherits all of the methods of its component class.
MyComponentClass has one method: MyComponentClass.render(). Therefore, <MyComponentClass /> also has a method named render.

You can put JSX and logic inside of a class component, but you have to put variables inside of methods. They can’t just be declared in the component.

class Random extends React.Component {
render() {
// First, some logic that must happen
// before rendering:
const n = Math.floor(Math.random() * 10 + 1);
// Next, a return statement
// using that logic:
return <h1>The number is {n}!</h1>;
  }
}

is OK

but

class Random extends React.Component {
// This should be in the render function:
const n = Math.floor(Math.random() * 10 + 1);

render() {
return <h1>The number is {n}!</h1>;
  }
};

Is not OK, because in the second one, the const n variable is declared outside of any method. In the first one, it’s OK because the const n variable is declared inside a render method. 

When you put logic inside of a render method in a class component, the logic should go after the render() but before the return.

They try explain .this

class IceCreamGuy extends React.Component {
get food() {
return ‘ice cream’;
  }

render() {
return <h1>I like {this.food}.</h1>;
  }
}

 this refers to an instance of IceCreamGuy.
 this refers to the object on which this‘s enclosing method, in this case .render(), is called.
It is almost inevitable that this object will be an instance of IceCreamGuy, but technically it could be something else.

Let’s assume that this refers to an instance of your component class, as will be the case in all examples in this course.
IceCreamGuy has two methods: .food and .render().
Since this will evaluate to an instance of IceCreamGuy, this.food will evaluate to a call of IceCreamGuy‘s .food method.
This method will, in turn, evaluate to the string “ice cream.”

Why don’t you need parentheses after this.food? Shouldn’t it be this.food()?

You don’t need those parentheses because .food is a getter method. You can tell this from the get in the above class declaration body.

I guess if you want to call a function created inside of a component class in the same component class, then you have to use “this.FUNCTIONNAMEORFUNCTIONPROPERTY” 

WHY does the below need a this and WHY does the function called on the this not need () ?