Posted by: Zeeshan Amjad | May 25, 2018

My First React Component


I got  chance to play with one very famous JavaScript library React and play with it. There are two different type of component we can create in React, “Function Component” and “Class Component”. One obvious choice of component style is when we have state or lifecyle  we prefer to use “Class Component”.

Here is an example of Function component

const MyFuncComponent(props) {
  return (<h1>Hello from Function Component</h1>);
}

We can also write in this way

const MyFuncComponent = props => {
  return (<h1>Hello from Function Component</h1>);
}

And here is an example of class component.

class MyClassComponent extends React.Component {
  render() {
    return (<h1>Hello from Class Component</h1>);
  }
}

If we need state in our component or need life cycle, then class component is a choice. One more interesting thing is the above code is the return statement. It is not a string, but JSX and extension of the Java Script language. This will make writing component very easy. We don’t have to use this and can create component without it. Here is an example of it.

const MyFuncComponent = props => {
  return (
	React.createElement("h1", null, "Hello from Function Component")
  );
}

class MyClassComponent extends React.Component {
  render() {
    return (
		React.createElement("h1", null, "Hello from Class Component")
	);
  }
}

Let’s create a Counter Button that display counter value, increment it when click to the maximum value upto the increment value and set it to the initial value when right click on it. There is state in this component, so we need to create a class component for this. Here is a code of CounterButton.

class CounterButton extends React.Component {
	constructor(props) {
  	super(props);
    this.state = { 
    		init: props.init,
        increment: props.increment,
    		counter: props.init,
        max: props.max
    }
  }
  
  handleClick = () => {      
  	this.setState((prevState) => ({
    		counter: prevState.counter + prevState.increment >= prevState.max 
        				? prevState.max : prevState.counter + prevState.increment
    }))
  };
  
  handleContextMenu = (e) => {
  	e.preventDefault();
  	this.setState((prevState) => ({
    		counter: prevState.init
    }))    
  }
  
	render() {
  	return (
    	<button onClick={this.handleClick} onContextMenu={this.handleContextMenu}>
      	{this.state.counter}
      </button>
    )
  }
}

Now le’ts resue this component in another component. Let’s create a collection of CounterButtion with different increment. We can do this with function component, because there is no state involved in it. Here is a code of it.

const CounterButtonCollection = (props) => {
	return (
  	<div>
      <CounterButton init={0} increment={1} max={100} />
      <br />
      <CounterButton init={0} increment={2} max={100} />
      <br />
      <CounterButton init={0} increment={3} max={100} />
      <br />
      <CounterButton init={0} increment={5} max={100} />
		</div>      
  );
}

Here is an out put of this when run in https://jscomplete.com/repl/ 

ReactComponent

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Categories

%d bloggers like this: