ReactJs - Simple Card Component with jscomplete.com/repl

gistfile1.txt

//More Updated Example
//Example - Create a Increment Coutner and Result Component in ReactJs and JsComplete.com/repl
// const Hello = React.createClass({
//   render:function() {
//     return <button>Hello {this.props.name}</button>;
//   }
// });

class Button extends React.Component{
    
    handleClick = () =>{
       this.props.incrementFunc(this.props.incrVal)
    };
    
   render() {
           return (
        <button onClick={this.handleClick}>
           +{this.props.incrVal}
        </button>
      );
   }
}

const Result = React.createClass({
   render : function() {
      return <div>hello {this.props.counter} </div>
   }
})

class App extends React.Component {
    state = { counter:0 };
    
    incrementCounter = (incrVal)=>{
        this.setState((prevState) => ({
            counter : prevState.counter + incrVal
        }))
    };
    
   render() {
      return(
         <div>
            <Button incrVal={1} incrementFunc={this.incrementCounter}/>
               <Button incrVal={3} incrementFunc={this.incrementCounter}/>
            <Result counter={this.state.counter} />
         </div>
         
      )
   }
}
 
ReactDOM.render(
  <App/>,mountNode  
);

sample-react-codes

const Card =(props)=>{
   return(
     <div>
       <img src="http://placehold.it/75" />
       <div>
         <div> Name here..</div>
         <div> Company here .. </div>
       </div>  
     </div>   
   )
}
ReactDOM.render(
  <Card/>,mountNode  
);