React

Few random but important React concepts

arrow

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');  
 }
}

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Leave a Reply

Your email address will not be published. Required fields are marked *