Few random but important React concepts

What is React.Component?

Every class that you write in React needs to extend to React.Component. We use components in React to tell what we want to see in the screen. When data changes, react will update and re-render your components.

Example: This component when rendered will display headline (This is my first React component)

class Heading extends React.Component {
    render() {
      return (<h1>This is my first React component</h1>);
    }
}

What is Arrow Function?

Well, not exactly a React concept, but Arrow function is used a lot in react to make code concise, avoid confusing behavior of this and most important to save typing. 🙂 Below is an example of arrow function that is bind to onClick event of button.

class ArrowDemo extends React.Component {
 render() {
   return (
     <button  onClick={() => alert('click')}>
       Arrow Button
     </button>
   );
 }
}

The first bracket here () represents arguments. Here it is empty saying there are no arguments. The statement after => is real function body. Here we are simply throwing an alert statement. Above can be written simply in a more verbose way as follows.

class ArrowDemo extends React.Component {
constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}
render() {
 return (
     <button  onClick={this.handleClick}>
       Arrow Button
     </button>
   );
 }
 handleClick() {
    alert('click');  
 }
}