ReactJS Components

• React is used as the View in an MVC application.
• Used to create UI components that manage their own state
• ES6 classes can extend React Component to inherit component features
• Class extended from React component must always have a 'render' function otherwise it will throw an error

Types of components

A function component may contain a class component inside.

1. Function based component

const SearchBar = () => {
  return <input />;
}

or 

const App = function() {
  return (
  <div>
    <SearchBar />
  </div>
  )

}

2. Class based component

import React from 'react';

class SearchBar extends React.Component{
  render() {
    return <input />;
  }
}

is the same as:

import React, {Component} from 'react';

class SearchBar extends Component{

  render() {

    return <input />;

  }

}

Using curly braces in import means fetch the property Component from react and assign it to a variable called Component:

const Component = React.Component

Events

class SearchBar extends Component{

  render() {

    return <input onChange={this.onInputChange}/>;

  }

  onInputChange(e) {

    console.lo(e.target.value)

  }

}

Remember:

Curly braces around called function

This can also be shortened to the following:

render() {

    return <input onChange={e => console.log(e.target.value)}/>;

  }