React JS Component

#Introduction 
React Applications are made of components. *What is 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.
This code will create and render a new React component:

```javascript
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')
);
```
#Create Component class

Every component must come from a component class. A component class is like a factory that creates components. if you have a component class then you can use that class to produce as many components as you want.

To make a component class, we can use a base class from the React library: ```React.Component```. ```React.Component``` simply is a Javascript class. To create component class, we must subclass ```React.Component```. We can do this by using the syntax ```class ComponentNameHere extends React.Component {}```.
Example:

```javascript
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')
);
```
#The Render function

A component class is like a factory that builds components. It builds these components by consulting a set of instructions, which you must provide. There is only one property that you have to include in the instructions: *a render method*.

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.

```class ComponentFactory extends React.Component { render() {} } ``` 
A render method must contain a ```return``` statement. Usually, this ```return``` statement returns a JSX expression: 

```javascript
class ComponentFactory extends React.Component {
     render() {
        return <h1>Hello World</h1>;
     }
}
```
#Create Component Instance

```MyComponentClass``` is now a working *component class!* It is ready to follow its instructions and make some *React components*. Making a React component, it takes one more line:

```javascript
<MyComponentClass />
```
To make a React component, we write a JSX element. Instead of naming JSX element something like ```h1``` or ```div```, give it the same name as a *component class*. JSX elements can be either HTML-like, or *component instances*. JSX uses capitalization to distinguish between the two! In a JSX element, that capitalized first letter says, "It will be a component instance and not an HTML tag.".

Let's see the example:

```javascript
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')
);
```
#Render A Component
To call a component's render method, you pass that component to ReactDOM.render(). Notice your component, being passed as ReactDOM.render()'s first argument:

```javascript
ReactDOM.render(
   <MyComponetClass />,
   document.getElementById('app')
);
```
```ReactDOM.render()``` will tell ```<MyComponentClass />``` to call its render method.

```<MyComponentClass />``` will call its render method which will return the JSX element. ```ReactDOM.render()``` will then take the result of JSX element and add it to the virtual DOM. 
#Using Multiline JSX in a Component
Take a look at this HTML:

```html
<blockquote>
  <p>
    The world is full of objects, more or less interesting; I do not wish to add any more.
  </p>
  <cite>
    <a target="_blank"
      href="https://en.wikipedia.org/wiki/Douglas_Huebler">
      Douglas Huebler
    </a>
  </cite>
</blockquote>
```
How to make a React Component renders this HTML?

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

const redPanda = {
  src: 'https://upload.wikimedia.org/wikipedia/commons/b/b2/Endangered_Red_Panda.jpg',
  alt: 'Red Panda',
  width:  '200px'
};

class RedPanda extends React.Component {
  render() {
    return (
      <div>
        <h1>Cute Red Panda</h1>
        <img 
          src={redPanda.src}
          alt={redPanda.alt}
          width={redPanda.width} />
      </div>
    );
  }
}

ReactDOM.render(
  <RedPanda />,
  document.getElementById('app')
);
```
#Put Logic in a Render function
A ```render()``` function can also be a fine place to put simple calculations that need to happen right before a component renders. Here's an example of some calculations inside of a ```render``` function: 

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

const friends = [
  {
    title: "Yummmmmmm",
    src: "example1.jpg"
  },
  {
    title: "Hey Guys!  Wait Up!",
    src: "example2.jpg"
  },
  {
    title: "Yikes",
    src: "example3.jpg"
  }
];

// New component class starts here:
class Friend extends React.Component {
  render() {
    let friend = friends[0];
  	return (
    	<div>
        <h1>{friend.title}</h1>
        <img src={friend.src} />
    	</div>
  	);
	}
}

ReactDOM.render(<Friend />, document.getElementById('app'));
```
#Using a Conditional in a Render Function
How might we use a *conditional statement* inside a ```render()``` function?

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

const fiftyFifty = Math.random() < 0.5;

// New component class starts here:
class TonightsPlan extends React.Component {
  render() {
    if (fiftyFifty) {
      return <h1>Tonight I'm going out WOOO</h1>;
    } else {
      return <h1>Tonight I'm going to bed WOOO</h1>;
    }
  }
}

ReactDOM.render(
	<TonightsPlan />,
	document.getElementById('app')
);
```
#Using ```this``` in a Component
The word ```this``` gets used in React a lot!

We will see ```this``` inside of the body of a component class declaration. Here's an example:

```javascript
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```. As we can see ```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".
#Using an EventListener in a Component
Render functions often contain event listeners. Here's an example of an event listener in a render function: 

```javascript
render() {
   return(
       <div onHover={myFunc}>
       </div>
   );
}
```
Recall that even handler is a function that gets called in response to an event. In the above example, the event handler is ```myFunc()```.

In React, We define event handlers as methods on a component class. Like this:

```javascript
class MyClass extends React.Component {
    myFunc() {
       alert('Stop it. Stop hovering.');
    }
    render() {
       return(
          <div onHover={this.myFunc}></div>
       );
    }
}
```
```.myFunc()``` will be called any time that a user hovers over the rendered ```<div></div>```.
#A Component in a Render Function 
A React application can contain dozens, or even hundreds of components.  Render methods can also return another kind of JSX: component instance.

```javascript
class OMG extends React.Component {
  render() {
    return <h1>Whooaa!</h1>;
  }
}

class Crazy extends React.Component {
  render() {
    return <OMG />;
  }
}
```
In the above example, ```Crazy```'s render method ```returns``` an instance of the ```OMG``` component class.