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!

About anil

Hi, I'm Anil Verma. I have a passion for teaching and developing awesome front end apps. I was involved in development of post processor for Nastran(built by NASA). More recently I have been building supply chain apps at E2open.
View all posts by anil →

Leave a Reply

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